在 WPF 中,Button 点击触发事件有两种主流实现方式:一是传统的代码后置事件处理(适合简单场景),二是MVVM 模式的命令绑定(推荐,符合 WPF 设计原则,解耦 UI 与业务逻辑)。下面分别给出完整示例:
方式一:传统代码后置事件处理(Click 事件)
这种方式直接在 XAML 中绑定Click事件,在代码后置(.xaml.cs)中编写处理逻辑,适合简单的 UI 交互场景。
1. XAML 代码(MainWindow.xaml)
<Window x:Class="WpfButtonClickDemo.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Button点击事件示例" Height="300" Width="400"> <Grid> <!-- Button控件,绑定Click事件到Button_Click方法 --> <Button Content="点击我(传统方式)" Width="180" Height="40" Click="Button_Click" /> </Grid> </Window>
2. 代码后置(MainWindow.xaml.cs)
using System.Windows;
namespace WpfButtonClickDemo
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent(); // 初始化XAML控件
}
// Button的Click事件处理方法(必须是void返回值,参数为object和RoutedEventArgs)
private void Button_Click(object sender, RoutedEventArgs e)
{
// 这里编写点击后的逻辑,示例:弹出提示框
MessageBox.Show("你点击了传统方式的Button!", "提示");
// 也可以获取当前Button对象(sender是触发事件的控件)
if (sender is Button btn)
{
btn.Content = "已点击"; // 修改Button的显示文本
}
}
}
}方式二:MVVM 模式的命令绑定
本方案采用CommunityToolkit.Mvvm实现命令绑定,该库的官方版本建议为:优先使用 **.NET 6 及以上的 LTS(长期支持)版本 **(可同时获得基础功能与源生成器特性的最佳兼容性);若需基于.NET Framework 开发,最低需使用4.8 版本。
安装 NuGet 包:右键项目 → 「管理 NuGet 程序包」→ 搜索CommunityToolkit.Mvvm → 安装(推荐最新稳定版)。
1. XAML 代码(MainWindow.xaml)
<Window x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
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"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<!-- 设置窗口的DataContext为ViewModel(绑定的数据源) -->
<Window.DataContext>
<local:MainViewModel/>
</Window.DataContext>
<Grid>
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
<!-- 绑定ViewModel的TipText属性(显示文本) -->
<TextBlock Text="{Binding TipText}" FontSize="16" Margin="0,10"/>
<!-- 绑定无参命令:ClickMeCommand(对应ViewModel的ClickMe方法) -->
<Button Content="点击我(无参)" Width="180" Height="40" Margin="0,10"
Command="{Binding ClickMeCommand}" />
<!-- 绑定带参数命令:ClickWithParamCommand,传递参数"Hello Mvvm" -->
<Button Content="点击我(带参数)" Width="180" Height="40"
Command="{Binding ClickWithParamCommand}"
CommandParameter="Hello Mvvm" />
</StackPanel>
</Grid>
</Window>2. 代码后置(MainWindow.xaml.cs,仅保留初始化)
using System.Windows;
namespace WpfApp1
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
}
}3. 创建 ViewModel (MainWindow.cs)
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using System.Windows;
namespace WpfApp1
{
public partial class MainViewModel : ObservableObject
{
// 1. 可观察属性:自动生成public string TipText属性 + 属性变更通知
// 私有字段命名规范:_小写开头,属性名自动转为首字母大写(_tipText → TipText)
[ObservableProperty]
private string _tipText = "点击下方按钮触发事件";
// 自动生成的公共属性
// 2. 点击命令:自动生成public ICommand ClickMeCommand属性
// 方法名是ClickMe,生成的命令属性名是ClickMeCommand(方法名+Command)
[RelayCommand]
private void ClickMe()
{
// 按钮点击后执行的逻辑:修改文本 + 弹出提示
TipText = "按钮已点击!";
MessageBox.Show("你触发了CommunityToolkit.Mvvm的命令点击事件!", "提示");
}
// 可选:带参数的点击命令(示例)
[RelayCommand]
private void ClickWithParam(string message)
{
TipText = $"收到参数:{message}";
MessageBox.Show($"参数:{message}", "带参数的命令");
}
}
}注意:若出现报错,清理项目缓存并重新生成解决方案。
本文来自 www.luofenming.com