WPF 中,Button 点击触发事件源码实例

首次发布:2025-12-14

在 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