Associate the width of the popup with the width of another control with some margin

Question

I want my popup to have the same width as the width of another control, but with some margin.

I want

 <Popup x:Name="ProfilePopup" Height="Auto"   
      Width="{Binding ActualWidth, ElementName=HeaderContainer}" -10 >

But how do you do "-10" in wpf? or is it only possible in code?

Answer 1

To do this, you will need Converter:

public class SumConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        if (parameter != null && values != null)
        {
            double result = 0;
            foreach (object objectValue in values)
            {
                double value = 0;
                double.TryParse(objectValue.ToString(), out value);
                if (parameter.ToString() == "Add" || parameter.ToString() == "+") 
                    result += value;
                if (parameter.ToString() == "Subtract" || parameter.ToString() == "-") 
                    result -= value;
            }
            return result;
        }
        return null;
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        return null;
    }
}

You need to add a property containing the amount you want to subtract (with the name BorderInnerThicknessin the example), and then you will use it as follows:

<Popup x:Name="ProfilePopup" Height="Auto">
    <Popup.Width>
        <MultiBinding Converter="{StaticResource SumConverter}" ConverterParameter="-">
            <Binding Path="ActualWidth" ElementName="HeaderContainer" />
            <Binding Path="BorderInnerThickness" />
        </MultiBinding>
    </Popup.Width>
</Popup>

Answer 2

Converter

or trick:

<Popup x:Name="ProfilePopup" AllowsTransparency="True" Height="Auto" Width="{Binding ActualWidth, ElementName=HeaderContainer}" >
    <Grid Margin="5,0" />
</Popup>