Input Controls

Input controls allow users to interact with your application by entering data, making selections, and triggering actions.

Button

A standard button control that responds to click events.

Properties

Content: The button’s content (can be text or any visual element)
Command: ICommand to execute when clicked
CommandParameter: Parameter to pass to the command
ClickMode: How button reacts to clicks - Release (default) or Press
IsDefault: Whether button is triggered by Enter key (bool)
IsCancel: Whether button is triggered by Escape key (bool)
HotKey: Keyboard shortcut (KeyGesture)
Flyout: Flyout menu to display when clicked

Events

Click: Raised when the button is clicked

Example

XAML
C#

<!-- Simple button -->
<Button Content="Click Me" Click="Button_Click" />

<!-- Button with command binding -->
<Button Content="Save" Command="{Binding SaveCommand}" />

<!-- Button with icon -->
<Button>
  <StackPanel Orientation="Horizontal" Spacing="8">
    <PathIcon Data="{StaticResource SaveIcon}" />
    <TextBlock Text="Save" />
  </StackPanel>
</Button>

<!-- Default button (triggered by Enter) -->
<Button Content="OK" IsDefault="True" />

<!-- Cancel button (triggered by Escape) -->
<Button Content="Cancel" IsCancel="True" />

<!-- Button with hotkey -->
<Button Content="Save" HotKey="Ctrl+S" />

// Create button programmatically
var button = new Button
{
    Content = "Click Me"
};
button.Click += (sender, e) =>
{
    // Handle click
    Debug.WriteLine("Button clicked!");
};

// Button with command
var saveButton = new Button
{
    Content = "Save",
    Command = viewModel.SaveCommand
};

// Button with hotkey
var button = new Button
{
    Content = "Save",
    HotKey = new KeyGesture(Key.S, KeyModifiers.Control)
};

Click Modes

The ClickMode property determines when the Click event is raised:

<!-- Click on pointer release (default) -->
<Button ClickMode="Release" Content="Release" />

<!-- Click on pointer press -->
<Button ClickMode="Press" Content="Press" />

TextBox

Represents a control for displaying or editing unformatted text.

Properties

Text: The text content (string)
PlaceholderText: Placeholder text when empty (string)
IsReadOnly: Whether text can be edited (bool)
AcceptsReturn: Allow multiline input (bool)
AcceptsTab: Allow tab character input (bool)
MaxLength: Maximum character count (int)
MaxLines/MinLines: Control height (int)
TextAlignment: Text alignment - Left, Center, Right
TextWrapping: Text wrapping mode - NoWrap, Wrap, WrapWithOverflow
PasswordChar: Character for masking passwords (char)
RevealPassword: Show/hide password (bool)
CaretIndex: Position of text cursor (int)
SelectionStart/SelectionEnd: Text selection range (int)
IsUndoEnabled: Enable undo/redo (bool, default: true)
UndoLimit: Maximum undo stack size (int)

Events

TextChanged: Raised after text changes
TextChanging: Raised when text starts to change
CopyingToClipboard/CuttingToClipboard/PastingFromClipboard: Clipboard events

Example

XAML
C#

<!-- Single-line text box -->
<TextBox Text="{Binding UserName}" PlaceholderText="Enter your name" />

<!-- Multiline text box -->
<TextBox 
  AcceptsReturn="True" 
  TextWrapping="Wrap" 
  Height="200"
  Text="{Binding Description}" />

<!-- Password box -->
<TextBox 
  PasswordChar="●" 
  PlaceholderText="Enter password"
  Text="{Binding Password}" />

<!-- Read-only text box -->
<TextBox IsReadOnly="True" Text="{Binding StatusMessage}" />

<!-- Text box with max length -->
<TextBox MaxLength="50" PlaceholderText="Max 50 characters" />

<!-- Text box with inner content -->
<TextBox PlaceholderText="Search">
  <TextBox.InnerLeftContent>
    <PathIcon Data="{StaticResource SearchIcon}" />
  </TextBox.InnerLeftContent>
</TextBox>

// Single-line text box
var textBox = new TextBox
{
    PlaceholderText = "Enter your name"
};
textBox.TextChanged += (sender, e) =>
{
    Debug.WriteLine($"Text: {textBox.Text}");
};

// Multiline text box
var multilineTextBox = new TextBox
{
    AcceptsReturn = true,
    TextWrapping = TextWrapping.Wrap,
    Height = 200
};

// Password box
var passwordBox = new TextBox
{
    PasswordChar = '●',
    PlaceholderText = "Enter password"
};

// Programmatic text manipulation
textBox.Text = "Hello World";
textBox.SelectAll();
textBox.Copy();
textBox.Paste();
textBox.Undo();
textBox.Redo();

Text Selection and Editing

// Select text
textBox.SelectAll();
textBox.SelectionStart = 0;
textBox.SelectionEnd = 5;

// Get selected text
string selected = textBox.SelectedText;

// Move caret
textBox.CaretIndex = 10;

// Clipboard operations
textBox.Cut();
textBox.Copy();
textBox.Paste();

// Undo/Redo
if (textBox.CanUndo)
    textBox.Undo();
    
if (textBox.CanRedo)
    textBox.Redo();

CheckBox

A check box control that can be checked, unchecked, or indeterminate.

Properties

IsChecked: Checked state - true, false, or null for indeterminate (bool?)
Content: Label content

Events

Checked: Raised when checked
Unchecked: Raised when unchecked
IsCheckedChanged: Raised when state changes

Example

XAML
C#

<!-- Simple checkbox -->
<CheckBox Content="Accept Terms" IsChecked="{Binding AcceptedTerms}" />

