原文地址:http://www.cnblogs.com/DebugLZQ/p/3181040.html 原作者:DebugLZQ

UI的风格一致性是应用程序应当关注的重要特性。

1.Creating and using styles

用一个Demo,来总结Style。

MainWindow.xaml如下:

<Window x:Class="CreatingAndUsingStyle.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Styled Calculatot" Height="269" Width="180" ResizeMode="CanMinimize">
<Window.Resources>
<Style TargetType="Button" x:Key="numericStyle">
<Setter Property="FontSize" Value="20" />
<Setter Property="Margin" Value="4" />
<Setter Property="Padding" Value="6" />
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect Color="Blue"/>
</Setter.Value>
</Setter>
</Style> <Style TargetType="Button" x:Key="operatorStyle" BasedOn="{StaticResource numericStyle}">
<Setter Property="FontWeight" Value="ExtraBold" />
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect Color="Red" />
</Setter.Value>
</Setter>
</Style>
</Window.Resources> <Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBox Background="Cyan" IsReadOnly="True" Grid.ColumnSpan="4"/>
<Button Content="7" Grid.Row="1" Style="{StaticResource numericStyle}"/>
<Button Content="8" Grid.Row="1" Grid.Column="1" Style="{StaticResource numericStyle}"/>
<Button Content="9" Grid.Row="1" Grid.Column="2" Style="{StaticResource numericStyle}"/>
<Button Content="4" Grid.Row="2" Style="{StaticResource numericStyle}"/>
<Button Content="5" Grid.Row="2" Grid.Column="1" Style="{StaticResource numericStyle}"/>
<Button Content="6" Grid.Row="2" Grid.Column="2" Style="{StaticResource numericStyle}"/>
<Button Content="1" Grid.Row="3" Style="{StaticResource numericStyle}"/>
<Button Content="2" Grid.Row="3" Grid.Column="1" Style="{StaticResource numericStyle}"/>
<Button Content="3" Grid.Row="3" Grid.Column="2" Style="{StaticResource numericStyle}"/>
<Button Content="0" Grid.Row="4" Style="{StaticResource numericStyle}"/>
<Button Content="=" Grid.Row="4" Grid.Column="1" Grid.ColumnSpan="2" Style="{StaticResource operatorStyle}">
<Button.Effect>
<DropShadowEffect Color="Green" />
</Button.Effect>
</Button>
<Button Content="+" Grid.Row="4" Grid.Column="3" Style="{StaticResource operatorStyle}"/>
<Button Content="-" Grid.Row="3" Grid.Column="3" Style="{StaticResource operatorStyle}"/>
<Button Content="X" Grid.Row="2" Grid.Column="3" Style="{StaticResource operatorStyle}"/>
<Button Content="/" Grid.Row="1" Grid.Column="3" Style="{StaticResource operatorStyle}"/>
</Grid>
</Window>

效果如下:

Point of Interest


Setter的Property必须是依赖属性;

FrameworkStyle暴露了Style这个属性;

Style一般放在Resources中.


TargetType="Button" 指定Style应用的类型。

一般,我们使用Style的时候,我们都会设置这个(In practice ,TargetType is always specified.),想想为什么?


3. x:Key="numericStyle" 可以根据需要进行有或无。

a.当其有的时候,我们需要对需要 Style="{StaticResource numericStyle}" .

b.其不设置的时候,默认所有TargetType使用此Style。  见2.


4. BasedOn="{StaticResource numericStyle}"
这是Style的继承。

Style继承时,可以修改BaseOn Style的Setter。如operatorStyle的          部分所示。

Style继承很好用,但是要注意:基Style的修改会影响子style.


5.对于应用了Style的element,我们可以设置其属性值,且这个优先级更高(覆盖Style设置)。如"="Button的         部分所示。

2.Applying a style automatically

我们移除 x:Key="numericStyle"。让所有Button使用这个style.

1.不为Style指定x:key,这个Style将应用于所有的x:Tyle element;

没有指定x:key,不代表其没有key,其key由x:Tyle定义,就本例而言是{x:Type Button}},从Style继承中(xaml中绿色高亮代码),可见一斑。


