Avalonia UI
首页支持GitHub 仓库English Doc
  • 👋欢迎
  • 文档
    • ⚡快速开始
      • IDE 支持
        • JetBrains Rider 设置
      • 使用 Avalonia 开发
        • Model-View-ViewModel 模式(MVVM)
        • 控件和布局
        • 数据绑定
        • 图像和动画
      • Windows
      • UserControls
      • 资产
      • 开发者工具
      • 错误和警告日志
      • 未处理的异常
      • 应用生命周期
    • 🔁数据绑定
      • 数据上下文
      • 变化通知
      • 绑定
      • 编译绑定
      • 与控件绑定
      • 转换绑定值
      • 绑定到命令
      • 绑定到任务和可观察对象
      • 使用代码进行绑定
      • 在控件模板中实现绑定
      • 绑定Classes
      • 创建和绑定到附加属性
      • Data Validation
    • 🎨样式
      • 样式
      • 选择器
      • 资源
      • 疑难解答
    • 🧰控件
      • AutoCompleteBox
      • Border
      • Buttons
        • Button
        • RepeatButton
        • RadioButton
        • ToggleButton
        • ButtonSpinner
        • SplitButton
        • ToggleSplitButton
      • Calendar
      • Canvas
      • Carousel
      • CheckBox
      • ComboBox
      • ContentControl
      • ContextMenu
      • Decorator
      • DataGrid
        • DataGridColumns
      • DatePicker
      • DockPanel
      • Expander
      • Flyouts
      • Grid
      • GridSplitter
      • Image
      • ItemsControl
      • ItemsRepeater
      • LayoutTransformControl
      • ListBox
      • MaskedTextBox
      • Menu
      • NativeMenu
      • NumericUpDown
      • Panel
      • ProgressBar
      • RelativePanel
      • ScrollBar
      • ScrollViewer
      • Separator
      • Slider
      • SplitView
      • StackPanel
      • TabControl
      • TabStrip
      • TextBlock
      • TrayIcon
      • TreeDataGrid
        • Creating a Hierarchical TreeDataGrid
        • Creating a Flat TreeDataGrid
        • TreeDataGrid column types
      • TimePicker
      • TextBox
      • ToolTip
      • TreeView
      • TransitioningContentControl
      • UserControl
      • Viewbox
      • Window
      • WrapPanel
    • 📚模板
      • 数据模板
      • 在代码中创建数据模板
      • 实现 IDataTemplate 接口
    • ✏️自定义控件
      • 控件类别
      • 定义属性
    • 🖱️输入
      • 路由事件
      • 剪贴板
      • 鼠标与触控设备
      • 快捷键
    • 🔑动画
      • 关键帧动画
      • 过渡
      • 页面过渡
    • 📐布局
      • 面板概述
      • Alignment、Margin 和 Padding
      • 创建自定义面板
    • 📦发布/分发
      • macOS
  • API 参考
    • 🗒️命名空间
      • Avalonia
      • Avalonia.Animation
        • Avalonia.Animation.Easings
        • Avalonia.Animation.Animators
      • Avalonia.Collections
      • Avalonia.Controls
      • Avalonia.Data
        • Avalonia.Data.Core.Plugins
        • Avalonia.Data.Core
        • Avalonia.Data.Converters
      • Avalonia.Diagnostics
      • Avalonia.Dialogs
  • 指南
    • 🐣基础
      • XAML 介绍
      • Code-behind
      • MVVM 架构
      • 在UI线程上操作
    • 🤿深入
      • 在树莓派上运行你的应用
      • 在树莓派上运行你的应用(使用Raspbian Lite)
      • ReactiveUI
        • 视图激活机制
        • 路由
        • 数据持久化
        • 绑定到 Sorted/Filtered 数据
    • 👩‍💻👩💻 开发人员指南
      • 🏭从源代码中构建 Avalonia
      • Avalonia 与 WPF 和 UWP 之间的比较
      • Debugging Previewer
      • Debugging the XAML compiler
      • macOS 开发
      • Release Process
      • 维护稳定的分支
  • 教程
    • 📋待办事项应用
    • 📻音乐商店应用
    • 🕸️在浏览器中运行
    • 📱为移动设备开发
  • 杂项
    • 👪社区
    • 🖥️WPF 开发者建议
    • 📋正在使用 Avalonia 的项目
    • ❔常见问题
由 GitBook 提供支持
在本页
  • Subclasses
  • Common Properties
  • Pseudoclasses
  • API Reference
  • Source code
  • Examples
  • Basic button
  • Colored button
  • Play button
  • Binding to a View Model Command
  • Binding to Events

这有帮助吗?

在GitHub上编辑
  1. 文档
  2. 控件
  3. Buttons

Button

上一页Buttons下一页RepeatButton

最后更新于2年前

这有帮助吗?

The Button control is a which reacts to pointer presses.

A button notifies clicks by raising the 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 property).

Alternatively an instance of can be assigned or bound to the button's property. This command will be executed when the button is clicked. For more information see .

is just one of several events that Buttons have. Another example is or . You can get the full list of Button Events .

The Button control's full documentation can be found

Subclasses

  1. - 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

Source code

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
}

Basic button
Colored button
🧰
ContentControl
Click
ClickMode
ICommand
Command
binding to commands
Click
PointerEnter
PointerLeave
here
here
ToggleButton
Button
Button.cs