Button
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.- 1.
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 |
Pseudoclass | Description |
|---|---|
:pressed | Set when the button is depressed |
<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
<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
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>
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; }
<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
}
Last modified 10mo ago