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其他相關教程，記得關注收藏我們哦~