Getting Started

In this sample we use some of the WPF Elements controls to build a form for editing sample personal details. Refer to the QuickStart sample in the Samples solution for more detail.

Sample Data Model

Our sample data object will be a Person. This class implements the usual INotifyPropertyChanged interface, and has three properties that we will consider:

For the rest of this topic, we assume that a Person object has been created, and that the window’s DataContext is set to this Person object.

MaskedTextBox – Editing the CustomerID

For the customer ID, we want users to be able to enter values of the form AA/123-12345/AAA, where the first two characters must be letters but the last three may be letters or numbers.

We can express this as the mask “LL/000-00000/&&&” (see Mask Syntax). Note that XAML requires us to encode ampersand characters so our control will actually look like this:

CopyMasked text box declaration
<ms:MaskedTextBox Grid.Row='2' Mask='LL/000-0000/&amp;&amp;&amp;' Text='{Binding CustomerId}' Grid.Column='2'/>

If we want to give users a visual hint as to which characters are fixed and which they need to enter, we can do so using styles:

CopyMasked text box with styling
<ms:MaskedTextBox Grid.Row='2' Mask='LL/000-0000/&amp;&amp;&amp;' Text='{Binding CustomerId}' LiteralStyle='{StaticResource MaskLiterals}' PromptStyle='{StaticResource MaskPrompts}' Grid.Column='2'/>

CurrencyTextBox – Editing the BankBalance

For the bank balance, we want users to be able to enter numeric values in currency format. This is automatically handled by the CurrencyTextBox:

CopyCurrency text box declaration
<ms:CurrencyTextBox Grid.Row='4' Grid.Column='2' Value='{Binding BankBalance}'/>

Sometimes, it’s useful for users to be able to quickly adjust values using up-down (spin) buttons or the cursor keys. We can provide this functionality using the SpinDecorator control. We can also highlight bank balances that have gone into the red:

CopyCurrency text box with spinning and styling
<ms:SpinDecorator Grid.Row='4' Change='10' Grid.Column='2'>
        <ms:CurrencyTextBox BorderThickness='0' NegativeStyle='{StaticResource NegativeCurrency}' Value='{Binding BankBalance}'/>
      </ms:SpinDecorator>

DateTimePicker – Editing the DateOfBirth

For the date of birth, we want users to be able to enter the date in their familiar date format. This is automatically handled by the DateTimePicker:

CopyDate-time picker declaration
<ms:DateTimePicker Grid.Row='6' Format='LongDate' Grid.Column='2' Value='{Binding DateOfBirth}'/>

The date-time picker automatically supports increasing and decreasing values using the cursor keys, saving users the need to type values. In addition, the date-time picker can be composed with a MonthCalendar control to allow selecting dates with the mouse. The DropDownDatePicker encapsulates this behaviour:

CopyDate-time picker declaration
<ms:DropDownDatePicker Grid.Row='6' Format='LongDate' Grid.Column='2' Value='{Binding DateOfBirth}'/>

MulticolumnTreeView – Viewing Hierarchical Data

The QuickStart sample also demonstrates the MulticolumnTreeView control. This allows us to display a tree of data—in this case the person’s children and grandchildren—in the same way as a TreeView, but with additional columns like a ListView:

CopyMulticolumnTreeView declaration
<ms:MulticolumnTreeView Name='treeView' Grid.Row='8' ItemTemplate='{ms:ChildPath Children}' Grid.Column='2'>
        <ms:MulticolumnTreeView.Columns>
          <GridViewColumn Header='Name' DisplayMemberBinding='{Binding Name}'/>
          <GridViewColumn Header='Date of Birth' DisplayMemberBinding='{Binding DateOfBirth}'/>
        </ms:MulticolumnTreeView.Columns>
      </ms:MulticolumnTreeView>