xamarin xaml样式

<Button
    Text = "OK"
    BackgroundColor = "{StaticResource highlightColor}"
    BorderColor = "{StaticResource borderColor}"
    BorderRadius = "{StaticResource borderRadius}"
    BorderWidth = "{StaticResource borderWidth}"
    TextColor = "{StaticResource textColor}" />

<Button
    Text = "Cancel"
    BackgroundColor = "{StaticResource highlightColor}"
    BorderColor = "{StaticResource borderColor}"
    BorderRadius = "{StaticResource borderRadius}"
    BorderWidth = "{StaticResource borderWidth}"
    TextColor = "{StaticResource textColor}" />

这样看起来会很杂乱,难以阅读,我们可以考虑样式

什么是样式?
以下代码显示了一个样式,它合并了前一个示例中的五个值。 请注意,TargetType 设置为 Button,并且资源库中的所有属性都是 Button 类的一部分。 不可将此样式用于标签,因为 Label 类不包含 BorderColor、BorderRadius 或 BorderWidth 属性。

<Style TargetType="Button">
    <Setter Property="BackgroundColor" Value="#2A84D3" />
    <Setter Property="BorderColor" Value="#1C5F9B" />
    <Setter Property="BorderRadius" Value="10" />
    <Setter Property="BorderWidth" Value="3" />
    <Setter Property="TextColor" Value="White" />
</Style>

定义样式
通常可在 ResourceDictionary 中将样式定义为资源。 借助字典,可在同一页面甚至整个应用程序中跨多个控件轻松使用样式。 以下代码演示了如何在字典中将样式定义为资源。 注意,我们添加了 x:Key。

<Page.Resources>
    <Style x:Key="MyButtonStyle" TargetType="Button">
    ...
    </Style>
</Page.Resources>

应用样式
通过为名为 Style 的属性赋值即可应用样式。 赋值会使样式中的每个 Setter 对象都应用于目标控件。 Style 属性是在 VisualElement 类中定义的。 大多数控件都继承自 VisualElement,因此要放置在 UI 中的所有元素几乎都可以使用该属性。 以下代码演示如何将按钮样式应用于两个按钮。

<Button Text="OK" Style="{StaticResource MyButtonStyle}" />
<Button Text="Cancel" Style="{StaticResource MyButtonStyle}" />

在前面的示例中,我们使用 StaticResource 来加载样式。 如果无需在运行时更改样式,此方法将非常有用。 但如果需要在运行时更改 UI,这时想要实现动态主题等内容,该怎么办? 在这种情况下,可使用 DynamicResource 加载样式。

<Button Text="Cancel" Style="{DynamicResource MyButtonStyle}" />

DynamicResource 侦听字典中的 x:Key 是否有替换项。 如果编写的代码使用相同的 x:Key 实例将新样式加载到 ResourceDictionary,则新样式将自动应用于 UI。
对多个控件使用隐式样式
假设 UI 有 50 个按钮,你希望所有这些按钮都应用相同的样式。 据我们目前所知,对于每个按钮,都需要给 Style 属性赋值。 这并不难,但仍然很繁琐。

隐式样式是添加到 ResourceDictionary 而不用提供 x:Key 实例的样式。 隐式样式会自动应用于 TargetType 对象的所有控件。

下面是之前的示例,它被声明为隐式样式。 此样式将加载到页面上的每个 Button 实例。

<Page.Resources>
    <Style TargetType="Button">
        <Setter Property="BackgroundColor" Value="Blue" />
        <Setter Property="BorderColor" Value="Navy" />
        ...
    </Style>
</Page.Resources>

以下为最后需要注意的一点。 隐式样式与控件匹配时需要与 TargetType 完全匹配。 继承自目标类型的控件将不接收样式。 要影响继承的控件,可将 Style.ApplyToDerivedTypes 属性设置为 True。 可将样式应用于 ContentPage使其影响从它继承的任何页面。 如果希望所有页面都采用黑色背景,可使用此类样式。

