WPF 按钮禁用状态样式自定义，你会吗

原创于 2025-02-19 08:54:55 发布 · 533 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#wpf #ui

👀WPF 按钮禁用状态样式自定义，你会吗？

在 WPF 开发里，为了提升用户体验和界面美观度，常常需要对控件在不同状态下的外观进行定制。今天就来和大家分享一下，如何在 WPF 中通过定义样式，让按钮在禁用状态下拥有独特的外观。

一、定义自定义样式

以下是完整示例代码，能让按钮在禁用状态时显示为灰色背景和灰色文字。

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <!-- 定义自定义按钮样式 -->
        <Style x:Key="CustomButtonStyle" TargetType="Button">
            <Setter Property="BorderBrush" Value="DarkBlue"/>
            <Setter Property="BorderThickness" Value="2"/>
            <Setter Property="FontSize" Value="16"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border CornerRadius="10" 
                                Background="{TemplateBinding Background}" 
                                BorderBrush="{TemplateBinding BorderBrush}" 
                                BorderThickness="{TemplateBinding BorderThickness}">
                            <ContentPresenter HorizontalAlignment="Center" 
                                              VerticalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <!-- 定义触发器 -->
            <Style.Triggers>
                <!-- 当按钮禁用时 -->
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="Background" Value="Gray"/>
                    <Setter Property="Foreground" Value="DarkGray"/>
                    <Setter Property="BorderBrush" Value="LightGray"/>
                </Trigger>
                  <Trigger Property="IsEnabled" Value="True">
                        <Setter Property="Background" Value="#3DCD58"/>
                        <Setter Property="Foreground" Value="#FFF"/>
                    </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <Button Content="点击我" 
                HorizontalAlignment="Center" 
                VerticalAlignment="Center" 
                Width="120" 
                Height="40"
                Style="{StaticResource CustomButtonStyle}"/>
        <Button Content="禁用按钮" 
                HorizontalAlignment="Center" 
                VerticalAlignment="Bottom" 
                Width="120" 
                Height="40"
                IsEnabled="False"
                Style="{StaticResource CustomButtonStyle}"/>
    </Grid>
</Window>