How to Navigate, Group, Sort and Filter Data in WPF

What is a CollectionView?

WPF has a powerful data binding infrastructure. It allows you to bind almost any kind of collection directly to a view. But when it comes to sorting, filtering and grouping the support of the collections is rare. That's the point where the CollectionView comes into play. A collection view is a wrapper around a collection that provides the following additional features:

• Navigation
• Sorting
• Filtering
• Grouping

How to Create and Use a CollectionView

The following example shows you how to create a collection view and bind it to a ListBox

 
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ListBox ItemsSource={Binding Customers} />
</Window>
 
 

 
public class CustomerView
{
   public CustomerView()
   {
        DataContext = new CustomerViewModel();
   }
}
 
public class CustomerViewModel
{
    private ICollectionView _customerView;
 
    public ICollectionView Customers
    {
        get { return _customerView; }
    }
 
    public CustomerViewModel()
    {
        IList<Customer> customers = GetCustomers();
        _customerView = CollectionViewSource.GetDefaultView(customers);
    }
}
 
 

Navigation

The collection view adds support for selection tracking. If you set the property IsSynchronizedWithCurrentItem to True on the view that the collection is bound to, it automatically synchronizes the current item of the CollectionView and the View.

 
<ListBox ItemsSource="{Binding Customers}" IsSynchronizedWithCurrentItem="True" />
 
 

If you are using a MVVM (Model-View-ViewModel) pattern, you don't have to extra wire-up the SelectedItem of the control, because it's implicity available over the CollectionView.

 
IList<Customer> customers = GetCustomers();
ICollectionView _customerView = CollectionViewSource.GetDefaultView(customers);
_customerView.CurrentChanged = CustomerSelectionChanged;
 
private CustomerSelectionChanged(object sender, EventArgs e)
{
  // React to the changed selection
}
 
 

You can also manually control the selection from the ViewModel by calling the MoveCurrentToFirst() or MoveCurrentToLast() methods on the CollectionView.

Filtering

To filter a collection view you can define a callback method that determines if the item should be part of the view or not. That method should have the following signature: bool Filter(object item). Now set the delegate of that method to the Filter property of the CollectionView and you're done.

 
ICollectionView _customerView = CollectionViewSource.GetDefaultView(customers);
_customerView.Filter = CustomerFilter
 
private bool CustomerFilter(object item)
{
    Customer customer = item as Customer;
    return customer.Name.Contains( _filterString );
}
 
 

Refresh the filter

If you change the filter criteria and you want to refresh the view, you have to call Refresh() on the collection view

 
public string FilterString
{
  get { return _filterString; }
  set 
  { 
      _filterString = value; 
      NotifyPropertyChanged("FilterString");
      _customerView.Refresh();
  }
}
 
 

Sorting

Sorting data ascending or descending by one or multiple criterias is a common requirement for viewing data. The collection view makes it so easy to achieve this goal. Just add as many SortDescriptions as you like to the CollectionView

 
 
