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

<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

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

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
}