WPF 自定义键盘焦点样式(FocusVisualStyle)

WPF 自定义键盘焦点样式(FocusVisualStyle)

2017-12-17 07:34

WPF 自带的键盘焦点样式是与传统控件样式搭配的,但 WPF 凭着其强大的自定义样式的能力,做出与传统控件样式完全不同风格的 UI 简直易如反掌。这时,其自带的键盘焦点样式(FocusVisualStyle)就非常不搭了,改改会舒服得多。比如,改成 UWP 的样式。

本文将展示 WPF 自定义键盘焦点样式自定义的


▲ WPF 自带的键盘焦点样式

▲ UWP 暗主题键盘焦点样式

其实微软官方文档 Styling for Focus in Controls, and FocusVisualStyle - Microsoft Docs 有说明 FocusVisualStyle,但是——完全没有讲自定义好吗!

所以,我试着写一个样式以覆盖默认的样式:

<Style x:Key="{x:Static SystemParameters.FocusVisualStyleKey}">
    <Setter Property="Control.Template">
        <Setter.Value>
            <ControlTemplate>
                <Rectangle Margin="-3" StrokeThickness="3" Stroke="Gray" SnapsToDevicePixels="true"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

运行一看,结果完全没有效果……

StackOverflow 上也有人说了这件事:xaml - How to redefine FocusVisualStyle for a WPF user control - Stack OverflowRohit Vats 说需要通过单独为 Button 设置才能生效并在回答中贴出了代码。

然而同样的代码应用到项目中,我们会发现,我们此前定义的无 Key 样式也失效了:

我的代码是这样的,试图用上此前定义的无 Key 样式,只是无效。

<Style x:Key="{x:Static SystemParameters.FocusVisualStyleKey}">
    <Setter Property="Control.Template">
        <Setter.Value>
            <ControlTemplate>
                <Rectangle Margin="-3" StrokeThickness="3" Stroke="Gray" SnapsToDevicePixels="true"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<Style TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
    <Setter Property="FocusVisualStyle" Value="{StaticResource {x:Static SystemParameters.FocusVisualStyleKey}}"/>
</Style>

那么,有没有办法能够一次定义整个应用程序生效呢?

答案是——

wpf - Change the FocusVisualStyle in the entire application - Stack Overflow 也承认了这一点。


所以,当希望为 WPF 程序自定义 FocusVisualStyle 样式的话,建议从零开始,定义每一个最底层样式的时候设置好 FocusVisualStyle,其他样式定义的时候继承自最底层样式。


参考资料

本文会经常更新,请阅读原文: https://walterlv.com/post/customize-focus-visual-style.html ,以避免陈旧错误知识的误导,同时有更好的阅读体验。

本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、重新发布,但务必保留文章署名 吕毅 (包含链接: https://walterlv.com ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请 与我联系 (walter.lv@qq.com)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java帮帮-微信公众号-技术文章全总结

Web-第五天 BootStrap学习

将使用Bootstrap重写首页,整个案例中将使用到Bootstrap各种模块,为了方便编程,将采用拆分的原则,各个模块单独编写,最后组合。

16350
来自专栏申龙斌的程序人生

群分享:Markdown + CSS 实现微信公众号排版

本文版权归作者所有,转载请注明作者和出处。 未经作者许可,请勿将本文用作商业用途。 封面来源:见图片水印 Markdown 是一种轻量级的标记语言,它的文本可以...

1.2K60
来自专栏企鹅号快讯

图片转文字居然这么简单,多亏了这几个神器!

我们经常会用手机拍摄、截屏了一大堆图片,领导的PPT、客户的名片、各种文案海报等等…… 想着有空后把资料整理成文字稿,但是一想到要在电脑上把文字打出来,巨大的工...

6.7K100
来自专栏Coco的专栏

BAT及各大互联网公司2014前端笔试面试题--Html,Css篇

30750
来自专栏Coding01

初次使用markdown自定义排版文章

万事开篇难,昨晚火急火燎的上了一篇【重新出发】后发现,很多排版的问题有待提高。写一篇文章,内容固然重要,但有个能让别人读起来舒服的排版也很重要。

19950
来自专栏程序员的知识天地

2018前端工程师成长路线图

成为前端工程师,第一步应该是学习HTML/CSS/JavaScript,这是基础。

40020
来自专栏IMWeb前端团队

跨平台开源项目Ngui【基准性能测试报告】

Ngui简介 这是一个GUI的排版显示引擎和跨平台的GUI应用程序开发框架,基于NodeJS/OpenGL,这也是第一个在移动端Android/iOS融合Nod...

223100
来自专栏Zchannel

Yu Writer:macos系统不可多得的Markdown写作工具

14220
来自专栏程序员叨叨叨

【4】写博客神器——Markdown(附工具推荐)

注意:这里的!、[、]、(、)均为英文输入法,且简书平台Markdown编辑器只要将图片文件拖入输入区域,即可生成Markdown文本,读者们只要修改描述图片的...

26720
来自专栏我和未来有约会

Silverlight SEO优化

Silverlight SEO优化 SEO优化 2008年10月份,微软发布了针对Silverlight应用程序进行搜索引擎优化的指导文档,该文档描述了对Si...

20150

扫码关注云+社区

领取腾讯云代金券