ICollectionView _customerView = CollectionViewSource.GetDefaultView(customers);
_customerView.SortDescriptions.Add( 
                new SortDescription("LastName", ListSortDirection.Ascending );
_customerView.SortDescriptions.Add( 
                new SortDescription("FirstName", ListSortDirection.Ascending );
 
 

Fast Sorting

The sorting technique explained above is really simple, but also quite slow for a large amount of data, because it internally uses reflection. But there is an alternative, more performant way to do sorting by providing a custom sorter.

 
ListCollectionView _customerView = CollectionViewSource.GetDefaultView(customers);
                                         as ListCollectionView;
_customerView.CustomSort = new CustomerSorter(); 
 
public class CustomerSorter : IComparer
{
    public int Compare(object x, object y)
    {
        Customer custX = x as Customer;
        Customer custY = y as Customer;
        return custX.Name.CompareTo(custY.Name);
    }
}
 
 

Grouping

Grouping is another powerful feature of the CollectionView. You can define as many groups as you like by adding GroupDescriptions to the collection view.
Note: Grouping disables virtualization! This can bring huge performance issues on large data sets. So be careful when using it.

 
ICollectionView _customerView = CollectionViewSource.GetDefaultView(customers);
_customerView.GroupDescriptions.Add(new PropertyGroupDescription("Country"));
 
 

To make the grouping visible in the view you have to define a special GroupStyle on the view.

 
<ListBox ItemsSource="{Binding Customers}">
    <ListBox.GroupStyle>
        <GroupStyle.HeaderTemplate>
            <DataTemplate>
              <TextBlock Text="{Binding Path=Name}"/>
            </DataTemplate>
          </GroupStyle.HeaderTemplate>
    </ListBox.GroupStyle>
</ListBox>
 
 

How to create a CollectionView in XAML

It's also possible to create a CollectionView completely in XAML

 
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Window.Resources>
        <CollectionViewSource Source="{Binding}" x:Key="customerView">
           <CollectionViewSource.GroupDescriptions>
               <PropertyGroupDescription PropertyName="Country" />
           </CollectionViewSource.GroupDescriptions>
        </CollectionViewSource>
    </Window.Resources>
    <ListBox ItemSource="{Binding Source={StaticResource customerView}}" />
</Window>
 
 

Popular DataBinding Expressions

DataContext Bindings Each control in WPF has a DataContext property. It's meant to be bound to an object that contains the data to be displayed. The DataContext property is inherited along the logical tree.
{Binding}	Binds object in the DataContext
{Binding Name}	Binds the Name property of the object in the DataContext
{Binding Name.Length}	Binds the Length property of the Name property of the object in the DataContext.
RelativeSource Binding The relative source mode of the binding extension helps you to bind to an object with an relative relation to you. You don't know your or its abolute position, but you know if it's the previous or next item, two levels above you or of an specific type.
{Binding RelativeSource={RelativeSource Self}}	Bind to your self. Helpful to access your own properties.
{Binding Text, RelativeSource={RelativeSource Self}}	Binds Text property of the target element.
{Binding IsSelected, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type ListBoxItem}}}	Binds to the IsSelected property of a parent element of type ListBoxItem.
Current Item of Collection Bindings The slash is a special operator that lets you access the current item of a collection view.
{Binding /}	Binds to the current item of a collection in the data context.
{Binding Customers/}	Binds to the current item of a collection from the Customer property within the data context.
{Binding Customers/Name}	Binds to the Name property of the current item of the Customer collection within the data context.

How to Bind to Values of an Enum

You cannot directly bind the values of an enum to a WPF list control, because the enum type does not provide a property that returns all values. The only way to get the names is to call the GetNames() method. But how to call a method from XAML?
The trick is to use an ObjectDataProvider, that allows us to specify the name of a method and their parameters and he invokes it from XAML. The result can be used by using a normal data binding

 
xmlns:sys="clr-namespace:System;assembly=mscorlib"
 
<Window.Resources>
    <ObjectDataProvider x:Key="aligmnments" 
                        MethodName="GetNames" ObjectType="{x:Type sys:Enum}">
        <ObjectDataProvider.MethodParameters>
            <x:Type TypeName="VerticalAlignment" />
        </ObjectDataProvider.MethodParameters>
    </ObjectDataProvider>
</Window.Resources>
 
 

 
<ComboBox ItemsSource="{Binding Source={StaticResource aligmnments}}" />
 
 

Debug Databinding Issues in WPF

DataBinding is one of the most powerful features in WPF. But because it resolves the bindings at runtime and does not throw exceptions, it's sometimes hard to find the reason why the data do not appear as expected. There are mainly two reasons:

• The DataBinding expression is invalid. Then use Trace Output to resolve.
• The DataBinding expression is valid, but the result is not the expected. Then use a Debug Converter to resolve it.

Method 1: Trace messages in the output window

In the example, the text property of the TextBlock is bound to the property "InvalidPath" of the StackPanel - which does not exists.

 
<Window x:Class="DebugDataBinding.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
    <StackPanel x:Name="stack">
        <TextBlock Text="{Binding ElementName=stack, Path=InvalidPath}" />
    </StackPanel>
</Window>
 
 

In this case the invalid databinding expression is reported by a trace message in the output window

System.Windows.Data Error: 39 : BindingExpression path error: 'InvalidPath' property not found on 'object' ''StackPanel' (Name='stack')'. BindingExpression:Path=InvalidPath; DataItem='StackPanel' (Name='stack'); target element is 'TextBlock' (Name=''); target property is 'Text' (type 'String')

Note: Binding to a path of a property that has NULL value is a valid expression and does not generate an error message (for e.g. binding to a property of the data context that is NULL).