2.如果,这样的Style被Set在Window的Resource,则影响这个Window上的所有x:Type类型的element;

如果被set在application's resources,则影响所有window。


3.如果,我们希望某个element不应用这个style,我们可以设置它的Style属性为其他style;

如果想让它保持默认的样子,我们可以设置其Style="{x:Null}",如Button
“0”。

3.动态更换Style

在Skin文件夹中添加两个Resource Dictionary,如下:

并设置其Property为:Content/Aways Copy.

“These settings prevent the default compilation to BAML and also provide the flexibility to
change the skins without recompilation. ”

请参考DebugLZQ前面的博文:WPF整理-二进制资源和内容

MainWindow.xaml,MainWindow.xaml.cs如下:

<Window x:Class="WPFStyleTriggerAndControlTemplate.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="303.719" Width="530.785">
<Grid Margin="0,0,2,0">
<TextBox HorizontalAlignment="Left" Height="23" Margin="10,35,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120"/>
<TextBox HorizontalAlignment="Left" Height="23" Margin="156,35,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120"/>
<TextBox HorizontalAlignment="Left" Height="23" Margin="293,35,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120" RenderTransformOrigin="1.577,0.303"/>
<Button Content="Button" HorizontalAlignment="Left" Margin="433,35,0,0" VerticalAlignment="Top" Width="75"/>
<GroupBox FontSize="28" Header="Select Skin" Margin="75,102,62,0" VerticalAlignment="Top" Height="158">
<StackPanel Orientation="Vertical" HorizontalAlignment="Center">
<RadioButton Content="Normal" Checked="AllRadioButtonChecked"/>
<RadioButton Content="Blue Skin" Checked="AllRadioButtonChecked"/>
<RadioButton Content="Red Skin" Checked="AllRadioButtonChecked"/>
</StackPanel>
</GroupBox>
</Grid>
</Window>
namespace WPFStyleTriggerAndControlTemplate
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
} private void AllRadioButtonChecked(object sender, RoutedEventArgs e)
{
switch (((RadioButton)sender).Content.ToString())
{
case "Blue Skin":
ChangeSkin("Skins/BlueSkin.xaml");
break;
case "Red Skin":
ChangeSkin("Skins/RedSkin.xaml");
break;
case "Normal":
Application.Current.Resources.MergedDictionaries.Clear();
break;
}
} void ChangeSkin(string skinRelativeUri)
{
var si = Application.GetContentStream(new Uri(skinRelativeUri, UriKind.Relative));
var rd = (ResourceDictionary)XamlReader.Load(si.Stream);
Application.Current.Resources.MergedDictionaries.Clear();
Application.Current.Resources.MergedDictionaries.Add(rd);
} }
}

运行效果如下:

WPF style 换肤的更多相关文章

  1. WPF之换肤

    WPF之换肤 设计原理 WPF换肤的设计原理,利用资源字典为每种皮肤资源添加不同的样式,在后台切换皮肤资源文件. 截图 上图中,第一张图采用规则样式,第二张图采用不规则样式,截图的时候略有瑕疵. 资源 ...

  2. WPF 实现换肤功能

    将所有控件的基本样式汇集到一个资源字典中,构成界面的基本样式文件,然后进行不同颜色皮肤的定制. 即在新的皮肤资源字典文件中引入基本样式文件,然后使用资源继承,并且只设置控件的颜色属性等,形成一个皮肤文 ...

  3. 有点激动,WPF换肤搞定了!

    一如既往没废话! wpf桌面应用开发都是window内引入很多个UserControl. 如果你有通过不同颜色来换肤的需求,那么下面我就将整个过程! 分2个步骤: 1.主窗体背景色替换: 2.同时界面 ...

  4. WPF中使用DynamicResource实现换肤

    这篇将介绍使用DynamicResource实现动态的界面切换功能.熟悉WPF的园友应该已经猜到了实现方式,简而言之就是动态替换DataTemplate,ControlTemplate,Style等等 ...

  5. WPF换肤之八:创建3D浏览效果

    原文:WPF换肤之八:创建3D浏览效果 上节中,我们展示了WPF中的异步以及界面线程交互的方式,使得应用程序的显示更加的流畅.这节我们主要讲解如何设计一个具有3D浏览效果的天气信息浏览器. 效果显示 ...

  6. WPF换肤之四:界面设计和代码设计分离

    原文:WPF换肤之四:界面设计和代码设计分离 说起WPF来,除了总所周知的图形处理核心的变化外,和Winform比起来,还有一个巨大的变革,那就是真正意义上做到了界面设计和代码设计的分离.这样可以让美 ...

  7. 在WPF中创建可换肤的用户界面

    原文:在WPF中创建可换肤的用户界面 在WPF中创建可换肤的用户界面.                                                                  ...

  8. 【WPF】实现动态切换语言(国际化)以及动态换肤功能

    前言:以下内容,手把手从搭建到最终实现,完成多语言切换以及换装功能. 本地系统环境:win 10 编译器环境:VS2022 社区版 .NET 环境: .NET 6 1.新建一个WPF项目 2.新建完毕 ...

  9. WPF换肤之六:酷炫的时区浏览小精灵

    原文:WPF换肤之六:酷炫的时区浏览小精灵 由于工作需要,经常要查看到不同地区的 当前时间,以前总是对照着时区表来进行加减运算,现在有了这个小工具以后,感觉省心了不少.下面是软件的截图: 效果图赏析 ...

