WPF 控件专题 Button样式模板

最新推荐文章于 2024-03-13 11:49:08 发布

^@^lemon tea^@^

最新推荐文章于 2024-03-13 11:49:08 发布

阅读量1.7k

点赞数

分类专栏： # WPF 控件专题文章标签： WPF Button样式模板 Button样式模板

本文链接：https://blog.csdn.net/BYH371256/article/details/125431102

版权

WPF 控件专题专栏收录该内容

53 篇文章 89 订阅

订阅专栏

简单圆角按钮样式一：主要采用Border控制圆角，样式中采用Tag来区分四个方向的圆角；

1、具体样式代码

<Window.Resources>
        <Style x:Key="SubmitBtnStyle" TargetType="{x:Type Button}">
            <Setter Property="Height" Value="39"/>
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="Foreground" Value="#009dda"/>
            <Setter Property="Background" Value="#FFF2F2F2"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border x:Name="bd" Background="{TemplateBinding Background}">
                            <TextBlock Text="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                   FontSize="{TemplateBinding FontSize}" Foreground="{TemplateBinding Foreground}"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="Tag" Value="LeftBottom">
                                <Setter Property="CornerRadius" Value="0,0,0,5" TargetName="bd"/>
                            </Trigger>
                            <Trigger Property="Tag" Value="LeftTop">
                                <Setter Property="CornerRadius" Value="5,0,0,5" TargetName="bd"/>
                            </Trigger>
                            <Trigger Property="Tag" Value="RightBottom">
                                <Setter Property="CornerRadius" Value="0,0,5,0" TargetName="bd"/>
                            </Trigger>
                            <Trigger Property="Tag" Value="RightTop">
                                <Setter Property="CornerRadius" Value="0,5,5,0" TargetName="bd"/>
                            </Trigger>

                            <Trigger Property="Tag" Value="All">
                                <Setter Property="CornerRadius" Value="5,5,5,5" TargetName="bd"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="#009dda"/>
                    <Setter Property="Foreground" Value="White"/>
                </Trigger>
                <Trigger Property="IsPressed" Value="True">
                    <Setter Property="Background" Value="#FFE16605"/>
                    <Setter Property="Foreground" Value="White"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>

**************************************************************************************************************

2、控件使用

    <StackPanel Orientation="Horizontal">
        <Button Margin="5" Style="{StaticResource SubmitBtnStyle}" Width="60" Height="40" Content="确定" Tag="LeftBottom"/>
        <Button Margin="5" Style="{StaticResource SubmitBtnStyle}" Width="60" Height="40" Content="确定" Tag=""/>
        <Button Margin="5" Style="{StaticResource SubmitBtnStyle}" Width="60" Height="40" Content="确定" Tag="RightBottom"/>
        <Button Margin="5" Style="{StaticResource SubmitBtnStyle}" Width="60" Height="40" Content="确定" Tag="All"/>
        <Button Margin="5" Style="{StaticResource SubmitBtnStyle}" Width="60" Height="40" Content="确定" Tag="LeftTop"/>
        <Button Margin="5" Style="{StaticResource SubmitBtnStyle}" Width="60" Height="40" Content="确定" Tag="RightTop"/>
    </StackPanel>

**************************************************************************************************************

3、效果图如下：