Skip to main content
Version: 0.10.x

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

PropertyDescription
ClickModeDescribes how the button should react to clicks
CommandA command to be invoked when the button is clicked
CommandParameterA parameter to be passed to Command
ContentThe content to display in the button
IsDefaultWhen set, pressing the enter key clicks the button even if not focused
IsPressedSet when the button is depressed

Pseudoclasses

PseudoclassDescription
:pressedSet when the button is depressed

API Reference

Button

Source code

Button.cs

Examples

Basic button

<Window xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="AvaloniaAppTemplate.MainWindow"
Title="AvaloniaAppTemplate">
<StackPanel>
<Button Width="160">My Button</Button>
</StackPanel>
</Window>

produces following output with Windows 10

Basic button

Colored button

<Window xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="AvaloniaAppTemplate.MainWindow"
Title="AvaloniaAppTemplate">
<StackPanel>
<Button Width="200" Foreground="White" Background="Red">White text, red background</Button>
</StackPanel>
</Window>

produces following output with Windows 10

Colored button

Play button

Toggles between a "Play" icon and a "Pause" icon on click.

<UserControl.Resources>
<Bitmap x:Key="Play">
<x:Arguments>
<x:String>/Assets/Player/Play.png</x:String>
</x:Arguments>
</Bitmap>
<Bitmap x:Key="Pause">
<x:Arguments>
<x:String>/Assets/Player/Pause.png</x:String>
</x:Arguments>
</Bitmap>
</UserControl.Resources>
<Button Name="PlayButton" HorizontalAlignment="Center" Width="36" Command="{Binding PlayCommand}">
<Panel>
<Image Source="{DynamicResource Play}" IsVisible="{Binding !IsPlaying}" Width="20"
Height="20" VerticalAlignment="Center" HorizontalAlignment="Center" />
<Image Source="{DynamicResource Pause}" IsVisible="{Binding IsPlaying}" Width="20"
Height="20" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Panel>
</Button>

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:

<Window xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="AvaloniaAppTemplate.MainWindow"
Title="AvaloniaAppTemplate">
<StackPanel>
<Button Width="160" Command="{Binding OnClickCommand}">My Button</Button>
</StackPanel>
</Window>

The Code in the bound View Model for the above will either look like:

public void OnClickCommand()
{
// do something
}

If using ReactiveCommands:

public MainWindowViewModel()
{
OnClickCommand = ReactiveCommand.Create(() => { /* do something */ });
}

public ReactiveCommand OnClickCommand { get; }

Binding to Events

<Window xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="AvaloniaAppTemplate.MainWindow"
Title="AvaloniaAppTemplate">
<StackPanel>
<Button Width="160"
Click="OnButtonClick"
PointerEnter="OnPointerEnter"
Content="My Button"/>
</StackPanel>
</Window>

The corresponding C# code in the View's cs file:

private void OnButtonClick(object sender, RoutedEventArgs e)
{
//do something on click
}

private void OnPointerEnter(object sender, PointerEventArgs e)
{
//do something when pointer enters
}