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

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

Visual Studio是一款完备的工具和服务，可帮助您为Microsoft平台和其他平台创建各种各样的应用程序，同时还可以将您所有的项目、团队和利益干系人联系在一起。

本教程将为你介绍在Visual Studio中如何自定义HTML的UI，创建自定义样式。本章将继续带你学习如何创建基本的样式。

Visual Studio最新版本免费下载试用

第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 属性已设置）。

<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}” />

创建值文本块样式

1. 打开 DetailsPage.xaml。
2. 查找名为 EditControlsGrid 的 Grid 控件。 它包含我们的滑块和文本框。 注意，网格已为我们的滑块定义了样式。
3. 为 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>

4. 让我们将其设置为命名样式，以便能够指定它所应用于的 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>

5. 对于每个 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 控件都需要进行此更改。

6. 编译并运行应用。这样我们就完成了对基本样式的创建。看似相同的步骤，你会在编写可维护的高效代码中找到成就感。

那么，现在我们就完成了第2部分的教程内容。如果你遇到困难或者想要 Visual Studio其他相关教程，记得关注收藏我们哦~

标签：IDE集成开发环境 代码管控工具IDE

来源：慧都