Question

I have a wpf application using mvvm approach. The main window contains a tab control.

Each item within the tab control has its own view model and each tab item contains a wrap panel. I have created an attached property to allow me to bind to the ActualHeight and ActualWidth properties of the panel. (I did not use height/width properties as I need the panel to fill the available space.)

When the window is resized the panel on the active tab is resized however all panels on other tabs are not updated. Watching the bindings only one change is notified.

Is this the expected behaviour using WPF? If not what is wrong with my approach, or if so is there a way to force all the tabs to update?

Answer 1

Each TabItem sounds like it is being drawn separately. Usually WPF unloads TabItems that are not visible, so at the time the Window’s Size changes, there’s only one WrapPanel that exists. When you re-load a TabItem by switching tabs, if something is not bound (such as the ActualHeight), then it will reload to its original values defined in your XAML

Usually I prefer to store my sizes as a percentage, and then use a Converter to convert the percentage to an actual size

The converter I usually use is below. I’m created this when I first started with WPF, and I wasn’t aware there were MultiConverters at the time. I’m sure it could be re-written to be a multi-converter, however I’ve never gotten around to doing it yet.

To use it, add your converter to your Resources

<local:PercentOfParentConverter x:Key="PanelHeightConverter" />
<local:PercentOfParentConverter x:Key="PanelWidthConverter" />

Set your bindings based on the Converter

<Setter Property="Height" Value="{Binding Path=PanelHeight, 
            Converter={StaticResource PanelHeightConverter}}" />
<Setter Property="Width" Value="{Binding Path=PanelWidth, 
            Converter={StaticResource PanelWidthConverter}}" />

And in the Code-Behind, be sure to hook into the SizeChanged event to update the converter’s ParentSize whenever the size changes

// If workarea size changes, reposition/resize panels within it to keep the same layout
private void PanelSizeChanged(object sender, SizeChangedEventArgs e)
{
    Panel c = sender as Panel;
    if (c != null)
    {
        // Set the parent's height/width on the converter
        PercentOfParentConverter sizeConverter = (PercentOfParentConverter)c.FindResource("PanelHeightConverter");
        if (sizeConverter != null) sizeConverter.ParentSize = c.ActualHeight;

        sizeConverter = (PercentOfParentConverter)c.FindResource("PanelWidthConverter");
        if (sizeConverter != null) sizeConverter.ParentSize = c.ActualWidth;

        foreach (UIElement child in c.Children)
        {
            RebindPanelSizeAndPosition(child);
        }
    }
}

// Refreshes the Panel.Height/Width bindings of the UIElement passed to it
private void RebindPanelSizeAndPosition(UIElement element)
{
    BindingOperations.GetBindingExpressionBase(element, Panel.HeightProperty).UpdateTarget();
    BindingOperations.GetBindingExpressionBase(element, Panel.WidthProperty).UpdateTarget();
}

The actual converter code looks like this:

// Converts a percent to a double value based on the parent size set
public class PercentOfParentConverter : IValueConverter
{
    public double ParentSize { get; set; }

    #region IValueConverter Members

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var percent = (double) value;
        return percent*ParentSize;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (ParentSize != 0)
        {
            return (double) value/ParentSize;
        }
        else
        {
            return 0;
        }
    }

    #endregion
}