Visual Studio是一款完備的工具和服務(wù)，可幫助您為Microsoft平臺(tái)和其他平臺(tái)創(chuàng)建各種各樣的應(yīng)用程序，同時(shí)還可以將您所有的項(xiàng)目、團(tuán)隊(duì)和利益干系人聯(lián)系在一起。

本教程將為你介紹在Visual Studio中如何自定義HTML的UI，創(chuàng)建自定義樣式。

首先，我們需要做一些準(zhǔn)備工作：

下載本站Visual Studio系列教程Github頁(yè)面示例，打開(kāi)其中的PhotoLab.sln 來(lái)編輯項(xiàng)目。

PhotoLab 應(yīng)用有兩個(gè)主要頁(yè)面：

MainPage.xaml： 顯示照片庫(kù)視圖，以及關(guān)于每個(gè)圖像文件的一些信息。

DetailPage.xaml： 選擇單張照片后顯示此照片。 利用浮出編輯菜單，可以修改、重命名和保存照片。

第1部分：創(chuàng)建奇特的滑塊控件

在第一部分的教程中，我們會(huì)將一些照片編輯控件變得非常生動(dòng)有趣，增加控件的趣味性。

這些滑塊能夠執(zhí)行滑塊應(yīng)該執(zhí)行的所有操作，但不是很奇特。讓我們來(lái)修復(fù)一下。曝光滑塊可調(diào)整圖像的曝光：將其向左滑動(dòng)，圖像會(huì)變暗；將其向右滑動(dòng)，圖像會(huì)變亮。 讓我們?yōu)榛瑝K提供一個(gè)從黑色漸變到白色的背景，以使其變得更酷。 背景將使滑塊更美觀，但是它還將提供關(guān)于滑塊所提供的功能的視覺(jué)提示。

自定義滑塊控件

1. 運(yùn)行應(yīng)用。第一個(gè)屏幕顯示了圖像庫(kù)。單擊圖像以轉(zhuǎn)到圖像詳細(xì)信息頁(yè)面。 到達(dá)此頁(yè)面后，單擊“編輯”按鈕以查看我們將使用的編輯控件。退出應(yīng)用并返回到 Visual Studio。
2. 在“解決方案資源管理器”面板中，雙擊 DetailPage.xaml 以將其打開(kāi)。

   

3. Windows.XAML.Ui.Shapes 命名空間可提供七種形狀以供選擇。 有橢圓、矩形和一個(gè)叫“路徑”的東西，這個(gè)東西可以制作任何類型的形狀。現(xiàn)在，我們想要?jiǎng)?chuàng)建一個(gè)三角形樣子的小工具,有點(diǎn)像你在立體聲音量控件上看到的形狀。

   

   若要定義多邊形，你可以指定一組點(diǎn)，并進(jìn)行填充。 讓我們創(chuàng)建一個(gè)寬約 200 像素、高約 20 像素的多邊形，并進(jìn)行漸變填充。

   在 DetailPage.xaml 中，查找曝光滑塊的代碼，然后就在該代碼前面創(chuàng)建一個(gè) Polygon 元素：

   • 將 Grid.Row 設(shè)置為“2”以將多邊形放在曝光滑塊所在的相同行中。
   • 將 Points 屬性設(shè)置為“0,20 200,20 200,0”以定義三角形。
   • 將 Stretch 屬性設(shè)置為“Fill”，并將 HorizontalAlignment 屬性設(shè)置為“Stretch”。
   • 將 Height 設(shè)置為“20”，并將 VerticalAlignment 設(shè)置為“Center”。
   • 為此 Polygon 提供線性漸變填充。
   • 在曝光滑塊上，將 Foreground 屬性設(shè)置為“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，則會(huì)發(fā)現(xiàn)這些元素在一個(gè) Grid 中。 我們將此多邊形放在曝光滑塊 (Grid.Row="2") 所在的相同行中，使它們出現(xiàn)在同一位置。 我們將多邊形放在滑塊之前，使滑塊呈現(xiàn)在形狀的頂部。
   • 針對(duì)此多邊形將 Stretch 設(shè)置為“Fill”并將 HorizontalAlignment 設(shè)置為“Stretch”，以便三角形進(jìn)行調(diào)整來(lái)填充可用空間。 如果滑塊的寬度縮短或變長(zhǎng)，則多邊形也將相應(yīng)地縮短或變長(zhǎng)。
4. 編譯并運(yùn)行應(yīng)用。現(xiàn)在，你的滑塊應(yīng)該看起來(lái)就很有設(shè)計(jì)感：

   

5. 接下來(lái)我們升級(jí)溫度滑塊。溫度滑塊更改圖像的色溫；向左滑會(huì)使圖像更藍(lán)，向右滑會(huì)使圖像更黃。我們將對(duì)此背景形狀使用另一個(gè)多邊形，其尺寸與上一個(gè)多邊形相同，但這次我們將填充藍(lán)色到黃色的漸變色而不是填充黑色和白色。

   之前：
   <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. 編譯并運(yùn)行應(yīng)用。 你現(xiàn)在應(yīng)具有兩個(gè)奇特的滑塊。

   

7. 為色調(diào)滑塊添加一個(gè)從綠色漸變?yōu)榧t色的背景形狀。

   

那么，現(xiàn)在我們就完成了第1部分的教程內(nèi)容。如果你遇到困難或者想要 Visual Studio其他相關(guān)教程，記得關(guān)注收藏我們哦~