Simple WPF: WPF 自定义按钮外形

最新内容优先发布于个人博客:小虎技术分享站,随后逐步搬运到博客园。

WPF的按钮提供了Template模板,可以通过修改Template模板中的内容对按钮的样式进行自定义,完整代码Github自取。

使用Style定义扁平化的按钮样式

定义一个ButtonStyleDictonary.xaml资源字典文件,在Control Template中定义一个带Border的按钮,然后定义Trigger作为改变样式的触发器

xml 复制代码
<Style x:Key="FlatButtonStyle" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border x:Name="border" Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        SnapsToDevicePixels="True">
                    <TextBlock Text="{TemplateBinding Content}"
                                Foreground="{TemplateBinding Foreground}"
                                VerticalAlignment="Center" 
                                HorizontalAlignment="Center"/>
                </Border>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="border" Property="Background" Value="#2f96b4"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter TargetName="border" Property="Background" Value="red"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

WPF中使用ResourceDictonary 资源字典

引入在资源字典文件中定义公共的Template,然后在xaml窗口、自定义控件或者整个App当中调用

xml 复制代码
<Window.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="ButtonStyleDictonary.xaml"></ResourceDictionary>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Window.Resources>

然后就可以在窗体的xaml中应用刚才定义的属性了

xml 复制代码
<Button Style="{StaticResource FlatButtonStyle}" Width="64" Height="28">
     Hello
</Button>

使用Style和Polygon自定义Button的外形

xml 复制代码
<Style x:Key="ArrowButtonStyle" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Polygon x:Name="border" Fill="{TemplateBinding Background}"
                            Points="0,0 2,0 1,1" Stroke="Black" StrokeThickness="2"
                            SnapsToDevicePixels="True"
                            Stretch="Uniform"/>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="border" Property="Fill" Value="gray"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter TargetName="border" Property="Fill" Value="red"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

效果如下

参考资料

WPF自定义控件与样式-自定义按钮(Button)
如何:使用应用程序范围的资源字典

相关推荐
夏子曦4 小时前
C#内存管理深度解析:从栈堆原理到高性能编程实践
开发语言·c#
分布式存储与RustFS5 小时前
告别复杂配置:用Milvus、RustFS和Vibe Coding,60分钟DIY专属Chatbot
wpf·文件系统·milvus·对象存储·minio·rustfs·vibe
William_cl8 小时前
C# MVC网页调试的方法
开发语言·c#·mvc
小小的技术员9 小时前
C# 无实体生成JSON字符串
c#·json
L X..15 小时前
Unity反射调用 ReactiveProperty<T>(泛型类型)内部方法时崩溃
unity·c#·游戏引擎·.net
攻城狮CSU17 小时前
WPF 绑定机制实现原理
wpf
攻城狮CSU17 小时前
WPF 之数据绑定一(Data Binding)
wpf
缺点内向18 小时前
C# 中 Excel 工作表打印前页面边距的设置方法
c#·.net·excel
雪芽蓝域zzs1 天前
uniapp AES 加密解密
开发语言·uni-app·c#
wuty0071 天前
记录一下 WPF进程 SendMessage 发送窗口消息进行进程间通信,存在进程权限无法接受消息的问题
wpf·进程间通信·sendmessage·进程权限