UWP入门（四）--设置控件样式

原文:UWP入门（四）--设置控件样式

官方定义：可以使用 XAML 框架通过多种方式自定义应用的外观。 通过样式可以设置控件属性，并重复使用这些设置，以便保持多个控件具有一致的外观。

可分享至不同elements的资源中 创建可重用的style，并且这一资源可以分享至整单页面、多页面、整个 app，甚至不同的app?

how to keep up with style in different app (pre-build theme) 预建主题

2. 直接看简单的Demo

        <Page.Resources>
            <SolidColorBrush x:Key="MyBrush" Color="Brown"/>
        </Page.Resources>

        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <TextBlock Text="Hello World" Foreground="{StaticResource MyBrush}"/>
        </Grid>

这里将 Foreground 设置了 Binding 语句，可以看到{StaticResource MyBrush}，并且命名为MyBrush

当我们需要绑定一个 Resouce 的时候，需要做的表达式就是

{StaticResource resource名称}
//大括号意思是绑定，StaticResource 代表了我们需要绑定资源的名称
//上面代码的意思就是我们绑定了一个在 XAML 中定义的资源，并且这个资源只有在app最初的时候被计算
//Yes，还有其它类型，不用急着一次记完，以后还会说

<Page.Resources>中可以绑定多个资源，eg：

<TextBlock Text="Hello World" Foreground="{StaticResource MyBrush}"/>
<x:String x:Key="greeting">Hello World</x:String>

2. style 样式简介

不仅是简单的 resource，我们可以通过style来重复利用一个或多个特定设置，不管是单个页面还是整个App

当重复利用这个 style 时，你可以设定一个特定的 control style 特性，然后将它与已知的 style 相连接

<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>

<StackPanel Orientation="Horizontal">
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
</StackPanel>

注意名称，不要太在意细节，我讲重点：

在 Style 定义中，你需要一个 TargetType 属性和由一个或多个 Setter 元素组成的集合。 TargetType 属性是一个指定要应用样式的 FrameworkElement 类型的字符串（系统已经有的style）。 TargetType 值必须指定由 Windows 运行时定义的派生的 FrameworkElement 类型或引用的程序集中提供的自定义类型。 如果你试图将某个样式应用到某控件，而此控件的类型与你试图应用的样式的 TargetType 属性不匹配，则会发生异常。自定义名字的在后面

每个 Setter 元素都需要一个 Property 和一个 Value。 这些属性设置用于指示该设置将应用于哪个控件属性，以及为该属性设置的值。 你可以使用特性或属性元素语法设置 Setter.Value。 下面的 XAML 显示了应用于前面显示的按钮的样式。 在此 XAML 中，前两个 Setter 元素使用特性语法，但是最后一个 Setter（用于设置 BorderBrush 属性）使用属性元素语法。 该示例不使用 x:Key 特性这一特性，因此该样式已隐式应用到按钮。 隐式或显式应用样式之后讲

自定义名称只需要加一句：

 <Style TargetType="Button" x:Key="MyButtonStylr">

3. 应用隐式或显式样式

如果你将样式定义为资源，有两种方法可将其应用到控件：

• 隐式方法，通过仅指定 Style 的 TargetType。
• 显式方法，通过指定 Style 的 TargetType 和 x:Key 特性这一特性，然后通过使用显式键的 {StaticResource} 标记扩展引用设置目标控件的 Style 属性

如果样式包含 x:Key 特性，则只能通过将控件的 Style 属性设置为键控样式，从而将其应用到控件。 相反，没有 x:Key 特性的样式会自动应用到其目标类型的每个控件，这些控件没有显示样式设置。

下面两个按钮演示了隐式和显示样式

下面两个按钮演示了隐式和显示样式，在本示例中，第一个样式具有 x:Key 特性，其目标类型为 Button。 第一个按钮的 Style 属性设置为此关键字，所以显示应用该样式。 第二个样式会隐式应用到第二个按钮，因为该按钮的目标类型为 Button，并且该样式没有 x: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" Style="{StaticResource PurpleStyle}"/>
    <Button Content="Button" />
</Grid>

4. 关于样式书写位置

上面写的都是专属于 MainPage 的，如果想在 app 的所有页面中用呢？

将 PageResouce 这一部分删掉，然后将它们创建App.XML 中的 Applcation.Resource 元素上

 <Application.Resources>
        <SolidColorBrush x:Key="MyBrush" Color="Brown"/>
        <x:String x:Key="greeting">Hello World</x:String>
        <Style TargetType="Button" x:Key="MyButtonStylr">
            <Setter Property="Background" Value="Blue"/>
            <Setter Property="FontSize" Value="36"/>
        </Style>
        <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>
    </Application.Resources>

5. merg resource dictory 和自定义 resource dictory 文件

不光是在 page 和 application 中设定简单的 resource.dictory，我们还可以创建名为 merg resource dictory ,能让你在多个文档中找到 resource dictory ,然后将他们结合在一起，可以通过这个保持程序的复杂性，并且可以在不同的项目中重用这些 dictionary 文档

步骤：

右上角 Project 右键 –> Add new Item –> Resource Dictory

Dictionary1.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XAMLResources">
    <SolidColorBrush x:Key="brush" Color="Red"/>
</ResourceDictionary>

Dictionary2.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XAMLResources">
    <x:String x:Key="greeting">Hello world</x:String>
</ResourceDictionary>

MainPage.xaml

    <Page.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Dictionary1.xaml" />
                <ResourceDictionary Source="Dictionary2.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Page.Resources>
    <StackPanel>
        <TextBlock Text="{StaticResource greeting}"
             Foreground="{StaticResource brush}" />
        <Button Content="My Button Style Example"
                Height="100"
                Style="{StaticResource MyButtonStyle}" />
    </StackPanel>

6.基于样式使用

为了使样式便于维护以及优化样式的重复使用，你可以创建从其他样式继承的样式。 使用 BasedOn 属性可创建继承的样式。

从其他样式继承的样式必须应用到同一类型的控件，或者从基本样式的目标类型派生出来的控件。 例如，如果基本样式的目标类型为 ContentControl，则基于此样式的样式可应用到 ContentControl 或从 ContentControl 派生的类型（如 Button 和 ScrollViewer）。 如果基于样式(子类)的值没有设置，则从基本样式继承（父类）。 要从基本样式更改值，基于样式会覆盖该值。 下一个示例演示了具有从同一基本样式继承的样式的 Button 和 CheckBox

基本样式应用到 ContentControl，并设置 Height 和 Width 属性。 基于此样式的样式应用到 CheckBox 和 Button，这些类型从 ContentControl 派生而来。 基于样式为 BorderBrush 和 Foreground 属性设置不同的颜色。 （通常不在 CheckBox 的周围加边框。 我们在此处执行此操作，来显示样式的效果。）

<Page.Resources>
    <Style x:Key="BasicStyle" TargetType="ContentControl">
        <Setter Property="Width" Value="130" />
        <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="Red" />
    </Style>

    <Style x:Key="CheckBoxStyle" TargetType="CheckBox"
           BasedOn="{StaticResource BasicStyle}">
        <Setter Property="BorderBrush" Value="Blue" />
        <Setter Property="BorderThickness" Value="2" />
        <Setter Property="Foreground" Value="Green" />
    </Style>
</Page.Resources>

<StackPanel>
    <Button Content="Button" Style="{StaticResource ButtonStyle}" Margin="0,10"/>
    <CheckBox Content="CheckBox" Style="{StaticResource CheckBoxStyle}"/>
</StackPanel>