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

news2024/11/13 8:42:26

在这里插入图片描述

按钮圆角

先从工具箱里拖进来一个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);
}

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

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