Using DataBinding values to update Width of a Control (WPF)

Question

I created a user control and an associated view model. The properties "DisplayName" and "TimeIntervalLength" of the view model are displayed in the user control view DataBinding. Depending on those properties of the view model I want to update the width of my control. The width should be "TimeIntervalLength" but at least "DisplayName". I tried to override "OnPropertyChanged" but this does not work. Further I could not find an appropriated event to override.

Thanks in advance.

Answer 1

You may try just not specifying a Width/Height on your UserControl. It should fit to the controls hosted within.

<UserControl x:Class="MyUserControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <StackPanel>
        <TextBlock x:Name="TextBlock1" Text="DisplayName Goes Here" />
        <local:TimeIntervalControl x:Name="TimeInterval" />
    </StackPanel>
</UserControl>

Another option is to use an IValueConverter to do some heavier lifting:

<UserControl x:Class="MyUserControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <UserControl.Resources>
        <local:MaxValueConverter x:Key="MaxValue" />
    </UserControl.Resources>
    <UserControl.Width>
        <MultiBinding Converter="{StaticResource MaxValue}">
            <Binding Path="ActualWidth" ElementName="TextBlock1" />
            <Binding Path="ActualWidth" ElementName="TimeInterval" />
        </MultiBinding>
    </UserControl.Width>
    <StackPanel>
        <TextBlock x:Name="TextBlock1" Text="DisplayName Goes Here" />
        <local:TimeIntervalControl x:Name="TimeInterval" />
    </StackPanel>
</UserControl>

Heavy lifting in your MaxValueConverter:

public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
   if (values == null)
   {
       return Binding.DoNothing;
   }

   return values.Max(obj => (obj is double) ? (double)obj : 0.0);
}

Answer 2

Not entirely sure if I understand correctly, but it sounds like the easiest thing to do would be to add a calculated property to your ViewModel and then bind to that from the View:

// In your model
public int DisplayWidth {
    get { return CalculateDisplayWidth(); } // todo
}

(Obviously you can replace "CalculateDisplayWidth()" with whatever you need)

<!-- In your view -->
<UserControl x:Class="MyUserControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="{Binding Path=DisplayWidth, Mode=OneWay}">

</UserControl>

Answer 3

Instead of controlling Width, control MinWidth . And clear the Width property in the constructor of UserControl:

this.ClearValue(WidthProperty);