<Page.Resources>
    <Style TargetType="ContentPage"
           ApplyToDerivedTypes="True">
        <Setter Property="BackgroundColor" Value="Black" />
    </Style>
</Page.Resources>

替代样式
假设你想使用别人编写的样式。 该样式可能并不适合你的需求。 例如,该样式可能有三个资源库,其中两个完全符合要求,但第三个不符合。 那可以继续使用该样式吗?

请将样式视为提供默认值。 你可以使用样式,然后直接设置该属性,以替代不合适的值。 显式设置在样式之后应用,因此它将替代样式的值。

接下来举例说明。 假设要对页面上的多个按钮使用以下样式。

<Style x:Key="MyButtonStyle" TargetType="Button">
    <Setter Property="BackgroundColor" Value="Blue" />
    <Setter Property="BorderRadius" Value="10" />
    <Setter Property="BorderWidth" Value="3" />
</Style>

假设此样式适用于所有按钮,需要红色背景的“取消”按钮除外。 只要还直接设置了 BackgroundColor,就可以将此样式用于“取消”按钮。 以下代码演示了如何替代颜色设置。

<Button
    Text="Cancel"
    Style="{StaticResource MyButtonStyle}"
    BackgroundColor="Red"
    ... />

面向上级类型
假设按钮和标签需要自定义背景色。 可以为每种类型创建单独的样式。 或者可以创建一个 TargetType 设置为 VisualElement 的样式。 这种方法之所以可行,是因为 VisualElement 是 Button 和 Label 的基类。

以下代码展示了这样一种样式,它面向的是应用于两种不同派生类型的基类。

<Style x:Key="MyVisualElementStyle" TargetType="VisualElement">
    <Setter Property="BackgroundColor" Value="#2A84D3" />
</Style>

<Button Style="{StaticResource MyVisualElementStyle}" ... />
<Label Style="{StaticResource MyVisualElementStyle}" ... />

必须使用 x:Key 定义样式并将其显式应用才可以使用此方法。 隐式样式在此处不起作用,因为隐式样式的 TargetType 必须与对象类型完全匹配。
使用 BasedOn 从样式继承
假设想为 UI 创建一致的外观。 你决定让所有控件都使用一致的背景色。 背景色设置随后可能会出现在多个样式中。 以下代码演示了两种带有重复资源库的样式。

<Style x:Key="MyButtonStyle" TargetType="Button">
    <Setter Property="BackgroundColor" Value="Blue" />
    <Setter Property="BorderColor" Value="Navy" />
    <Setter Property="BorderWidth" Value="5" />
</Style>

<Style x:Key="MyEntryStyle" TargetType="Entry">
    <Setter Property="BackgroundColor" Value="Blue" />
    <Setter Property="TextColor" Value="White" />
</Style>

可使用样式继承将重复的资源库提取到基准样式中。 要创建派生样式,可设置其 BasedOn 属性。 新样式从其基准样式继承所有资源库。 它还可以添加新的资源库或将继承的资源库替换为包含不同值的资源库。

下面的代码演示了之前的示例样式,它被重构为层次结构。 常见的资源库只出现在基准样式中而不是重复出现。 注意,请使用 StaticResource 来查找基准样式。 这是唯一的方法,因为不允许使用 DynamicResource。

<Style x:Key="MyVisualElementStyle" TargetType="VisualElement">
    <Setter Property="BackgroundColor" Value="Blue" />
</Style>

<Style x:Key="MyButtonStyle" TargetType="Button" BasedOn="{StaticResource MyVisualElementStyle}">
    <Setter Property="BorderColor" Value="Navy" />
    <Setter Property="BorderWidth" Value="5" />
</Style>

<Style x:Key="MyEntryStyle" TargetType="Entry" BasedOn="{StaticResource MyVisualElementStyle}">
    <Setter Property="TextColor" Value="White" />
</Style>

以下为最后值得注意的一点。 基准样式和派生样式的 TargetType 值必须兼容。 下面有两种方式可以解释什么是兼容:

TargetType 对象相同。
基准样式的 TargetType 对象是派生样式的 TargetType 对象的基类。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值