自学内容网 自学内容网

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

在这里插入图片描述

按钮圆角

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

实现效果如下:
在这里插入图片描述
在这里插入图片描述
这样操作的目的就是为了保证圆角效果的同时,在按钮状态变化的时候可以能完美切换。

好了,下一篇将讲述如何动态添加控件,一种比较复杂的添加效果。


原文地址:https://blog.csdn.net/kewaqi618/article/details/142352742

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!