WPF: adapt to resizing by changing the level of detail

Question

Suppose the view contains a list of customers. By default, this view is provided with many screen properties and is populated with its client details. Each item in the list can display the customer name in a larger font, the address on the second line with a smaller font. Perhaps some statistics, for example, the amount of previous orders, etc.

Now, if the user narrows the window, he wants to have enough space for all these details. What would be the right way to handle this? Is there some way to bind which datatemplate is used for each element?

Now, if the user makes the window even smaller - is it possible to get rid of the list? Replace it with a label showing the number of customers or something else?

Any suggestions on how this can be resolved? Do you know of any demons showing something like this?

Answer 1

I would approach this by binding the Visibility property of your controls to the width (or height, depending on your layout) of the window, through the 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 comparison that will allow us to collapse the element if the value is less than the given parameter. We can use it as follows:

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

So the idea is that the ListBox crashes if the window width drops below 400.

None of this has been tested, but hopefully this gives you some ideas.