【WPF】02 按钮控件圆角配置及状态切换

devtools/2024/11/14 13:01:13/

在这里插入图片描述

按钮圆角

先从工具箱里拖进来一个Button控件，然后对这个按钮进行美化。

首先在 xaml 里按钮控件部分添加如下代码：

<Button x:Name="btnLogin" Content="登录" HorizontalAlignment="Center" Margin="0,399,0,0" VerticalAlignment="Top" Background="#FF696565" Foreground="White" Width="200" Height="32" Grid.Column="1" Click="btnLogin_Click" FontSize="16"><Button.Resources><Style TargetType="{x:Type Border}"><Setter Property="CornerRadius" Value="4"/><Setter Property="BorderBrush" Value="#c1d0dc"/></Style></Button.Resources>
</Button>

这里引入了按钮的资源 Button.Resources，在这里设置按钮的类型及边框的颜色等，圆角的大小可以修改这里的值即可。
实现效果如下：

在这里插入图片描述

状态切换

在有圆角的情况下，再进行按钮的状态切换就比较麻烦了，WPF不想C# 的winform窗体控件那样，直接通过修改Enable属性即可，WPF中使用到的是IsEnable属性来控制，如果不在前面做好资源配置，这个属性控制将会出问题，切换效果无法实现。

IsEnabled属性

IsEnabled属性是一个布尔值（Boolean），它决定了按钮控件是否处于启用状态。当IsEnabled设置为true时，按钮是可交互的，用户可以点击它，并且如果按钮有与之关联的事件处理器（如点击事件），那么这些事件处理器将被触发。相反，当IsEnabled设置为false时，按钮将变得不可交互，用户无法点击它，并且与之关联的任何事件处理器都不会被触发。

本次要实现的切换是通过触发将此按钮底色变灰不可操作，再触发将其变蓝可以操作，同时将文本信息修改掉。

这里先要在xmal中添加如下代码段用于调整背景色和前景色：

<Window.Resources><Style x:Key="CustomButtonStyle" TargetType="Button"><Setter Property="Background" Value="LightBlue"/><!-- 默认背景色 --><Setter Property="Foreground" Value="Gray"/><!-- 默认前景色（文本颜色） --><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Border Background="{TemplateBinding Background}"  BorderBrush="Gray"  BorderThickness="1"  CornerRadius="3"><ContentPresenter HorizontalAlignment="Center"  VerticalAlignment="Center"/></Border><ControlTemplate.Triggers><Trigger Property="IsEnabled" Value="False"><Setter Property="Background" Value="Gray"/><!-- 禁用时的背景色 --><Setter Property="Foreground" Value="LightGray"/><!-- 禁用时的前景色（可选） --></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style>
</Window.Resources>

在CSharp中的代码实现如下：

private void btn1_Click(object sender, RoutedEventArgs e)
{this.btnSelect.Content = "变灰不可用";this.btnSelect.IsEnabled = false;this.btnSelect.Background = new SolidColorBrush(Colors.Gray);
}private void btn2_Click(object sender, RoutedEventArgs e)
{this.btnSelect.Content = "变蓝可用";this.btnSelect.IsEnabled = true;this.btnSelect.Background = new SolidColorBrush(Colors.Blue);
}

实现效果如下：
在这里插入图片描述

这样操作的目的就是为了保证圆角效果的同时，在按钮状态变化的时候可以能完美切换。