Bind width of UI element to a percentage of another UI element's width

Question

Based on this question, but slightly different.

I'm not sure if this is possible. Is there any way to link an UI element's width to another element's width percentage?

For example:

<ScrollViewer x:Name="scrollviewerWrapper">

     <TextBlock x:Name="textblock" 
                Width="{Binding Path=Width, [[[ % of ]]] ElementName=scrollviewerWrapper}" />

</ScrollViewer>

So if my ScrollViewer is 100px, I want my TextBlock to be 60% of that = 60px (the scrollviewer's width is dynamic).

score 3 · Accepted Answer · answered Apr 10 '13 at 03:31

So I ended up using a converter to pass a number. Only think, instead of a percentage I went for the remainder of the total minus a fixed width, because I had a number for that.

XAML:

Width="{Binding Path=ActualWidth, ElementName=exampleElement, Converter={StaticResource MyConverter}, ConverterParameter={StaticResource ResourceKey=actionAreaWidth}}">

Parameter conversion:

<clr:Double x:Key="actionAreaWidth">150</clr:Double>

And the converter itself:

 public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {

            double percentage = 100;
            double.TryParse(parameter.ToString(), out percentage);

            var actualWidth = (double)value;
            return actualWidth * (percentage / 100);
        }

Bind width of UI element to a percentage of another UI element's width

1 Answers1