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

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

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

本教程将为你介绍在Visual Studio中如何自定义HTML的UI，创建自定义样式。

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

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

首先，我们需要做一些准备工作：

PhotoLab 应用有两个主要页面：

MainPage.xaml： 显示照片库视图，以及关于每个图像文件的一些信息。

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

第1部分：创建奇特的滑块控件

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

这些滑块能够执行滑块应该执行的所有操作，但不是很奇特。让我们来修复一下。曝光滑块可调整图像的曝光：将其向左滑动，图像会变暗；将其向右滑动，图像会变亮。让我们为滑块提供一个从黑色渐变到白色的背景，以使其变得更酷。背景将使滑块更美观，但是它还将提供关于滑块所提供的功能的视觉提示。

自定义滑块控件

在“解决方案资源管理器”面板中，双击 DetailPage.xaml 以将其打开。
Windows.XAML.Ui.Shapes 命名空间可提供七种形状以供选择。有椭圆、矩形和一个叫“路径”的东西，这个东西可以制作任何类型的形状。现在，我们想要创建一个三角形样子的小工具,有点像你在立体声音量控件上看到的形状。

若要定义多边形，你可以指定一组点，并进行填充。让我们创建一个宽约 200 像素、高约 20 像素的多边形，并进行渐变填充。

在 DetailPage.xaml 中，查找曝光滑块的代码，然后就在该代码前面创建一个 Polygon 元素：
- 将 Grid.Row 设置为“2”以将多边形放在曝光滑块所在的相同行中。
- 将 Points 属性设置为“0,20 200,20 200,0”以定义三角形。
- 将 Stretch 属性设置为“Fill”，并将 HorizontalAlignment 属性设置为“Stretch”。
- 将 Height 设置为“20”，并将 VerticalAlignment 设置为“Center”。
- 为此 Polygon 提供线性渐变填充。
- 在曝光滑块上，将 Foreground 属性设置为“Transparent”，以便你可以看到此多边形。
之前：
<Slider Header=”Exposure” Grid.Row=”2″ Value=”{x:Bind item.Exposure, Mode=TwoWay}” Minimum=”-2″ Maximum=”2″ />

之后：
<Polygon Grid.Row=”2″ Stretch=”Fill” Points=”0,20 200,20 200,0″ HorizontalAlignment=”Stretch” VerticalAlignment=”Center” Height=”20″> <Polygon.Fill> <LinearGradientBrush StartPoint=”0,0.5″ EndPoint=”1,0.5″> <LinearGradientBrush.GradientStops> <GradientStop Offset=”0″ Color=”Black” /> <GradientStop Offset=”1″ Color=”White” /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Polygon.Fill></Polygon><Slider Header=”Exposure” Grid.Row=”2″ Foreground=”Transparent” Value=”{x:Bind item.Exposure, Mode=TwoWay}” Minimum=”-2″ Maximum=”2″ />

需要注意的是：
- 如果你看一下周围的 XAML，则会发现这些元素在一个 Grid 中。我们将此多边形放在曝光滑块 (Grid.Row=”2″) 所在的相同行中，使它们出现在同一位置。我们将多边形放在滑块之前，使滑块呈现在形状的顶部。
- 针对此多边形将 Stretch 设置为“Fill”并将 HorizontalAlignment 设置为“Stretch”，以便三角形进行调整来填充可用空间。如果滑块的宽度缩短或变长，则多边形也将相应地缩短或变长。
编译并运行应用。现在，你的滑块应该看起来就很有设计感：
接下来我们升级温度滑块。温度滑块更改图像的色温；向左滑会使图像更蓝，向右滑会使图像更黄。我们将对此背景形状使用另一个多边形，其尺寸与上一个多边形相同，但这次我们将填充蓝色到黄色的渐变色而不是填充黑色和白色。
之前：
<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}” /><Slider Header=”Temperature” Grid.Row=”3″ Background=”Transparent” Foreground=”Transparent” Value=”{x:Bind item.Temperature, Mode=TwoWay}” Minimum=”-1″ Maximum=”1″ />

之后：
<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}” /> <Polygon Grid.Row=”3″ Stretch=”Fill” Points=”0,20 200,20 200,0″ HorizontalAlignment=”Stretch” VerticalAlignment=”Center” Height=”20″> <Polygon.Fill> <LinearGradientBrush StartPoint=”0,0.5″ EndPoint=”1,0.5″> <LinearGradientBrush.GradientStops> <GradientStop Offset=”0″ Color=”Blue” /> <GradientStop Offset=”1″ Color=”Yellow” /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Polygon.Fill></Polygon><Slider Header=”Temperature” Grid.Row=”3″ Background=”Transparent” Foreground=”Transparent” Value=”{x:Bind item.Temperature, Mode=TwoWay}” Minimum=”-1″ Maximum=”1″ />
编译并运行应用。你现在应具有两个奇特的滑块。
为色调滑块添加一个从绿色渐变为红色的背景形状。