UWP中设置控件样式四种方法

1. 先谈样式

UWP 中的样式是一套预定义的属性,它们定义了控件的外观和行为。样式关联了不同的目标类型(如Button、TextBox等)和一组属性值。如果您在多个控件中使用相同的样式,那么可以在应用或页面级别定义样式,这样就不必在每个控件中都定义一遍了——这样不仅可以使代码更简洁明了,也可以方便地修改整个应用程序或页面中的样式。实现上述目标主要包括以下四种方式:

2. 基本样式(Basic Styling)

基本样式允许您直接设置控件的属性,例如设置背景颜色,但这些属性只能在单个控件中使用。您可以使用以下代码添加基本样式:

<Button Content="Click Me">

<Button.Background>

<SolidColorBrush Color="Red" />

</Button.Background>

</Button>

上述代码将在页面中创建一个名为“Click Me”的按钮,并将按钮的背景颜色设置为红色。

2.1 注意

需要注意的是,如果将代码写在XAML中,则必须使用XML标记表示属性值。如果您需要添加较多的属性或在多个地方使用相同的属性,则建议使用“复合样式”。

3. 复合样式(Composite Styling)

复合样式是一个更为复杂的概念,其中一个样式可以继承并扩展另一个样式。使用复合样式,您可以为多个控件设置相同的属性,并保持代码简洁。您可以在上一个示例代码中添加一个复合样式,如下所示:

<Page.Resources>

<Style x:Key="myButtonStyle" TargetType="Button">

<Setter Property="Background" Value="Red" />

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

</Style>

</Page.Resources>

<Grid>

<StackPanel>

<Button Content="Click Me 1" Style="{StaticResource myButtonStyle}" />

<Button Content="Click Me 2" Style="{StaticResource myButtonStyle}" />

<Button Content="Click Me 3" Style="{StaticResource myButtonStyle}" />

<Button Content="Click Me 4" Style="{StaticResource myButtonStyle}" />

</StackPanel>

</Grid>

上面代码将在页面中创建四个具有相同样式的按钮。每个控件都引用了名为“myButtonStyle”的Style实例,并继承了其中定义的所有属性。当您需要多次使用类似样式时,可以使用此方法减少代码复制和粘贴。

3.1 注意

需要注意的是,在添加样式时,必须定义样式的目标类型,推荐定义名称和关键字(Key),这样可以轻松引用相应的实例或样式。

4. 引入外部样式表

如果您需要在多个页面或应用程序中使用相同的样式,那么可以将其定义在外部XAML文件中,并在页面或应用程序中引用该文件。使用外部样式表可以实现样式的集中管理,并确保UI的一致性。

下面的示例代码中包含一个名为“style.xaml”的样式表,它定义了全局的文本颜色和文本框背景颜色。当需要使用相同样式的其他页面或应用程序时,可以通过“MergedDictionaries”属性引用此文件。

// style.xaml 文件内容

<ResourceDictionary>

<Color x:Key="textColor">#1155CC</Color>

<Color x:Key="bgColor">#FFDDDDDD</Color>

<SolidColorBrush x:Key="textColorBrush" Color="{StaticResource textColor}" />

<SolidColorBrush x:Key="bgColorBrush" Color="{StaticResource bgColor}" />

</ResourceDictionary>

// MainPage.xaml 文件内容

<Page ...>

<Page.Resources>

<ResourceDictionary>

<ResourceDictionary.MergedDictionaries>

<ResourceDictionary Source="style.xaml" />

</ResourceDictionary.MergedDictionaries>

<!-- 添加其它本地样式 -->

</ResourceDictionary>

</Page.Resources>

...

</Page>

在上述代码中,主页面引入了样式表“style.xaml”。通过将样式表定义在单独的文件中,可以轻松地共享和管理全局样式。

5. 自定义样式(Custom Styling)

自定义样式是为了解决基本和复合样式无法满足需求而设计的。它允许您自定义控件的模板,包括控件的所有可见和不可见部分。通过自定义样式,您可以实现完全自定义的UI控件,从而提高用户体验。

下面的代码示例演示了如何使用自定义样式创建一个简单的按钮控件:

<Style x:Key="myButtonStyle" TargetType="Button">

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="Button">

<Grid>

<Rectangle Fill="#FF333333" RadiusX="10" RadiusY="10" />

<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10"/>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<Button Style="{StaticResource myButtonStyle}" Content="Custom Button" />

上面代码使用了自定义样式创建了一个名为“myButtonStyle”的新按钮控件。该控件包含一个带有圆角的矩形背景,并将文本居中对齐在按钮中央。

5.1 注意

需要注意的是,使用自定义样式时,必须定义“控件模板”——即控件的可见和不可见部分。控件模板是包含多个自定义控件的蓝图,因此必须仔细编写,以确保控件在运行时得到正确的渲染。

6. 总结

UWP 提供了四种样式方式,适合各种场景。您可以根据实际需求选择不同的样式,并使用Visual Studio中的UI设计器轻松编辑和管理样式。 无论您是为了简化代码、统一UI外观还是创建完全自定义的控件,UWP的灵活的样式方案都能满足您的需求。

后端开发标签