StackGrid usage example

by Geert 22. March 2011 20:07

Catel is an open-source MVVM Framework for WPF, Silverlight and WP7. However, it is more than that. It also contains lots of very useful controls that can be used without the MVVM Framework. This article will explain the StackGrid which ships with Catel.

The screenshot below shows a very simple entry form. A Grid is normally used to create such an entry form.

However, the downside of the Grid is that it requires you to set the attached Grid.Row and Grid.Column properties. Most of the entry forms are very standard, and defining the attached properties is unnecessary (if it weren’t for the Grid to require it).

The StackGrid is here to save the day. The entry form above can be written using the code below:

<Controls:StackGrid>

    <!-- Row definitions -->

    <Controls:StackGrid.RowDefinitions>

        <RowDefinition Height="Auto" />

        <RowDefinition Height="Auto" />

        <RowDefinition Height="Auto" />

        <RowDefinition Height="Auto" MinHeight="15" />

        <RowDefinition Height="Auto" />

    </Controls:StackGrid.RowDefinitions>

     

    <!-- Column definitions -->

    <Controls:StackGrid.ColumnDefinitions>

        <ColumnDefinition Width="Auto" />

        <ColumnDefinition Width="*" MinWidth="300" />

    </Controls:StackGrid.ColumnDefinitions>

     

    <!-- First name, will be set to row 0, column 1 and 2 -->

    <Label Content="First name" />

    <TextBox Text="Geert" />

     

    <!-- Middle name, will be set to row 1, column 1 and 2 -->

    <Label Content="Middle name" />

    <TextBox Text="van" />

 

    <!-- Last name, will be set to row 2, column 1 and 2 -->

    <Label Content="Last name" />

    <TextBox Text="Horrik" />

 

    <!-- Empty row -->

    <Controls:EmptyRow />

     

    <!-- Wrappanel, will span 2 columns -->

    <WrapPanel Grid.ColumnSpan="2" Style="{StaticResource RightAlignedButtonsWrapPanelStyle}">

        <Button Content="OK" Style="{StaticResource RightAlignedFixedSizeButtonStyle}" />

        <Button Content="Cancel" Style="{StaticResource RightAlignedFixedSizeButtonStyle}" />

    </WrapPanel>

</Controls:StackGrid>

As you can see, with the StackGrid it is no longer required to use the Grid.Row and Grid.Column attached properties. The StackGrid uses the same technique as the Grid, so you can still define rows and columns. Then, it stacks all the controls from left to right, then top to bottom. A few advantages are:

Lesser code to write (time)
Lesser code to read (easier code reading)
Inserting a row is now very easy

In the example above, if you need to add a new item between the first and middle name, you would have to re-assign all row attached properties for all controls inside the grid after the inserted row. With the StackGrid, you only have to add a new row definition and insert the controls. It’s as easy as that!

The attached example application shows the code, and you can easily adjust it to see what happens.

stackgrid.zip (1.82 mb) [Downloads: 287]

e865676b-37cb-4f22-bdf8-0f5731f56fbc|0|.0

Tags: catel, control

C# | Silverlight | WPF

WPF ComboBoxEx

by Geert 22. October 2009 10:33

Some time ago, I needed a combobox in WPF to support an empty value (null), so the user was able to deselect or undo a selection. Unfortunately, this was not supported by the standard ComboBox class WPF offers.

Therefore, I decided to create my own combobox, with a “lot” of additional features that I think a combobox must support for a developer to be really useful. The attached ComboBoxEx class is the result, and it adds the following features to the standard ComboBox class:

Automatically select the value if only one item is available in the items source;
Support the MaxLength property when IsEditable property is enabled;
Keep selected value selected when updating the items source;
Disable the control when no items are in the items source;
Support an empty item, which can be null, but also a default value that can be specified.

A full demo application of all features is included in the package.