Adjust the trace level (.NET 3.5 and higher)

NET3.5 has a new feature that allows you to set the level of details of trace messages to None, Low, Medium or High.
To set the trace level you have to include an extra namespace to your XAML:

 
<Window x:Class="DebugDataBinding.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:diag="clr-namespace:System.Diagnostics;assembly=WindowsBase">
 
    <StackPanel x:Name="stack">
        <TextBlock Text="{Binding ElementName=stack, Path=InvalidPath, 
                          diag:PresentationTraceSources.TraceLevel=High}" />
    </StackPanel>
</Window>
 
 
 

The following snipped shows how to adjust the trace level by code:

 
PresentationTraceSources.DataBindingSource.Listeners.Add(
                    new ConsoleTraceListener());
 
PresentationTraceSources.DataBindingSource.Switch.Level = SourceLevels.All;
 
 

Method 2: Use a ValueConverter to break into the debugger

A simple trick is to write a value converter that does nothins except breaking into the debugger. All you need to do now is to add this converter to the binding expression that fails and you can easily see the values that should be bound.

 
/// <summary>
/// This converter does nothing except breaking the
/// debugger into the convert method
/// </summary>
public class DatabindingDebugConverter : IValueConverter
{
    public object Convert(object value, Type targetType, 
        object parameter, CultureInfo culture)
    {
        Debugger.Break();
        return value;
    }
 
    public object ConvertBack(object value, Type targetType, 
        object parameter, CultureInfo culture)
    {
        Debugger.Break();
        return value;
    }
}
 
 

To use the converter in XAML, reference the namespace of the assembly that contains the converter and add an instance of it to the resources of your window.

 
<Window x:Class="DebugDataBinding.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:DebugDataBinding"
    Title="Window1" Height="300" Width="300">
 
    <Window.Resources>
        <local:DatabindingDebugConverter x:Key="debugConverter" />
    </Window.Resources>
 
    <StackPanel x:Name="stack">
        <TextBlock Text="{Binding ElementName=stack, Path=ActualWidth, 
                          Converter={StaticResource debugConverter}}" />
    </StackPanel>
</Window>
 
 

ValueConverters

Introduction

If you want to databind two properties that have incompatible types, you need a piece of code in between, that converts the value from source to target type and back. This piece of code is called ValueConverter. A value converter is a class, that implements the simple interface IValueConverter with the two methods object Convert(object value) and object ConvertBack(object value).

How to implement a ValueConverter

WPF already provides a few value converts, but you will soon need to implement your own converts. To do this, add a class to your project and call it [SourceType]To[TargetType]Converter. This is a common naming for value converters. Make it public and implement the IValueConverter interface. That's all you need to do.

 
public class BoolToVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, 
        object parameter, CultureInfo culture)
    {
        // Do the conversion from bool to visibility
    }
 
    public object ConvertBack(object value, Type targetType, 
        object parameter, CultureInfo culture)
    {
        // Do the conversion from visibility to bool
    }
}
 
 

How to use a ValueConverter in XAML

First thing you need to do is to map the namespace of your converter to a XAML namespace. Then you can create an instance of a value converter in the resources of the view and give it a name. Then you can reference it by using {StaticResource}

 
<Window x:Class="VirtualControlDemo.Window1"
    ...
    xmlns:l="clr-namespace:VirtualControlDemo"
    ...>
    <Window.Resources>
        <l:BoolToVisibilityConverter x:Key="converter" />
    </Window.Resources>
    <Grid>
        <Button Visibility="{Binding HasFunction, 
            Converter={StaticResource converter}}" />
    </Grid>
</Window>
 
 

Simplify the usage of ValueConvers

If you want to use a normal ValueConverter in XAML, you have to add an instance of it to the resources and reference it by using a key. This is cumbersome, because and the key is typically just the name of the converter.
A simple and cool trick is to derive value converters from MarkupExtension. This way you can create and use it in the binding like this: Text={Binding Time, Converter={x:MyConverter}}, and that is quite cool!

 
public abstract class BaseConverter : MarkupExtension
{
    public override object ProvideValue(IServiceProvider serviceProvider)
    {
        return this;
    }
}
 
 

StringFormat Converter

