zoukankan      html  css  js  c++  java
  • Win10系列:UWP界面布局基础11

    样式继承

    为了使样式便于维护及重复使用,可以在一个样式上引用其他的样式,这就是样式继承。样式继承的方法是:在Style元素的BasedOn属性上使用StaticResource标记扩展来引用被继承的样式。

    由继承的概念可知,继承样式会自动继承被继承样式中的属性设置。如果更改继承样式中某个属性的值,而这个属性也在被继承样式中设置,那么继承样式中的值会覆盖被继承样式中的值。

    例如,定义一个页面级别的ContentControl控件样式资源,样式资源的键为BasicStyle,并在Setter元素中设置控件的文本颜色为黄色。接着,针对该控件类型再定义一个样式资源,资源的键为InheritStyle,在该样式中设置控件的高度为30像素,边框的粗细为2像素,并且在Style元素的BasedOn属性上使用StaticResource标记扩展引用样式BasicStyle,相应的XAML代码片段如下所示:

    <Page.Resources>

    <Style x:Key="BasicStyle" TargetType="ContentControl">

    <Setter Property="Foreground" Value="Yellow"/>

    </Style>

    <Style x:Key="InheritStyle" TargetType="ContentControl" BasedOn="{StaticResource BasicStyle}">

    <Setter Property="Height" Value="30"/>

    <Setter Property="BorderThickness" Value="2"/>

    </Style>

    </Page.Resources>

    在上面的代码中,InheritStyle样式是继承样式,BasicStyle样式是被继承样式,在文本颜色上InheritStyle样式会产生和BasicStyle样式一样的效果。

    需要注意的是,继承样式应该应用到和被继承样式的目标类型相同的控件中,或者从被继承样式的目标类型派生出来的控件中。例如,被继承样式的目标类型为ContentControl,那么继承样式可应用于ContentControl控件或从ContentControl类型派生的控件(如Button控件)。

    3.3.2 模板

    由上一节可以看出,样式只是更改控件本身的一些简单属性,只能在有限的范围内更改控件的外观,如果想实现更丰富的外观效果,仅通过样式设置是无法满足的。在实际应用程序开发中,通常是通过创建模板来控制控件的复杂外观,同时增强代码的维护性和可重用性。下面来介绍XAML中两种常用的模板:DataTemplate和ControlTemplate

    1. DataTemplate

    在将ItemsControl类型的控件(如ListBox)绑定到数据集合时,或者在多个ContentControl控件之间共享UIElement对象时,经常会用DataTemplate(数据模板)来定义数据在界面中的表现方式。

    DataTemplate元素的定义格式如下所示:

    <DataTemplate ...>

        templateContent

    </DataTemplate>

    其中,在省略部分可以设置DataTemplate元素的属性,templateContent表示定义的DataTemplate对象树,该树只能有一个根对象,而该根对象可以有零个或更多的子对象。

    例如,有一个customer对象集合,每个customer对象包含属性customerName、customerSex和customerAge。在向一个页面中添加一个ListBox列表框时,要把它绑定到这个对象集合,使列表框的每个列表项对应一个customer对象,方法是把列表框的ItemTemplate属性设置为数据模板,并在这个数据模板中把TextBlock文本块的Text属性绑定到customer对象的属性上。对应的XAML代码片段如下所示:

    <ListBox Width="100" Margin="10" ItemsSource="{Binding}">

    <ListBox.ItemTemplate>

    <DataTemplate>

    <StackPanel>

    <TextBlock Text="{Binding Path=customerName}"/>

    <TextBlock Text="{Binding Path=customerSex}"/>

    <TextBlock Text="{Binding Path=customerAge}"/>

    </StackPanel>

    </DataTemplate>

    </ListBox.ItemTemplate>

    </ListBox>

    在上面代码中,列表框的每个列表项是一个数据模板,在结构上由一个堆栈面板构成,在StackPanel面板上放置三个紧挨着的TextBlock控件,并且将它们的Text属性分别绑定到customer对象的customerName、customerSex和customerAge属性上,以存放每个客户的信息。

    这样,在创建列表框时,每个列表项对应一个客户,列表项的内容就是客户的信息,包括姓名、性别和年龄。也就是说,第一个列表项的内容为第一个客户的信息,第二个列表项的内容为第二个客户的信息,依此类推。

    在此示例中,DataTemplate数据模板直接定义在了ListBox控件内部,因此它只能作用于该控件。为了实现多个控件共享数据模板,可以将数据模板定义为资源,然后通过控件的ItemTemplate属性或ContentTemplate属性(针对ContentControl类型的控件)来引用该资源。例如,要让页面上的多个按钮具有相同的图形,那么可以定义一个包含此图形的DataTemplate资源,然后将对该资源的引用赋值给这些按钮的ContentTemplate属性。

    2. ControlTemplate

    前面提到过,可以通过属性设置来控制控件的表现形式,但由于XAML中的控件所提供的属性并不能覆盖控件外观的方方面面,因此在使用XAML对应用程序界面进行设计的时候,设计人员常常需要自定义控件的外观,常用方法就是定义控件模板。控件模板对应.Net中的ControlTemplate类,是FrameworkTemplate类的直接派生类。

    在XAML语法中,ControlTemplate元素的定义格式如下所示:

    <ControlTemplate ...>

    <VisualTreeRootNode>

    VisualTreeNodeContents

    </VisualTreeRootNode>

    </ControlTemplate>

    其中,VisualTreeRootNode是ControlTemplate对象树的根对象;VisualTreeNodeContents表示VisualTreeRootNode元素对象的内容,它可以是文本,也可以是嵌套定义的子孙对象。在省略部分可以设置ControlTemplate元素的属性。

    在实际开发中,可以把ControlTemplate直接定义在控件内部,也可以定义成资源,然后通过控件的Template属性来引用该模板资源。像其他属性一样,可以通过下列方法设置控件的Template属性:

    为了更好地理解,下面分别给出每类方法的一个示例。

    示例1:以按钮控件为例演示如何使用属性元素语法设置Template属性,并且内联定义ControlTemplate。相应的代码片段如下所示:

    <Button Content="内联定义控件模板">

    <Button.Template>

    <ControlTemplate TargetType="Button">

    <!--在此处定义按钮控件模板的内容-->

    </ControlTemplate>

    </Button.Template>

    </Button>

    在这个示例中,通过定义Button.Template属性元素并在内部定义ControlTemplate模板来控制按钮的显示外观。

    示例2:以文本框控件为例演示如何将ControlTemplate定义为资源,以及把对该资源的引用赋值给控件的Template属性。相应的代码片段如下所示:

    <Page>

    <Page.Resources>

    <ControlTemplate TargetType="TextBox" x:Key="TextBoxTemplate">

    <!--在此处定义文本框控件模板的内容-->

    </ControlTemplate>

    </Page.Resources>

    <TextBox Name="TextBoxSample" Text="引用模板资源!" Template="{StaticResource TextBoxTemplate}"/>

    </Page>

    这段代码表示首先在页面中定义一个ControlTemplate模板资源,目标类型为TextBox,并设置资源的键为TextBoxTemplate,然后向页面中添加一个名称为"TextBoxSample"的文本框,并且使用StaticResource标记扩展引用TextBoxTemplate资源赋值给文本框的Template属性。

    示例3:以复选框控件为例演示如何用Style样式设置控件的Template属性和定义ControlTemplate。相应的代码片段如下所示:

    <StackPanel>

    <StackPanel.Resources>

    <Style TargetType="CheckBox" x:Key="CheckBoxStyle">

    <Setter Property="Template">

    <Setter.Value>

    <ControlTemplate TargetType="CheckBox">

    <!--在此处定义复选框控件模板的内容-->

    </ControlTemplate>

    </Setter.Value>

    </Setter>

    </Style>

    </StackPanel.Resources>

    <CheckBox Content="引用样式资源" Style="{StaticResource CheckBoxStyle}"/>

    </StackPanel>

    此段代码表示在StackPanel面板中首先定义一个键为"CheckBoxStyle"的复选框样式资源,在样式中设置Template属性的值为ControlTemplate。然后添加一个CheckBox复选框,并通过StaticResource标记扩展引用样式CheckBoxStyle赋值给CheckBox控件的Style属性。这样,复选框的外观就会按照控件模板的设计来显示。

  • 相关阅读:
    HDU 2955 Robberies(01背包)
    HDU 2602 Bone Collector(01背包)
    HUST 1352 Repetitions of Substrings(字符串)
    HUST 1358 Uiwurerirexb jeqvad(模拟解密)
    HUST 1404 Hamming Distance(字符串)
    HDU 4520 小Q系列故事――最佳裁判(STL)
    HDU 2058 The sum problem(枚举)
    【破解】修改程序版权、添加弹窗
    HDU 1407 测试你是否和LTC水平一样高(枚举)
    HDU 1050 Moving Tables(贪心)
  • 原文地址:https://www.cnblogs.com/finehappy/p/6645749.html
Copyright © 2011-2022 走看看