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

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

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

下载本站Visual Studio系列教程Github页面示例，打开其中的PhotoLab.sln 来编辑项目。

PhotoLab 应用有两个主要页面：

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

DetailPage.xaml： 选择单张照片后显示此照片。 利用浮出编辑菜单，可以修改、重命名和保存照片。

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

在第一部分的教程中，我们会将一些照片编辑控件变得非常生动有趣，增加控件的趣味性。

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

自定义滑块控件

1. 运行应用。第一个屏幕显示了图像库。单击图像以转到图像详细信息页面。 到达此页面后，单击“编辑”按钮以查看我们将使用的编辑控件。退出应用并返回到 Visual Studio。
2. 在“解决方案资源管理器”面板中，双击 DetailPage.xaml 以将其打开。

   

3. 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”，以便三角形进行调整来填充可用空间。 如果滑块的宽度缩短或变长，则多边形也将相应地缩短或变长。
4. 编译并运行应用。现在，你的滑块应该看起来就很有设计感：

   

5. 接下来我们升级温度滑块。温度滑块更改图像的色温；向左滑会使图像更蓝，向右滑会使图像更黄。我们将对此背景形状使用另一个多边形，其尺寸与上一个多边形相同，但这次我们将填充蓝色到黄色的渐变色而不是填充黑色和白色。

   之前：
   <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" />

6. 编译并运行应用。 你现在应具有两个奇特的滑块。

   

7. 为色调滑块添加一个从绿色渐变为红色的背景形状。

   

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