Visual Studio系列教程：如何創(chuàng)建自定義樣式（二）——如何創(chuàng)建基本樣式

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

本教程將為你介紹在Visual Studio中如何自定義HTML的UI，創(chuàng)建自定義樣式。本章將繼續(xù)帶你學習如何創(chuàng)建基本的樣式。

第2部分：創(chuàng)建基本樣式

XAML 樣式的其中一項優(yōu)勢是它可以大大縮減必須編寫的代碼量，同時也能輕松的更新應用的外觀。

如果想要定義樣式，你可以將 “Style” 元素添加到某個元素的 “Resources” 屬性中。其中，該元素包含你要設(shè)置樣式的控件。 如果你將樣式添加到“Page.Resources” 屬性中，則整個頁面將可以使用你的樣式。 如果你在 App.xaml 文件內(nèi)將你的樣式添加到 “Application.Resources”中，則整個應用將可以使用該樣式。

我們可以創(chuàng)建命名樣式和常規(guī)樣式。 命名樣式必須顯式應用于特定控件；常規(guī)樣式會應用于任何與指定的 TargetType 匹配的控件。

接下來我們就通過一個示例來為大家演示如何創(chuàng)建基本樣式。在本事例中，第一個樣式具有 x:Key 屬性，其目標類型為 Button。 第一個按鈕的 Style 屬性設(shè)置為此鍵，所以此樣式是命名樣式并且必須顯式應用該樣式。 第二個樣式會自動應用于第二個按鈕，因為其目標類型為 Button，并且該樣式?jīng)]有 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 中，查看位于曝光、溫度和色調(diào)滑塊旁邊的文本塊。 這些文本塊中的每一個文本塊都會顯示滑塊的值。如下所示的是曝光滑塊的文本塊（請注意，Margin、VerticalAlignment 和 Padding 屬性已設(shè)置）。

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

創(chuàng)建值文本塊樣式

1. 打開 DetailsPage.xaml。
2. 查找名為 EditControlsGrid 的 Grid 控件。 它包含我們的滑塊和文本框。 注意，網(wǎng)格已為我們的滑塊定義了樣式。
3. 為 TextBlock 創(chuàng)建樣式，以將其“Margin”設(shè)置為“10,8,0,0”、將其 “VerticalAlignment” 設(shè)置為“Center”，并將其“Padding”設(shè)置為“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. 讓我們將其設(shè)置為命名樣式，以便能夠指定它所應用于的 TextBlock 控件。 將樣式的 x:Key 屬性設(shè)置為“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” 屬性設(shè)置為“{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}" />

   對與滑塊相關(guān)聯(lián)的所有6個 TextBlock 控件都需要進行此更改。

6. 編譯并運行應用。這樣我們就完成了對基本樣式的創(chuàng)建?？此葡嗤牟襟E，你會在編寫可維護的高效代碼中找到成就感。