WPF知识点全攻略12- 样式和资源

怼烎@ 2021-12-03 16:51 208阅读 0赞

**样式**

1、讲到样式，先来对比一下wpf 样式和网页css：

wpf代码：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

html css代码：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title></title> 
    <style>
    .button {
          
        background-color: #4CAF50;
        border: none;
        color: white;
        padding: 15px 32px;
        font-size: 16px;
        margin: 4px 2px;
    }
    </style>
    </head>
    <body>
    
    <h2>CSS 按钮</h2>
    
    <button>默认按钮</button>
        
    <button class="button">按钮</button>
    </body>
    </html>

查看一下效果：

![697655-20190716093448200-834784102.png][]                             ![697655-20190716093457177-1929148419.png][]

![697655-20190716093056106-2005139694.png][]

通过代码对比，可以看到WPF的Style和html的Style（CSS）相似度很高。

再来看一下:

都可以使用外联的方式加载样式，这样可以通过建立***资源字典 ***统一样式。xaml的style中还有更多方便的功能。比如BasedOn、Trigger等，而css也在吸收这些优点进行改进。

2、讲到样式，必须要提到Blend

以Button为例，查看样式模板副本：

![697655-20190716101719967-672278194.png][]

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

可以看到button基本样式结构，可以通过修改其中属性值，查看显示效果。通过改变ControlTemplate，可以定义更多样式（[自定义button][button]）。

Blend参考：[https://docs.microsoft.com/zh-cn/previous-versions/visualstudio/design-tools/expression-studio-3/cc294537(v=expression.30)][https_docs.microsoft.com_zh-cn_previous-versions_visualstudio_design-tools_expression-studio-3_cc294537_v_expression.30]

**资源**

通过样式，可以自由定义各种控件，随心所欲的修改想要的效果。但如每个控件都在使用的时候，定义Style，就会有很多冗余的代码。上面也提到，可以通过外联资源字典的方式，来统一管理样式。

看一下专业资源样式写法，[MaterialDesignInXamlToolkit/Themes][MaterialDesignInXamlToolkit_Themes]

使用资源字典，从几个方面定义：

1、主题、颜色（MaterialDesignTheme.Dark.xaml、MaterialDesignTheme.Light.xaml）

2、样式（MaterialDesignTheme.Shadows.xaml）

3、字体（MaterialDesignTheme.Font.xaml）

4、控件（MaterialDesignTheme.Button.xaml等）

5、自定义控件（MaterialDesignTheme.DialogHost.xaml、MaterialDesignTheme.Clock.xaml等）

6、统一调用（MaterialDesignTheme.Defaults.xaml）

通过附加属性配合资源字典，可以比较方便实现许多功能。写法参考（ShadowAssist.cs、ScrollViewerAssist.cs、ButtonProgressAssist.cs等）

**学习样式资源可以参考，简单漂亮的UI框架 [DMSKin][]**

转载于:https://www.cnblogs.com/kuangxiangnice/p/11192963.html

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211203/7842cd173b1a4ab39ca0daf73eecb0d5.png
[697655-20190716093448200-834784102.png]: https://img2018.cnblogs.com/blog/697655/201907/697655-20190716093448200-834784102.png
[697655-20190716093457177-1929148419.png]: /images/20211203/d171485d3e1d4e90a3a5aae3b3abaa80.png
[697655-20190716093056106-2005139694.png]: /images/20211203/18fe6317c27c47feb74f3775c1269859.png
[697655-20190716101719967-672278194.png]: /images/20211203/062bb560162749ce8a04509daab04002.png
[button]: https://www.cnblogs.com/kuangxiangnice/p/5821161.html
[https_docs.microsoft.com_zh-cn_previous-versions_visualstudio_design-tools_expression-studio-3_cc294537_v_expression.30]: https://docs.microsoft.com/zh-cn/previous-versions/visualstudio/design-tools/expression-studio-3/cc294537%28v=expression.30%29
[MaterialDesignInXamlToolkit_Themes]: https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/tree/master/MaterialDesignThemes.Wpf/Themes
[DMSKin]: https://github.com/944095635/DMSkin