The StringFormatConverter is a useful converter to control the format of an implicit string conversion of an object (e.g. if you bind a DateTime to a TextBlock ).

 
[ValueConversion(typeof(object), typeof(string))]    
public class StringFormatConverter : BaseConverter, IValueConverter    
{        
    public object Convert(object value, Type targetType, object parameter,
                      System.Globalization.CultureInfo culture)        
    {            
        string format = parameter as string;
        if (!string.IsNullOrEmpty(format))
        {                
             return string.Format(culture, format, value);
        }
        else           
        {                
            return value.ToString();
    }
 
    public object ConvertBack(object value, Type targetType, object parameter,
                    System.Globalization.CultureInfo culture)
    {
        return null; 
    }            
}
 

Data Validation in WPF

What we want to do is a simple entry form for an e-mail address. If the user enters an invalid e-mail address, the border of the textbox gets red and the tooltip is showing the reason.

Implementing a ValidationRule (.NET 3.0 style)

In this example I am implementing an generic validation rule that takes a regular expression as validation rule. If the expression matches the data is treated as valid.

 
/// <summary>
/// Validates a text against a regular expression
/// </summary>
public class RegexValidationRule : ValidationRule
{
    private string _pattern;
    private Regex _regex;
 
    public string Pattern
    {
        get { return _pattern; }
        set
        {
            _pattern = value;
            _regex = new Regex(_pattern, RegexOptions.IgnoreCase);
        }
    }
 
    public RegexValidationRule()
    {
    }
 