随机推荐

  1. iTerm2配色和去掉profile提示框

    效果: 配色方案代码地址: https://github.com/mbadolato/iTerm2-Color-Schemes 点击最右边的绿色区域,再点击  “import”, 打开刚下载解压好的文 ...

  2. Python中的HTMLParser、cookielib抓取和解析网页、从HTML文档中提取链接、图像、文本、Cookies(二)

    对搜索引擎.文件索引.文档转换.数据检索.站点备份或迁移等应用程序来说,经常用到对网页(即HTML文件)的解析处理.事实上,通过 Python语言提供的各种模块,我们无需借助Web服务器或者Web浏览 ...

  3. [编织消息框架][netty源码分析]5 EventLoopGroup 实现类NioEventLoopGroup职责与实现

    分析NioEventLoopGroup最主有两个疑问 1.next work如何分配NioEventLoop 2.boss group 与child group 是如何协作运行的 从EventLoop ...

  4. 出现大量rcuob进程

    方法一: vim /etc/default/grub,在GRUB_CMDLINE_LINUX这一行末尾添加nr_cpus=2,然后执行命令grub2-mkconfig -o /boot/grub2/g ...

  5. java mat复制问题

    意外的发现 org.opencv.core.Mat projectionMat = mat ;//曲线救国,获取同样一个mat projectionMat.setTo());//然后再把颜色换成白色 ...

  6. GC Roots的几种对象

    在java语言里,可作为GC Roots的对象包括下面几种: >虚拟机栈(栈帧中的本地变量表)中的引用的对象: >方法区中类静态属性引用的对象: >方法区中常量引用的对象: > ...

  7. sqoop import 和export的问题

    sqoop import DB 2 hive(hdfs)是采用JDBC的过程,与传统hive区别在与多走了thrift server接口(稳定性待学习现在还比较模糊没做过大数据量测试),而export ...

  8. Redis学习01——介绍与搭建环境

    Redis学习01介绍与搭建环境一简介二yum配置已经配置了的可以跳过三安装gcc四安装redis1 上传Redis到linux中2 解压到usrlocal下3 编译redis4 安装redis5 拷 ...

  9. LINUX超级用户(权限)在系统管理中的作用

    1.对任何文件.目录或进程进行操作: 但值得注意的是这种操作是在系统最高许可范围内的操作:有些操作就是具有超级权限的root也无法完成: 比如/proc 目录,/proc 是用来反应系统运行的实时状态 ...

  10. Leetcode463.Island Perimeter岛屿的周长

    给定一个包含 0 和 1 的二维网格地图,其中 1 表示陆地 0 表示水域. 网格中的格子水平和垂直方向相连(对角线方向不相连).整个网格被水完全包围,但其中恰好有一个岛屿(或者说,一个或多个表示陆地 ...