Button

The Button control is a ContentControl which reacts to pointer presses.
A button notifies clicks by raising the Click event. A click is distinct from a PointerDown event in that it is raised by default when the button is pressed and then released (although this behavior can be changed by setting the ClickMode property).
Alternatively an instance of ICommand can be assigned or bound to the button's Command property. This command will be executed when the button is clicked. For more information see binding to commands.
​Click is just one of several events that Buttons have. Another example is PointerEnter or PointerLeave. You can get the full list of Button Events here.
The Button control's full documentation can be found here​
Subclasses
1.
​ToggleButton - Toggles between checked and unchecked on click.
Common Properties
Property
Description
ClickMode
Describes how the button should react to clicks
Command
A command to be invoked when the button is clicked
CommandParameter
A parameter to be passed to Command
Content
The content to display in the button
IsDefault
When set, pressing the enter key clicks the button even if not focused
IsPressed
Set when the button is depressed
Pseudoclasses
Pseudoclass
Description
:pressed
Set when the button is depressed
API Reference
​Button​
Source code
​Button.cs​
Examples
Basic button
1
<Window xmlns="https://github.com/avaloniaui"
2
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
3
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
4
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
5
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
6
        x:Class="AvaloniaAppTemplate.MainWindow"
7
        Title="AvaloniaAppTemplate">
8
	<StackPanel>
9
		<Button Width="160" >My Button</Button>
10
	</StackPanel>
11
</Window>
Copied!
produces following output with Windows 10

Basic button
Colored button
1
<Window xmlns="https://github.com/avaloniaui"
2
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
3
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
4
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
5
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
6
        x:Class="AvaloniaAppTemplate.MainWindow"
7
        Title="AvaloniaAppTemplate">
8
	<StackPanel>
9
		<Button Width="160" Foreground="White" Background="Red">White text, red background</Button>
10
	</StackPanel>
11
</Window>
Copied!
produces following output with Windows 10

Basic button
Play button
Toggles between a "Play" icon and a "Pause" icon on click.
1
<UserControl.Resources>
2
    <Bitmap x:key="Play">/Assets/Player/Play.png</Bitmap>
3
    <Bitmap x:key="Pause">/Assets/Player/Pause.png</Bitmap>
4
</UserControl.Resources>
Copied!
1
<Button Name="PlayButton" HorizontalAlignment="Center" Width="36" Command="{Binding PlayCommand}">
2
    <Panel>
3
        <Image Source="{DynamicResource Play}" IsVisible="{Binding !IsPlaying}" Width="20"
4
                          Height="20" VerticalAlignment="Center" HorizontalAlignment="Center" />
5
        <Image Source="{DynamicResource Pause}" IsVisible="{Binding IsPlaying}" Width="20"
6
                          Height="20" VerticalAlignment="Center" HorizontalAlignment="Center" />
7
    </Panel>
8
</Button>
Copied!
Binding to a View Model Command
It is possible to bind a view model command to a simple method or with a ReactiveCommand. There are lots of advantages to the ReactiveCommand binding for all but the simplest user interfaces such as being able to pass an IObservable<bool> object in to have it dynamically calculate state. Both methods are displayed below. First the "simple" method binding:
1
<Window xmlns="https://github.com/avaloniaui"
2
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
3
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
4
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
5
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
6
        x:Class="AvaloniaAppTemplate.MainWindow"
7
        Title="AvaloniaAppTemplate">
8
    <StackPanel>
9
        <Button Width="160" Command="{Binding OnClickCommand}">My Button</Button>
10
    </StackPanel>
11
</Window>
Copied!
The Code in the bound View Model for the above will either look like:
1
public void OnClickCommand()
2
{
3
	// do something
4
}
Copied!
If using ReactiveCommands:
1
public MainWindowViewModel()
2
{
3
	OnClickCommand = ReactiveCommand.Create(() => { /* do something */ });
4
}
5
​
6
public ReactiveCommand OnClickCommand { get; }
Copied!
Binding to Events
1
<Window xmlns="https://github.com/avaloniaui"
2
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
3
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
4
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
5
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
6
        x:Class="AvaloniaAppTemplate.MainWindow"
7
        Title="AvaloniaAppTemplate">
8
    <StackPanel>
9
        <Button Width="160" 
10
                Click="OnButtonClick"
11
                PointerEnter="OnPointerEnter"
12
                Content="My Button"/>
13
    </StackPanel>
14
</Window>
Copied!
The corresponding C# code in the View's cs file:
1
private void OnButtonClick(object sender, RoutedEventArgs e)
2
{
3
	//do something on click
4
}
5
​
6
private void OnPointerEnter(object sender, PointerEventArgs e)
7
{
8
	//do something when pointer enters
9
}
Copied!
Border
ButtonSpinner
Last modified 2mo ago
Export as PDF
Copy link
Contents
Binding to a View Model Command
Binding to Events