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 的周围加边框。我们在此处执行此操作，来显示样式的效果。）

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

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

秒客网

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

2. 直接看简单的Demo

2. style 样式简介

3. 应用隐式或显式样式

4. 关于样式书写位置

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

6.基于样式使用

相关文章