XAML 资源和样式与图像处理

作者：王福驰
撰写时间：2019年 4月30日
开发工具与关键技术：XAML、WPF

XAML的高级用法主要有四种：
第一种资源和样式、第二种图像处理、第三种高级绘图、第四种动画
一、资源和样式
资源：目的为了实现对象的重复调用
有助于XAML代码重用，有助于应用维护的一致性
资源字典：注解，如下图

资源可以作为静态资源或动态资源加以引用
StaticResource – 静态资源
StaticResource仅仅会被应用一次,在第一次需要资源时加载。而且这种引用方式不支持向前加载，所有的资源定义必须在引用之前定义。StaticResource通常用在：
·设计的APP是将所有的资源放入Page或者App这个级别的Resource Dictionary中的，而且不需要在运行时重新计算—例如只保存一些松散文件，逻辑资源的声明等。
·不需要给DependencyObject或者Freezable的对象设置属性。
·Resource Dictionary将被编译进DLL.
·需要给很多的Dependency Property赋值。
将一个资源以Static Resource引用，需要用到Static Resource Markup Extension。 它在已经定义的资源中查询特定key的value为XAML的某个属性赋值。这个查询的行为与load-time查找类似，在当前Page的XAML中或者所有Application的Resources中查找，并在运生成运行时对象。

DynamicResource – 动态资源
与Static Resource不同的是，Dynamic Resource可以在程序运行时重新评估/计算资源来生成对应的对象/值，它支持向前引用，只要请求的key在整个应用程序内的任何Resources Dictionary定义过就可以被加载。如果有多个相同的key存在，则最后搜索到的资源为有效。

样式：分三种，
第一种属性样式、
第二种内联样式、
第三种引用样式
属性样式：直接通过UI元素的属性设置的样式，类似于在HTML中直接通过HTML元素属性设置的样式，

内联样式：通过在UI元素中嵌入Style节点来设置样式，实际上市设置元素的Style属性

引用样式：定义在资源字典中的样式
引用样式可分为：页面级样式和应用程序级样式
样式优先级，属性样式>>内联样式和引用样式（页面级>>应用程序级）
二、图像处理
创建图像：可以使用Image或者ImageBrush对象来创建一幅图像，
Image元素默认情况下会完整显示图片大小
图像简单处理：拉伸图像、剪切图像、使用图像输入文字
拉伸图像：通过设置Stretch属性实现图像的拉伸
Image元素的stretch属性值类型为枚举型
属性值分别为：
原始尺寸（None）
填充拉伸（Fill）
等比拉伸（Unifrom）
等比拉伸填充（UniformToFill）

剪切图像通过设置Clip属性剪切图像
XAML代码
<Imagex:Name=“image” Margin=“0,0,-0.4,0” Source="E:\图片\未知\20190430.jpg"Width=“444” Height=“300”>
<Image.Clip>
<RectangleGeometryRect=“100,100,500,500”/>
</Image.Clip>


使用图像输入文字ImageBrush元素实现使用图像输入文字
XAML代码

<Grid.RowDefinitions>
<RowDefinitionHeight=“131*”/>
<RowDefinitionHeight=“140*”/>
</Grid.RowDefinitions>
<TextBlock FontSize=“100” HorizontalAlignment=“Center"VerticalAlignment=“Center” FontWeight=“Bold"Background=”#000” Margin="1,2,263.6,1.4"FontStyle=“Italic” Width=“229”>地魔
<TextBlock.Foreground>
<ImageBrushImageSource=“E:\图片\喜洋洋\20190430556.jpg”/>
</TextBlock.Foreground>

<TextBlock Grid.Row=“0” FontSize=“100"FontWeight=“Bold” Background=”#000"Margin=“253,3,9.6,139.4” HorizontalAlignment="Center"VerticalAlignment=“Center” Grid.RowSpan="2"FontStyle=“Italic” Text="地魔"Width=“231”>
<TextBlock.Foreground>
<ImageBrushImageSource=“E:\图片\未知\20190430997.jpg”/>
</TextBlock.Foreground>

<TextBlock Grid.Row=“1” FontSize=“100"FontWeight=“Bold” Background=”#000"Margin=“0,0,-0.4,-0.6” Grid.RowSpan="2"HorizontalAlignment=“Center” VerticalAlignment="Center"Text="一切灾难者"FontStyle=“Italic”>
<TextBlock.Foreground>
<ImageBrushImageSource=“E:\图片\未知\2019430885.jpg”/>
</TextBlock.Foreground>