【细说windows8开发——UI篇】控件风格化--让你的控件更漂亮

本篇的的主要内容

****本篇的代码为添加的代码，不是完整的，直接在现成的文件中添加即可，均通过测试。

****欢迎问题反馈和交流  : [e-mail]

• 风格设置基础
• 显式或隐式来使用风格
• BasesOn的使用：我要用父亲的属性
• 使用控件模版：打造个性的控件
  

风格设置基础

通常我们为一个控件设置完属性后就可以通用到很多控件上去，比如我们现在就是为3个button改变 BorderBrush, BorderThickness和 Foreground属性，呈如下效果

我们可以在外部专门定义一个xaml文件，来描述控件的样式，外部的xaml文件可以被很多文件引用合并（被称为资源字典）有点类似于外部css文件，同样我们也可以把样式定义在文件内，这样只能在当前文件中使用。假如某个资源属性在app.xaml和当前文件中用同样的监制（key），那么在当前文件中的样式将会覆盖app.xaml中的。

在Style定义中，我们需要一个TargetType属性和一组Setter属性，TargetType属性是一个指定某种控件类型的字符串，控件只能继承自FrameworkElement类，每一个Setter属性都需要一个Property属性和一个Value属性，顾名思义哈，我就不多说了，下面举个例子大家看看就成

<Page.Resources>    <Style TargetType="Button">        <Setter Property="BorderThickness" Value="5" />        <Setter Property="Foreground" Value="Blue" />        <Setter Property="BorderBrush" >            <Setter.Value>                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">                    <GradientStop Color="Yellow" Offset="0.0" />                    <GradientStop Color="Red" Offset="0.25" />                    <GradientStop Color="Blue" Offset="0.75" />                    <GradientStop Color="LimeGreen" Offset="1.0" />                </LinearGradientBrush>            </Setter.Value>            </Setter>        </Style></Page.Resources>

我们注意在第三个Setter中，value并不是作为一个属性被赋值的，而是作为一个标签<Setter.Value>，这跟前两个其实是一个意思，只不过这个需要一点复杂的效果，所以才用这种方式。大家可以理解一下这个意思。

上述代码的效果如下:

显式或隐式来使用风格

1、对于隐式风格，只用TargetType来修饰Style

2、对于显式风格，我们还要加上x：Key属性来确切的定位，其实意思就是加了一个名字。

没有加key的控件讲应用到所有的TargetType中去，但是加key的就需要显示引用这个风格了，见下面这个例子。

<Page.Resources>    <Style x:Key="PurpleStyle" TargetType="Button">        <Setter Property="FontFamily" Value="Lucida Sans Unicode" />        <Setter Property="FontStyle" Value="Italic" />        <Setter Property="FontSize" Value="14" />        <Setter Property="Foreground" Value="MediumOrchid" />    </Style>    <Style TargetType="Button">        <Setter Property="FontFamily" Value="Lucida Sans Unicode" />        <Setter Property="FontStyle" Value="Italic" />        <Setter Property="FontSize" Value="14" />        <Setter Property="RenderTransform">            <Setter.Value>                <RotateTransform Angle="25" />            </Setter.Value>        </Setter>        <Setter Property="BorderBrush" Value="Orange" />        <Setter Property="BorderThickness" Value="2" />        <Setter Property="Foreground" Value="Orange" />    </Style></Page.Resources><Grid x:Name="LayoutRoot">    <Button Content="Button" Height="23" Width="75" Style="{StaticResource PurpleStyle}" />    <Button Content="Button" Height="23" Width="75" /></Grid>

效果如下：

看，第一个是紫色的，因为第一个button我们使用了

Style="{StaticResource PurpleStyle}"

明确的指出我们要用叫做  PurpleStyle这个属性，而第二个就是没妈的儿子一样，只要是Button的属性他就拿来用。

BasesOn的使用：我要用父亲的属性

看下面这个例子

<Page.Resources>    <Style x:Key="BasicStyle" TargetType="ContentControl">        <Setter Property="Width" Value="100" />        <Setter Property="Height" Value="30" />    </Style>    <Style x:Key="ButtonStyle" TargetType="Button" BasedOn="{StaticResource BasicStyle}">        <Setter Property="BorderBrush" Value="Orange" />        <Setter Property="BorderThickness" Value="2" />        <Setter Property="Foreground" Value="Orange" />    </Style>    <Style x:Key="CheckBoxStyle" TargetType="CheckBox" BasedOn="{StaticResource BasicStyle}">        <Setter Property="BorderBrush" Value="Green" />        <Setter Property="BorderThickness" Value="2" />        <Setter Property="Foreground" Value="Green" />    </Style></Page.Resources><Grid Background="White">    <Button Content="Button" Style="{StaticResource ButtonStyle}"/>    <CheckBox Content="CheckBox"  Style="{StaticResource CheckBoxStyle}"/></Grid>

效果如下：

很厉害吧，我们定义了一个ContentControl的一个风格，而Button和CheckBox是继承自这个控件的，所以可以利用BasedOn属性来把这个风格给拿过来，拿过来的同时再做修改，当然属性是覆盖父类风格的。

微软为我们提供了 StandardStyles.xaml 这样一个文件，在Common文件夹里边，我们可以引用它，关于它的使用我在后边会说。这里边定义了很多win8风格的控件属性，我们可以利用BasedOn属性来继承再做修改，效果很好的~！

使用控件模版：打造个性的控件

这部分大家可以参考MSDN上的一个教程，说的特别详细，我就不在这里赘述，当然效果也是非常好的，可以先运行下实例

运行此示例

教程：

http://msdn.microsoft.com/zh-cn/library/cc903963%28v=vs.95%29.aspx