Search code examples
wpfdata-bindingscale

WPF binding Width to Parent.Width*0.3


I want to bind a control's Width to the parent's Width, but to a certain scale. Is there a way to do something like this:

<Rectangle  Name="rectangle1" Width="{Binding ActualWidth*0.3, ElementName=thumbnailCanvas, UpdateSourceTrigger=PropertyChanged}" Height="{Binding ActualHeight, ElementName=thumbnailCanvas, UpdateSourceTrigger=PropertyChanged}"/>

Solution

  • Sure, but you will need to use a converter. Something like this one:

    using System;
    using System.Globalization;
    using System.Windows.Data;
    using System.Windows.Markup;
    
    namespace WpfTestBench.Converters
    {
        public class PercentageConverter : MarkupExtension, IValueConverter
        {
            private static PercentageConverter _instance;
    
            #region IValueConverter Members
    
            public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
            {
                return System.Convert.ToDouble(value) * System.Convert.ToDouble(parameter);
            }
    
            public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
            {
                throw new NotImplementedException();
            }
    
            #endregion
    
            public override object ProvideValue(IServiceProvider serviceProvider)
            {
                return _instance ?? (_instance = new PercentageConverter());
            }
        }
    }
    

    And your XAML will look like:

    <Window x:Class="WpfTestBench.ScaleSample"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:converters="clr-namespace:WpfTestBench.Converters"
            Title="Scale sample" Height="300" Width="300">
        <Grid Name="ParentGrid">
            <Rectangle
                Width="{Binding Path=ActualWidth, ElementName=ParentGrid, Converter={converters:PercentageConverter}, ConverterParameter='0.5'}"
                Stroke="Black" StrokeThickness="2" />
        </Grid>
    </Window>