CODEWITHSUNDEEP
wpflayoutdatatemplate
Vegar
Vegar

Reputation: 12898

WPF: Adapting to changes in size by changing level of details

Lets say that a view contains a list of customers. By default, this view is given a lot of screen estate, and fill it with details of the customer. Each item in the list could display the name of the customer in a larger font, the address on a second line with a smaller font. Maybe some statistics like total of previous orders etc.

Now, if the user narrows the window, it want be enough space for all that details. What would be the right way of dealing with this? Is there some way of binding what datatemplate is used for each item?

Now, if the user makes the window even smaller - would it be possible to get rid of the list all together? Replacing it with a label showing the count of customers or something?

Any suggestions on how this could be solved? Do you know of any demoes demonstrating anything similar?

Upvotes: 4

Views: 278

Answers (1)

Matt Hamilton
Matt Hamilton

Reputation: 204129

I would approach this by binding the Visibility property of your controls to the width (or height, depending on your layout) of the window, via a converter. Consider something like this:

public class HideIfSmallConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        var c = value as IComparable;
        if (c == null) return Visibilty.Visible;

        return c.CompareTo(parameter) < 0 ? Visibility.Collapsed : Visibility.Visible;
    }
}

Now we have a comparer that will let us collapse an element if the value is less than the given parameter. We can use that in this way:

<ListBox Visibility="{Binding ActualWidth,RelativeSource={RelativeSource FindAncestor,AncestorType=Window},Converter={StaticResource hideIfSmall},ConverterParameter=400}" />

So the idea is that the ListBox collapses if the window's width drops below 400.

None of this is tested, but hopefully it gives you some ideas.

Upvotes: 3

Related Questions