<!-- Three-state checkbox -->
<CheckBox Content="Select All" IsThreeState="True" IsChecked="{x:Null}" />

<!-- Checkbox with custom content -->
<CheckBox IsChecked="{Binding IsEnabled}">
  <StackPanel>
    <TextBlock Text="Enable Feature" FontWeight="Bold" />
    <TextBlock Text="This will enable the advanced feature" 
               FontSize="10" Foreground="Gray" />
  </StackPanel>
</CheckBox>

var checkBox = new CheckBox
{
    Content = "Accept Terms"
};

checkBox.IsCheckedChanged += (sender, e) =>
{
    bool? isChecked = checkBox.IsChecked;
    if (isChecked == true)
        Debug.WriteLine("Checked");
    else if (isChecked == false)
        Debug.WriteLine("Unchecked");
    else
        Debug.WriteLine("Indeterminate");
};

ComboBox

A drop-down list control.

Properties

Items: Collection of items
SelectedItem: Currently selected item
SelectedIndex: Index of selected item (int)
IsDropDownOpen: Whether dropdown is open (bool)
MaxDropDownHeight: Maximum height of dropdown (double, default: 200)
PlaceholderText: Text shown when no item is selected
IsEditable: Allow text input (bool)

Events

SelectionChanged: Raised when selection changes
DropDownOpened: Raised when dropdown opens
DropDownClosed: Raised when dropdown closes

Example

XAML
C#

<!-- Simple ComboBox -->
<ComboBox SelectedIndex="0">
  <ComboBoxItem Content="Option 1" />
  <ComboBoxItem Content="Option 2" />
  <ComboBoxItem Content="Option 3" />
</ComboBox>

<!-- Data-bound ComboBox -->
<ComboBox 
  ItemsSource="{Binding Countries}"
  SelectedItem="{Binding SelectedCountry}"
  PlaceholderText="Select a country" />

<!-- ComboBox with custom item template -->
<ComboBox ItemsSource="{Binding Users}">
  <ComboBox.ItemTemplate>
    <DataTemplate>
      <StackPanel Orientation="Horizontal" Spacing="10">
        <Image Source="{Binding Avatar}" Width="32" Height="32" />
        <TextBlock Text="{Binding Name}" VerticalAlignment="Center" />
      </StackPanel>
    </DataTemplate>
  </ComboBox.ItemTemplate>
</ComboBox>

<!-- Editable ComboBox -->
<ComboBox IsEditable="True" Text="{Binding SearchText}" />

// Simple ComboBox
var comboBox = new ComboBox();
comboBox.Items.Add("Option 1");
comboBox.Items.Add("Option 2");
comboBox.Items.Add("Option 3");
comboBox.SelectedIndex = 0;

// Data-bound ComboBox
var comboBox = new ComboBox
{
    [!ItemsControl.ItemsSourceProperty] = new Binding("Countries"),
    [!SelectingItemsControl.SelectedItemProperty] = new Binding("SelectedCountry")
};

comboBox.SelectionChanged += (sender, e) =>
{
    var selected = comboBox.SelectedItem;
    Debug.WriteLine($"Selected: {selected}");
};

RadioButton

Represents a button that can be selected but not cleared by clicking.

<StackPanel>
  <RadioButton Content="Option 1" GroupName="Options" IsChecked="True" />
  <RadioButton Content="Option 2" GroupName="Options" />
  <RadioButton Content="Option 3" GroupName="Options" />
</StackPanel>

Slider

A control that lets users select from a range of values.

<Slider 
  Minimum="0" 
  Maximum="100" 
  Value="{Binding Volume}"
  TickFrequency="10"
  IsSnapToTickEnabled="True" />

ToggleButton

A button that can be toggled between checked and unchecked states.

<ToggleButton Content="Toggle Me" IsChecked="{Binding IsActive}" />

Best Practices

Use appropriate input controls - Choose the right control for the data type
Provide clear labels - Use TextBlock or Label to describe input fields
Add validation - Validate input and show error messages
Use data binding - Bind controls to view models for MVVM pattern
Set placeholder text - Help users understand what to enter
Handle events appropriately - Use commands for MVVM, events for code-behind

Validation Example

<TextBox Text="{Binding Email}">
  <DataValidationErrors.Error>
    <Binding Path="Email">
      <Binding.ValidationRules>
        <validation:EmailValidationRule />
      </Binding.ValidationRules>
    </Binding>
  </DataValidationErrors.Error>
</TextBox>

Get Started

Core Concepts

Controls

Platform Support

Advanced Topics

Guides

Button

Properties

Events

Example

Click Modes

TextBox

Properties

Events

Example

Text Selection and Editing

CheckBox

Properties

Events

Example

ComboBox

Properties

Events

Example

RadioButton

Slider

ToggleButton

Best Practices

Validation Example

See Also

Build docs developers (and LLMs) love

Get Started

Core Concepts

Controls

Platform Support

Advanced Topics

Guides

​Button

​Properties

​Events

​Example

​Click Modes

​TextBox

​Properties

​Events

​Example

​Text Selection and Editing

​CheckBox

​Properties

​Events

​Example

​ComboBox

​Properties

​Events

​Example

​RadioButton

​Slider

​ToggleButton

​Best Practices

​Validation Example

​See Also

Build docs developers (and LLMs) love

Button

Properties

Events

Example

Click Modes

TextBox

Properties

Events

Example

Text Selection and Editing

CheckBox

Properties

Events

Example

ComboBox

Properties

Events

Example

RadioButton

Slider

ToggleButton

Best Practices

Validation Example

See Also