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

按钮圆角

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

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

xmal 复制代码
<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中添加如下代码段用于调整背景色和前景色:

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中的代码实现如下:

c# 复制代码
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);
}

实现效果如下:

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

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

相关推荐
The Sheep 202310 分钟前
WPF自定义路由事件
大数据·hadoop·wpf
阳光雨滴17 分钟前
使用wpf用户控件编程落石效果动画
c++·wpf
wuty0071 小时前
WPF 调用 ChangeWindowMessageFilterEx 修改指定窗口 (UIPI) 消息筛选器的用户界面特权隔离
wpf·sendmessage·changewindowmessagefilterex·uip·消息筛选器的用户界面特权隔离·window message
攻城狮CSU7 小时前
WPF中核心接口 INotifyPropertyChanged
wpf
c#上位机7 小时前
wpf之Interaction.Triggers
c#·wpf
是木子啦11 小时前
wpf passwordbox控件 光标移到最后
c#·wpf
The Sheep 202311 小时前
wpf 命令理解
wpf
布伦鸽11 小时前
C# WPF DataGrid使用Observable<Observable<object>类型作为数据源
开发语言·c#·wpf
分布式存储与RustFS1 天前
告别复杂配置:用Milvus、RustFS和Vibe Coding,60分钟DIY专属Chatbot
wpf·文件系统·milvus·对象存储·minio·rustfs·vibe
攻城狮CSU1 天前
WPF 绑定机制实现原理
wpf