Xamarin.Forms 用户界面——控件——Style——介绍

来源:互联网 发布:轩辕剑坐骑进阶数据 编辑:程序博客网 时间:2024/06/06 02:06

样式简介

PDF用于离线使用
  • 下载PDF
相关文章:
  • XAML标记扩展
相关API:
  • 样式
  • 二传手

让我们知道你对此的感受

最后更新:2016年4月

样式允许定制视觉元素的外观。为特定类型定义样式,并包含该类型可用属性的值。

Xamarin.Forms应用程序通常包含具有相同外观的多个控件。例如,应用程序可能具有多个Label具有相同字体选项和布局选项的实例,如以下XAML代码示例所示:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"    x:Class="Styles.NoStylesPage"    Title="No Styles"    Icon="xaml.png">    <ContentPage.Content>        <StackLayout Padding="0,20,0,0">            <Label Text="These labels"                   HorizontalOptions="Center"                   VerticalOptions="CenterAndExpand"                   FontSize="Large" />            <Label Text="are not"                   HorizontalOptions="Center"                   VerticalOptions="CenterAndExpand"                   FontSize="Large" />            <Label Text="using styles"                   HorizontalOptions="Center"                   VerticalOptions="CenterAndExpand"                   FontSize="Large" />        </StackLayout>    </ContentPage.Content></ContentPage>

以下代码示例显示了在C#中创建的等效页面:

public class NoStylesPageCS : ContentPage{    public NoStylesPageCS ()    {        Title = "No Styles";        Icon = "csharp.png";        Padding = new Thickness (0, 20, 0, 0);        Content = new StackLayout {            Children = {                new Label {                    Text = "These labels",                    HorizontalOptions = LayoutOptions.Center,                    VerticalOptions = LayoutOptions.CenterAndExpand,                    FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label))                },                new Label {                    Text = "are not",                    HorizontalOptions = LayoutOptions.Center,                    VerticalOptions = LayoutOptions.CenterAndExpand,                    FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label))                },                new Label {                    Text = "using styles",                    HorizontalOptions = LayoutOptions.Center,                    VerticalOptions = LayoutOptions.CenterAndExpand,                    FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label))                }            }        };    }}

每个Label实例具有相同的属性值,用于控制显示的文本的外观Label。这将导致以下屏幕截图中显示的外观:

设置每个单独控件的外观可能是重复的并且容易出错。相反,可以创建一个定义外观的样式,然后应用于所需的控件。

创造风格

Style类组的属性值的集合为一个对象,然后可以应用到多个可视元素的实例。这有助于减少重复性标记,并允许应用程序外观更容易更改。

虽然样式主要用于基于XAML的应用程序,但它们也可以在C#中创建:

  • Style在XAML中创建的实例通常定义在ResourceDictionary分配给Resources控件,页面或Resources应用程序集合的集合中。
  • Style 在C#中创建的实例通常在页面的类中或者可以被全局访问的类中定义。

选择在哪里定义Style可以使用的影响:

  • Style 控制级别定义的实例只能应用于控件及其子级。
  • Style 在页面级别定义的实例只能应用于页面及其子项。
  • Style 在整个应用程序中可以应用在应用程序级定义的实例。

每个Style实例都包含一个或多个Setter对象的集合,每个对象Setter具有a Property和a Value。它Property是应用于样式的元素的bindable属性的名称,Value它是应用于该属性的值。

每个Style实例可以是显式的隐式的

  • 一个明确的 Style实例是通过指定所定义的TargetTypex:Key值,并且由所述目标元件的设置Style属性的x:Key参考。有关显式样式的更多信息,请参阅显式样式。
  • 通过仅指定一个隐式 Style实例来定义TargetTypeStyle然后,该实例将自动应用于该类型的所有元素。请注意,子类TargetType不会自动Style应用。有关隐式样式的更多信息,请参阅隐式样式。

创建时StyleTargetType始终需要属性。以下代码示例显示了在XAML中创建的显式样式(注意x:Key

<Style x:Key="labelStyle" TargetType="Label">    <Setter Property="HorizontalOptions" Value="Center" />    <Setter Property="VerticalOptions" Value="CenterAndExpand" />    <Setter Property="FontSize" Value="Large" /></Style>

为了应用a Style,目标对象必须VisualElement与该TargetType属性值匹配Style,如以下XAML代码示例所示:

<Label Text="Demonstrating an explicit style" Style="{StaticResource labelStyle}" />

视图层次结构中较低的样式优先于定义较高的样式。例如,将Style设置Label.TextColorRed应用程序级别的设置将被设置Label.TextColor为的页面级别风格覆盖Green。类似地,页面级风格将被控件级风格覆盖。另外,如果Label.TextColor直接在控件属性上设置,则优先于任何样式。

本节中的文章将演示和解释如何创建和应用显式隐式样式,如何创建全局样式,样式继承,如何在运行时响应样式更改以及如何使用Xamarin.Forms中包含的内置样式。

什么是StyleId?

在Xamarin.Forms 2.2之前,该StyleId属性用于识别UI测试中的识别应用程序中的各个元素,以及像Pixate这样的主题引擎。但是,Xamarin.Forms 2.2引入了该AutomationId属性,该属性已取代该StyleId属性。有关更多信息,请参阅使用Xamarin.UITest和测试云自动化Xamarin.Forms测试。

概要

Xamarin.Forms应用程序通常包含具有相同外观的多个控件。设置每个单独控件的外观可能是重复的并且容易出错。相反,可以创建通过控件类型可用的分组和设置属性自定义控件外观的样式。

原创粉丝点击