可重用资源
打开 App.xaml
文件。 这里为我们在整个应用程序中使用的一些基本颜色和样式提前配置。 例如,我们为主背景色定义了一种浅色:
<Color x:Key="LightBackground">#FAF9F8</Color>
以后任何 UI 元素或可重用的共享样式都可以引用它。 例如,我们的 ButtonOutline
样式应用于 Button
控件并为其赋予圆角,为文本、边框和背景设置颜色:
<Style x:Key="ButtonOutline" TargetType="Button">
<Setter Property="Background" Value="{StaticResource LightBackground}" />
<Setter Property="TextColor" Value="{StaticResource Primary}" />
<Setter Property="BorderColor" Value="{StaticResource Primary}" />
<Setter Property="BorderWidth" Value="2" />
<Setter Property="HeightRequest" Value="40" />
<Setter Property="CornerRadius" Value="20" />
</Style>
这是在整个应用程序中共享代码的好方法。
主题更改 浅色/深色主题
当您想要响应用户将设备更改为使用黑色主题模式时会发生什么? 好吧,.NET MAUI 具有用于值的“AppThemeBinding”的概念。 让我们使用 Label
的 TextColor
属性。 我们可以定义两种新的颜色来使用:
<Color x:Key="LabelText">Black</Color>
<Color x:Key="LabelTextDark">White</Color>
我们希望文本在背景颜色较浅时为黑色,而在背景颜色较深时为白色。 通常,我们会将颜色设置为单一颜色,例如:
<Label Text="Hello, world!" TextColor="{StaticResource LabelText}"/>
但是,这不会适应应用程序主题的变化。 我们可以将其设为 DynamicResource
,监听应用主题的变化,并更新 LabelText
的值,或者我们可以使用 AppThemeBinding
:
<Label Text="Hello, world!"
TextColor="{AppThemeBinding Light={StaticResource LabelText}, Dark={StaticResource LabelTextDark}}"/>
我们现在可以选择创建一个我们通过名称引用的可重用样式或适用于特定类型的每个元素的样式:
<Style TargetType="Label" x:Key="DefaultLabel">
<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource LabelText}, Dark={StaticResource LabelTextDark}}" />
</Style>
<Label Text="Hello, world!"
Style="{StaticResource DefaultLabel}"/>
如果我们省略 x:Key
,那么它将自动应用于我们应用程序中的每个 Label
。
<Style TargetType="Label">
<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource LabelText}, Dark={StaticResource LabelTextDark}}" />
</Style>