    public override ValidationResult Validate(object value, CultureInfo ultureInfo)
    {
        if (value == null || !_regex.Match(value.ToString()).Success)
        {
            return new ValidationResult(false, "The value is not a valid e-mail address");
        }
        else
        {
            return new ValidationResult(true, null);
        }
    }
}
 
 

First thing I need to do is place a regular expression pattern as string to the windows resources

 
<Window.Resources>
        <sys:String x:Key="emailRegex">^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@
        [a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]
        *[a-zA-Z]$</sys:String>    
</Window.Resources>
 
 

Build a converter to convert ValidationErrors to a multi-line string

The following converter combines a list of ValidationErrors into a string. This makes the binding much easier. In many samples on the web you see the following binding expression:
{Binding RelativeSource={RelativeSource Self},Path=(Validation.Errors)[0].ErrorContent}
This expression works if there is one validation error. But if you don't have any validation errors the data binding fails. This slows down your application and causes the following message in your debug window:
System.Windows.Data Error: 16 : Cannot get ‘Item[]‘ value (type ‘ValidationError’) from ‘(Validation.Errors)’ (type ‘ReadOnlyObservableCollection`1′). BindingExpression:Path=(0).[0].ErrorContent; DataItem=’TextBox’...
The converter is both, a value converter and a markup extension. This allows you to create and use it at the same time.

 
[ValueConversion(typeof(ReadOnlyObservableCollection<ValidationError>), typeof(string))]
public class ValidationErrorsToStringConverter : MarkupExtension, IValueConverter
{
    public override object ProvideValue(IServiceProvider serviceProvider)
    {
        return new ValidationErrorsToStringConverter();
    }
 
    public object Convert(object value, Type targetType, object parameter, 
        CultureInfo culture)
    {
        ReadOnlyObservableCollection<ValidationError> errors =
            value as ReadOnlyObservableCollection<ValidationError>;
 
        if (errors == null)
        {
            return string.Empty;
        }
 
        return string.Join("\n", (from e in errors 
                                  select e.ErrorContent as string).ToArray());
    }
 
    public object ConvertBack(object value, Type targetType, object parameter, 
        CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}
 
 

Create an ErrorTemplate for the TextBox

Next thing is to create an error template for the text box.

 
<ControlTemplate x:Key="TextBoxErrorTemplate" TargetType="Control">
    <Grid ClipToBounds="False" >
        <Image HorizontalAlignment="Right" VerticalAlignment="Top" 
               Width="16" Height="16" Margin="0,-8,-8,0" 
               Source="{StaticResource ErrorImage}" 
               ToolTip="{Binding ElementName=adornedElement, 
                         Path=AdornedElement.(Validation.Errors), 
                         Converter={k:ValidationErrorsToStringConverter}}"/>
        <Border BorderBrush="Red" BorderThickness="1" Margin="-1">
            <AdornedElementPlaceholder Name="adornedElement" />
        </Border>
    </Grid>
</ControlTemplate>
 

The ValidationRule and the ErrorTemplate in Action

Finally we can add the validation rule to our binding expression that binds the Text property of a textbox to a EMail property of our business object.

 
<TextBox x:Name="txtEMail" Template={StaticResource TextBoxErrorTemplate}>
    <TextBox.Text>
        <Binding Path="EMail" UpdateSourceTrigger="PropertyChanged" >
            <Binding.ValidationRules>
                <local:RegexValidationRule Pattern="{StaticResource emailRegex}"/>
            </Binding.ValidationRules>
        </Binding>
    </TextBox.Text>
</TextBox>
 
 

How to manually force a Validation

If you want to force a data validation you can manually call UpdateSource() on the binding expression. A useful scenario could be to validate on LostFocus() even when the value is empty or to initially mark all required fields. In this case you cann call ForceValidation() in the Loaded event of the window. That is the time, when the databinding is established.

The following code shows how to get the binding expression from a property of a control.

 
private void ForceValidation()
{
  txtName.GetBindingExpression(TextBox.TextProperty).UpdateSource();    
}
 
 

An elegant way to implement INotifyPropertyChanged

Introduction

A very common and popular way to synchronize data between the model and the view in WPF is using DataBinding. The value of the model is transferred to the view once, when the binding is initialized. But for every subsequent change, the model must notify the binding to transfer the value again. This is done by implementing the INotifyPropertyChanged interface on the model.
In the setter of every bound property there must be some code to raise the PropertyChanged event, passing the name of the modified property as a string. This has some disadvantages:

• You cannot use Auto-properties
• The property name is passed as a string. This brings ugly errors, when you forgot to change the string after a rename.
• Every property needs extra code

The basic way to do it

 
private string _name;
 
public string Name
{
   get { return _name; }
   set 
   {
      _name = value;
      PropertyChanged("Name");
   }
}
 
private void PropertyChanged(string prop)
{
   if( PropertyChanged != null )
   {
      PropertyChanged(this, new PropertyChangedEventArgs(prop);
   }
}
 
 
 

A more elegant way to do it

The basic implementation requires two lines of code in the setter and the property name is passed as a string, which is not very robust. A more elegant solution is to use the power of expression trees to get the property name out of a lambda expression. The result looks like this:

 
private string _name;
public string Name
{
   get { return _name; }
   set { PropertyChanged.ChangeAndNotify(ref _name, value, () => Name); }
}
 
 

 
public static bool ChangeAndNotify<T>(this PropertyChangedEventHandler handler, 
     ref T field, T value, Expression<Func<T>> memberExpression)
{
    if (memberExpression == null)
    {
        throw new ArgumentNullException("memberExpression");
    }
    var body = memberExpression.Body as MemberExpression;
    if (body == null)
    {
        throw new ArgumentException("Lambda must return a property.");
    }
    if (EqualityComparer<T>.Default.Equals(field, value))
    {
        return false;
    }
 
    var vmExpression = body.Expression as ConstantExpression;
    if (vmExpression != null)
    {
        LambdaExpression lambda = Expression.Lambda(vmExpression);
        Delegate vmFunc = lambda.Compile();
        object sender = vmFunc.DynamicInvoke();
 
        if( handler != null)
        {
            handler(sender, new PropertyChangedEventArgs(body.Member.Name));
        }
    }
 
    field = value;
    return true;
}
 
 

The solution is ispired by the following articles:

• http://blog.decarufel.net/2009/07/how-to-use-inotifypropertychanged-type_22.html
• http://stackoverflow.com/questions/1315621/implementing-inotifypropertychanged-does-a-better-way-exist<7a>

DataBinding in WPF

Introduction

WPF provides a simple and powerful way to auto-update data between the business model and the user interface. This mechanism is called DataBinding. Everytime when the data of your business model changes, it automatically reflects the updates to the user interface and vice versa. This is the preferred method in WPF to bring data to the user interface.
Databinding can be unidirectional (source -> target or target <- source), or bidirectional (source <-> target).
The source of a databinding can be a normal .NET property or a DependencyProperty. The target property of the binding must be a DependencyProperty.
To make the databinding properly work, both sides of a binding must provide a change notification that tells the binding when to update the target value. On normal .NET properties this is done by raising the PropertyChanged event of the INotifyPropertyChanged interface. On DependencyProperties it is done by the PropertyChanged callback of the property metadata
Databinding is typically done in XAML by using the {Binding} markup extension. The following example shows a simple binding between the text of a TextBox and a Label that reflects the typed value:

 
<StackPanel>
    <TextBox x:Name="txtInput" />
    <Label Content="{Binding Text, ElementName=txtInput, 
                     UpdateSourceTrigger=PropertyChanged}" />
</StackPanel>
 
 

DataContext

Every WPF control derived from FrameworkElement has a DataContext property. This property is meant to be set to the data object it visualizes. If you don't explicity define a source of a binding, it takes the data context by default.
The DataContext property inherits its value to child elements. So you can set the DataContext on a superior layout container and its value is inherited to all child elements. This is very useful if you want to build a form that is bound to multiple properties of the same data object.

 
<StackPanel DataContext="{StaticResource myCustomer}">
    <TextBox Text="{Binding FirstName}"/>
    <TextBox Text="{Binding LastName}"/>
    <TextBox Text="{Binding Street}"/>
    <TextBox Text="{Binding City}"/>
</StackPanel>
 
 

ValueConverters

If you want to bind two properties of different types together, you need to use a ValueConverter. A ValueConverter converts the value from a source type to a target type and back. WPF already includes some value converters but in most cases you will need to write your own by implementing the IValueConverter interface.
A typical example is to bind a boolean member to the Visibility property. Since the visibility is an enum value that can be Visible, Collapsed or Hidden, you need a value converter.

 
<StackPanel>
    <StackPanel.Resources>
        <BooleanToVisibilityConverter x:Key="boolToVis" />
    </StackPanel.Resources>
 
    <CheckBox x:Name="chkShowDetails" Content="Show Details" />
    <StackPanel x:Name="detailsPanel" 
                Visibility="{Binding IsChecked, ElementName=chkShowDetails, 
                             Converter={StaticResource boolToVis}}">
    </StackPanel>
</StackPanel>
 
 

The following example shows a simple converter that converts a boolen to a visibility property. Note that such a converter is already part of the .NET framework.

 
public class BooleanToVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, 
                          CultureInfo culture)
    {
        if (value is Boolean)
        {
            return ((bool)value) ? Visibility.Visible : Visibility.Collapsed;
        }
 
        return value;
    }
 
    public object ConvertBack(object value, Type targetType, object parameter, 
                              CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}
 
 

Tip: you can derive your value converter from MarkupExtension and return its own instance in the ProvideValue override. So you can use it directly without referencing it from the resources.
Another Tip: When you get the error "No constructor for type '...' has 0 parameters.", you need to add an default constructor to your converter, even it's not needed. Just for the WPF designer.

How to create a Custom Layout Panel in WPF

WPF already ships with a rich set of layout panels. Each of them fits to solve a particular problem.

• Canvas - To arrange elements by X,Y coordinates.
• Grid - To arrange elements based on rows and columns.
• StackPanel - To stack elements horizontally or vertically.
• DockPanel - To dock elements to a particular side.
• WrapPanel - To stack elements and automatically begin a new row.

But sometimes none of the included layout panels helps you to arrange child elements in the way you like it. In this case its easy to write your own layout panel. All you need to do is to create a new class that derives from Panel. There are two methods to override:

• MeasureOverride - to determine the required size of the panel according to the desired size of the child elements and the available space.
• ArrangeOverride - to arrange the elements in the finally available space. The final size can be smaller than the requested.

 
public class MySimplePanel : Panel
{
    // Make the panel as big as the biggest element
    protected override Size MeasureOverride(Size availableSize)
    {
        Size maxSize = new Size();
 
        foreach( UIElement child in InternalChildern)
        {
            child.Measure( availableSize );
            maxSize.Height = Math.Max( child.DesiredSize.Height, maxSize.Height);
            maxSize.Width= Math.Max( child.DesiredSize.Width, maxSize.Width);
        }
    }
 
    // Arrange the child elements to their final position
    protected override Size ArrangeOverride(Size finalSize)
    {
        foreach( UIElement child in InternalChildern)
        {
            child.Arrange( new Rect( finalSize ) );
        }
    }
}
 
 

Popular Custom Panels

Here are some popular custom panels on the internet:

• TreeMap Panel
• Animating Tile Panel
• Radial Panel
• Element Flow Panel
• Ribbon Panel