WP8.1学习系列(第二十五章)——控件样式_移动开发_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 编程开发 > 移动开发 > WP8.1学习系列(第二十五章)——控件样式

WP8.1学习系列(第二十五章)——控件样式

 2015/2/15 15:16:11  bvin  程序员俱乐部  我要评论(0)
  • 摘要:XAML框架提供许多自定义应用外观的方法。通过样式可以设置控件属性,并重复使用这些设置,以便保持多个控件具有一致的外观。路线图:本主题与其他主题有何关联?请参阅:使用C#或VisualBasic的Windows运行时应用的路线图使用C++的Windows运行时应用的路线图应用功能大全系列中突出显示的Windows应用商店应用UI详细信息本主题包含下列部分
  • 标签:二十五 学习 控件
class="selectortitle"> 

Applies to Windows and Windows Phone

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

路线图: 本主题与其他主题有何关联?请参阅:

  • 使用 C# 或 Visual Basic 的 Windows 运行时应用的路线图
  • 使用 C++ 的 Windows 运行时应用的路线图
  • 应用功能大全系列中突出显示的 Windows 应用商店应用 UI 详细信息

本主题包含下列部分:

 

  • 先决条件
  • 样式基础知识
  • 应用隐式或显式样式
  • 使用基于样式
  • 使用工具轻松处理样式
  • 修改 Windows 运行时默认样式
  • Template 属性
  • 相关主题

先决条件

我们假定你可以将控件添加到 UI,设置控件的属性以及连接事件处理程序。有关将控件添加到应用的说明,请参阅快速入门:添加控件和处理事件。

样式基础知识

使用样式可将属性设置提取到可重复使用的资源中。下面的示例显示了具有设置BorderBrushBorderThickness 和 Foreground 属性样式的 3 个按钮。通过应用样式,你无须单独为每个控件设置这些属性,并且这些控件全部都有相同的外观。

通过样式设计的按钮

你可以定义在 Extensible Application Markup Language (XAML) 中为控件定义嵌入样式,或者作为可重复使用的资源。在单个页面的 XAML 文件中、App.xaml 文件中,或者单独的资源词典 XAML 文件中定义资源。可以在应用之间共享资源词典 XAML 文件,并且可以将多个资源词典合并到单个应用中。定义资源的位置决定了该资源可以使用的范围。页面级资源只在定义了它们的页面中可用。如果在 App.xaml 和页面中同时定义了具有相同关键字的资源,则页面中的资源将覆盖 App.xaml 中的资源。如果资源在单独的资源词典文件中定义,则它的范围由引用资源词典的位置确定。

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

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

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


应用隐式或显式样式

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

  • 隐式方法,通过仅指定 Style 的 TargetType
  • 显式方法,通过指定 Style 的 TargetType 和 x:Key 特性,然后通过使用显式关键字的 StaticResource 引用设置目标控件的 Style 属性。

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

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

隐式和显示样式按钮。

在本示例中,第一个样式具有 x:Key 属性,其目标类型为 Button。第一个按钮的 Style 属性设置为此关键字,所以显示应用该样式。第二个样式会隐式应用到第二个按钮,因为该按钮的目标类型为 Button,并且该样式没有 x:Key 属性。

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


使用基于样式

为了使样式便于维护以及优化样式的重复使用,你可以创建从其他样式继承的样式。使用 BasedOn 属性可创建继承的样式。从其他样式继承的样式必须应用到同一类型的控件,或者从基本样式的目标类型派生出来的控件。例如,如果基本样式的目标类型为 ContentControl,则基于此样式的样式可应用到 ContentControl 或从ContentControl 派生的类型(如 Button 和 ScrollViewer)。如果基于样式的值没有设置,则从基本样式继承。要从基本样式更改值,基于样式会覆盖该值。 下一个示例演示了具有从同一基本样式继承的样式的 Button和 CheckBox

使用基于样式的样式设计按钮。

基本样式应用到 ContentControl,并设置 Height 和 Width 属性。基于此样式的样式应用到 CheckBox 和Button,这些类型从 ContentControl 派生而来。基于样式为 BorderBrush 和 Foreground 属性设置不同的颜色。

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

使用工具轻松处理样式

将样式应用到控件的一种快捷方式是,在 Microsoft Visual Studio XAML 设计界面上,右键单击控件并选择“编辑样式”或“编辑模板”(取决于右键单击的控件)。然后,通过选择“应用资源”来应用现有样式,或通过选择“创建空项”来定义一个新样式。 如果创建空白样式,则可以使用相应的选项在该页面、App.xaml 文件或一个单独的资源字典中进行定义。

修改 Windows 运行时默认样式

在可以使用来自 Windows 运行时默认 XAML 资源的样式时,应使用这些样式。在必须定义自己的样式时,如果可能,请尝试以默认样式为基础(如前所述,使用基于样式,或先编辑最初默认样式的副本)。

Template 属性

样式 setter 可用于 Control 的 Template 属性,实际上,此样式构成了多数典型的 XAML 样式和应用的 XAML 资源。此内容将在快速入门:控件模板这一主题中更详细地讨论。

发表评论
用户名: 匿名