Visual Studio系列教程：如何创建自定义样式（二）——如何创建基本样式-控件新闻-慧都网

Visual Studio系列教程：如何创建自定义样式（二）——如何创建基本样式

翻译|使用教程|编辑：黄竹雯|2019-03-14 10:10:00.000|阅读 246 次

概述：Visual Studio是一款完备的工具和服务，可帮助您为Microsoft平台和其他平台创建各种各样的应用程序。在本教程中，我们将学习到如何自定义HTML的UI，创建自定义样式。

第2部分：创建基本样式

XAML 样式的其中一项优势是它可以大大缩减必须编写的代码量，同时也能轻松的更新应用的外观。

如果想要定义样式，你可以将 “Style” 元素添加到某个元素的 “Resources” 属性中。其中，该元素包含你要设置样式的控件。如果你将样式添加到“Page.Resources” 属性中，则整个页面将可以使用你的样式。如果你在 App.xaml 文件内将你的样式添加到 “Application.Resources”中，则整个应用将可以使用该样式。

我们可以创建命名样式和常规样式。 命名样式必须显式应用于特定控件；常规样式会应用于任何与指定的 TargetType 匹配的控件。

接下来我们就通过一个示例来为大家演示如何创建基本样式。在本事例中，第一个样式具有 x:Key 属性，其目标类型为 Button。第一个按钮的 Style 属性设置为此键，所以此样式是命名样式并且必须显式应用该样式。第二个样式会自动应用于第二个按钮，因为其目标类型为 Button，并且该样式没有 x:Key 属性。

<Page.Resources> <Style x:Key="PurpleStyle" TargetType="Button"> <Setter Property="FontFamily" Value="Lucida Sans Unicode"/> <Setter Property="FontStyle" Value="Italic"/> <Setter Property="FontSize" Value="14"/> <Setter Property="Foreground" Value="MediumOrchid"/> </Style> <Style TargetType="Button"> <Setter Property="Foreground" Value="Orange"/> </Style> </Page.Resources> <Grid x:Name="LayoutRoot"> <Button Content="Button" Style="{StaticResource PurpleStyle}"/> <Button Content="Button" /> </Grid>

然后我们再向应用添加一个样式。在 DetailsPage.xaml 中，查看位于曝光、温度和色调滑块旁边的文本块。这些文本块中的每一个文本块都会显示滑块的值。如下所示的是曝光滑块的文本块（请注意，Margin、VerticalAlignment 和 Padding 属性已设置）。

创建值文本块样式

打开 DetailsPage.xaml。
查找名为 EditControlsGrid 的 Grid 控件。它包含我们的滑块和文本框。注意，网格已为我们的滑块定义了样式。
为 TextBlock 创建样式，以将其“Margin”设置为“10,8,0,0”、将其 “VerticalAlignment” 设置为“Center”，并将其“Padding”设置为“0”。
之前

<Grid x:Name="EditControlsGrid" HorizontalAlignment="Stretch" Margin="24,48,24,24"> <Grid.Resources> <Style TargetType="Slider"> <Setter Property="Margin" Value="0,0,0,0" /> <Setter Property="Padding" Value="0" /> <Setter Property="MinWidth" Value="100" /> <Setter Property="StepFrequency" Value="0.1" /> <Setter Property="TickFrequency" Value="0.1" /> </Style> </Grid.Resources>

之后

<Grid.Resources> <Style TargetType="Slider"> <Setter Property="Margin" Value="0,0,0,0" /> <Setter Property="Padding" Value="0" /> <Setter Property="MinWidth" Value="100" /> <Setter Property="StepFrequency" Value="0.1" /> <Setter Property="TickFrequency" Value="0.1" /> </Style> <Style TargetType="TextBlock"> <Setter Property="Margin" Value="10,8,0,0" /> <Setter Property="VerticalAlignment" Value="Center" /> <Setter Property="Padding" Value="0" /> </Style> </Grid.Resources>
让我们将其设置为命名样式，以便能够指定它所应用于的 TextBlock 控件。将样式的 x:Key 属性设置为“ValueTextBox”。
之前

<Style TargetType="TextBlock"> <Setter Property="Margin" Value="10,8,0,0" /> <Setter Property="VerticalAlignment" Value="Center" /> <Setter Property="Padding" Value="0" /> </Style>

之后

<Style TargetType="TextBlock" x:Key="ValueTextBox"> <Setter Property="Margin" Value="10,8,0,0" /> <Setter Property="VerticalAlignment" Value="Center" /> <Setter Property="Padding" Value="0" /> </Style>
对于每个 TextBlock，请删除其“Margin、VerticalAlignment” 和 “Padding” 属性，并将其 “Style” 属性设置为“{StaticResource ValueTextBox}”。
之前

<TextBlock Grid.Row="2" Grid.Column="1" Margin="10,8,0,0" VerticalAlignment="Center" Padding="0" Text="{x:Bind item.Exposure.ToString('N', culture), Mode=OneWay}" />

之后

<TextBlock Grid.Row="2" Grid.Column="1" Style="{StaticResource ValueTextBox}" Text="{x:Bind item.Exposure.ToString('N', culture), Mode=OneWay}" />

对与滑块相关联的所有6个 TextBlock 控件都需要进行此更改。
编译并运行应用。这样我们就完成了对基本样式的创建。看似相同的步骤，你会在编写可维护的高效代码中找到成就感。