WPF Controls: Form controls

This post covers some of the most common controls found in forms.

All controls where the user can input data have by default the binding set to two-way mode. It means bound data will be updated on the source if the user change values on the screen (given that the model implements INotifyPropertyChanged).

2015-36-11 01-36-31-906

Button

The Button control is a ContentControl which means you have to set the Content property of it in order to display some text.

<Button Content="Click me!" />

By being a ContentControl it also means that it can contain anything, not just text. This allows you to create, for example, a button with an image.

<Button Command="{Binding AddCommand}">
    <StackPanel>
        <Image Source="/Treant;component\Imgs\SmallAdd.png" />
        <Label Content="_Add" />
    </StackPanel>
</Button>

2015-06-11 01-06-41-636

A button has events that you can subscribe to, the most common one is the click event.

btnclick

And then you can generate a handler for it. However in MVVM you will want to bind button actions to an ICommand.

<Button Content="Click me"
        Command="{Binding ClickMeCommand}"
        CommandParameter=""
/>

See also RepeatButton and ToggleButton.

CheckBox

The CheckBox control allows you to check/uncheck and “half-check”. You can set IsThreeState to it and handle a third checkbox state (null value).

<CheckBox Content="CheckBox"
          IsThreeState="True"
          IsChecked="{Binding MyNullableBoolProperty}"
          />

ComboBox

The ComboBox control allows you to bind a list of objects that are going to be available to select. And by binding SelectedItem you can get the selected object on your model.

<ComboBox
    ItemsSource="{Binding MyObservableCollection}"
    SelectedItem="{Binding MySelectedItem}" />

Label

The Label control is a control that allows you to display some text. If the control gets disabled it will be grayed out (while a TextBlock will not).

The label control has a special feature that allows you to specify an access key:

<Label Content="La_bel" />

PasswordBox

The PasswordBox control allows you to mask the user input. It also stores the input into a SecureString object.

The password is not bindable. To be able to read the password the user entered you need a different approach. The easiest way is to send the password control as a parameter in a command, for example:

<PasswordBox x:Name="passwordBox"
             PasswordChar="×" />

<Button Content="Log in"
        Command="{Binding LoginCommand}"
        CommandParameter="{Binding ElementName=passwordBox}" />

And then on the button execute method cast the parameter to a PasswordBox and get the property Password from it.

RadioButton

The RadioButton control allows you to give some options but only one from the same GroupName will be selectable at a time.

<RadioButton Content="RB" GroupName="X"
             IsChecked="True"
             />
<RadioButton Content="RB2" GroupName="X" />
<RadioButton Content="RB3" GroupName="Y"
             IsChecked="True"
             />

TextBlock

The TextBlock control is a control that allows you to display some text. If the control gets disabled it will not be grayed out (while a Label will).

<TextBlock Text="TextBlock" />

TextBox

The TextBox control allows the user to input values.

<TextBox Text="{Binding Name}" />

To allow multiple lines you have to set AcceptsReturn to true.

Slider

The Slider control allows you to select a numeric value through a slider.

<Slider Minimum="0" Maximum="100"
    Value="{Binding MyDoubleSliderValue}" />
Advertisements

2 thoughts on “WPF Controls: Form controls

  1. Pingback: The MVVM pattern in WPF | Coding Wise

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s