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

本教程将为你介绍在Visual Studio中如何自定义HTML的UI，创建自定义样式。本章将继续带你学习如何使用控制模板制作奇特的滑块。

第3部分：使用控制模板制作奇特的滑块

在第1部分教程中我们知道了如何在滑块后面添加形状使其看起来很酷。其实，我们还有另一个更好的方法达到相同的效果。

1. 在“解决方案资源管理器”面板中，双击 DetailPage.xaml。
2. 接下来，我们将使用滑块的默认控件模板作为起点，将此 XAML 添加到 “Page.Resources” 元素中。（控件模板是项强大的功能，下面的XAML或许有些长）

   <ControlTemplate x:Key="FancySliderControlTemplate" TargetType="Slider"> <Grid Margin="{TemplateBinding Padding}"> <Grid.Resources> <Style TargetType="Thumb" x:Key="SliderThumbStyle"> <Setter Property="BorderThickness" Value="0" /> <Setter Property="Background" Value="{ThemeResource SliderThumbBackground}" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Thumb"> <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4" /> </ControlTemplate> </Setter.Value> </Setter> </Style> </Grid.Resources> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal" /> <VisualState x:Name="Pressed"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalTrackRect" Storyboard.TargetProperty="Fill"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackFillPressed}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalTrackRect" Storyboard.TargetProperty="Fill"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackFillPressed}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" Storyboard.TargetProperty="Background"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderThumbBackgroundPressed}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalThumb" Storyboard.TargetProperty="Background"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderThumbBackgroundPressed}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer" Storyboard.TargetProperty="Background"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderContainerBackgroundPressed}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalDecreaseRect" Storyboard.TargetProperty="Fill"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackValueFillPressed}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalDecreaseRect" Storyboard.TargetProperty="Fill"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackValueFillPressed}" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Disabled"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderHeaderForegroundDisabled}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalDecreaseRect" Storyboard.TargetProperty="Fill"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackValueFillDisabled}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalTrackRect" Storyboard.TargetProperty="Fill"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackFillDisabled}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalDecreaseRect" Storyboard.TargetProperty="Fill"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackValueFillDisabled}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalTrackRect" Storyboard.TargetProperty="Fill"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackFillDisabled}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" Storyboard.TargetProperty="Background"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderThumbBackgroundDisabled}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalThumb" Storyboard.TargetProperty="Background"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderThumbBackgroundDisabled}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TopTickBar" Storyboard.TargetProperty="Fill"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTickBarFillDisabled}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BottomTickBar" Storyboard.TargetProperty="Fill"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTickBarFillDisabled}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LeftTickBar" Storyboard.TargetProperty="Fill"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTickBarFillDisabled}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RightTickBar" Storyboard.TargetProperty="Fill"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTickBarFillDisabled}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer" Storyboard.TargetProperty="Background"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderContainerBackgroundDisabled}" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="PointerOver"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalTrackRect" Storyboard.TargetProperty="Fill"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackFillPointerOver}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalTrackRect" Storyboard.TargetProperty="Fill"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackFillPointerOver}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" Storyboard.TargetProperty="Background"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderThumbBackgroundPointerOver}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalThumb" Storyboard.TargetProperty="Background"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderThumbBackgroundPointerOver}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer" Storyboard.TargetProperty="Background"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderContainerBackgroundPointerOver}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalDecreaseRect" Storyboard.TargetProperty="Fill"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackValueFillPointerOver}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalDecreaseRect" Storyboard.TargetProperty="Fill"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackValueFillPointerOver}" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="FocusEngagementStates"> <VisualState x:Name="FocusDisengaged" /> <VisualState x:Name="FocusEngagedHorizontal"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer" Storyboard.TargetProperty="(Control.IsTemplateFocusTarget)"> <DiscreteObjectKeyFrame KeyTime="0" Value="False" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" Storyboard.TargetProperty="(Control.IsTemplateFocusTarget)"> <DiscreteObjectKeyFrame KeyTime="0" Value="True" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="FocusEngagedVertical"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer" Storyboard.TargetProperty="(Control.IsTemplateFocusTarget)"> <DiscreteObjectKeyFrame KeyTime="0" Value="False" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalThumb" Storyboard.TargetProperty="(Control.IsTemplateFocusTarget)"> <DiscreteObjectKeyFrame KeyTime="0" Value="True" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <ContentPresenter x:Name="HeaderContentPresenter" x:DeferLoadStrategy="Lazy" Visibility="Collapsed" Foreground="{ThemeResource SliderHeaderForeground}" Margin="{ThemeResource SliderHeaderThemeMargin}" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" FontWeight="{ThemeResource SliderHeaderThemeFontWeight}" TextWrapping="Wrap" /> <Grid x:Name="SliderContainer" Background="{ThemeResource SliderContainerBackground}" Grid.Row="1" Control.IsTemplateFocusTarget="True"> <Grid x:Name="HorizontalTemplate" MinHeight="44"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="18" /> <RowDefinition Height="Auto" /> <RowDefinition Height="18" /> </Grid.RowDefinitions> <Rectangle x:Name="HorizontalTrackRect" Fill="{TemplateBinding Background}" Height="{ThemeResource SliderTrackThemeHeight}" Grid.Row="1" Grid.ColumnSpan="3" /> <Rectangle x:Name="HorizontalDecreaseRect" Fill="{TemplateBinding Foreground}" Grid.Row="1" /> <TickBar x:Name="TopTickBar" Visibility="Collapsed" Fill="{ThemeResource SliderTickBarFill}" Height="{ThemeResource SliderOutsideTickBarThemeHeight}" VerticalAlignment="Bottom" Margin="0,0,0,4" Grid.ColumnSpan="3" /> <TickBar x:Name="HorizontalInlineTickBar" Visibility="Collapsed" Fill="{ThemeResource SliderInlineTickBarFill}" Height="{ThemeResource SliderTrackThemeHeight}" Grid.Row="1" Grid.ColumnSpan="3" /> <TickBar x:Name="BottomTickBar" Visibility="Collapsed" Fill="{ThemeResource SliderTickBarFill}" Height="{ThemeResource SliderOutsideTickBarThemeHeight}" VerticalAlignment="Top" Margin="0,4,0,0" Grid.Row="2" Grid.ColumnSpan="3" /> <Thumb x:Name="HorizontalThumb" Style="{StaticResource SliderThumbStyle}" DataContext="{TemplateBinding Value}" Height="24" Width="8" Grid.Row="0" Grid.RowSpan="3" Grid.Column="1" FocusVisualMargin="-14,-6,-14,-6" AutomationProperties.AccessibilityView="Raw" /> </Grid> <Grid x:Name="VerticalTemplate" MinWidth="44" Visibility="Collapsed"> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="18" /> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="18" /> </Grid.ColumnDefinitions> <Rectangle x:Name="VerticalTrackRect" Fill="{TemplateBinding Background}" Width="{ThemeResource SliderTrackThemeHeight}" Grid.Column="1" Grid.RowSpan="3" /> <Rectangle x:Name="VerticalDecreaseRect" Fill="{TemplateBinding Foreground}" Grid.Column="1" Grid.Row="2" /> <TickBar x:Name="LeftTickBar" Visibility="Collapsed" Fill="{ThemeResource SliderTickBarFill}" Width="{ThemeResource SliderOutsideTickBarThemeHeight}" HorizontalAlignment="Right" Margin="0,0,4,0" Grid.RowSpan="3" /> <TickBar x:Name="VerticalInlineTickBar" Visibility="Collapsed" Fill="{ThemeResource SliderInlineTickBarFill}" Width="{ThemeResource SliderTrackThemeHeight}" Grid.Column="1" Grid.RowSpan="3" /> <TickBar x:Name="RightTickBar" Visibility="Collapsed" Fill="{ThemeResource SliderTickBarFill}" Width="{ThemeResource SliderOutsideTickBarThemeHeight}" HorizontalAlignment="Left" Margin="4,0,0,0" Grid.Column="2" Grid.RowSpan="3" /> <Thumb x:Name="VerticalThumb" Style="{StaticResource SliderThumbStyle}" DataContext="{TemplateBinding Value}" Width="24" Height="8" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" FocusVisualMargin="-6,-14,-6,-14" AutomationProperties.AccessibilityView="Raw" /> </Grid> </Grid> </Grid> </ControlTemplate>

3. 在刚添加的“ControlTemplate” 中，查找名为 “HorizontalTemplate”的网格控件。此网格定义我们想要更改的模板部分。

   <Grid x:Name="HorizontalTemplate" MinHeight="44"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="18" /> <RowDefinition Height="Auto" /> <RowDefinition Height="18" /> </Grid.RowDefinitions>

4. 创建一个多边形，此多边形就像你在第 1 部分中为曝光滑块创建的多边形一样。 在右“Grid.RowDefinitions”标记后面添加多边形。 将“Grid.Row”设置为“0”，将“Grid.RowSpan”设置为“3”，并将“Grid.ColumnSpan”设置为“3”。

   之前

   <Grid x:Name="HorizontalTemplate" MinHeight="44"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="18" /> <RowDefinition Height="Auto" /> <RowDefinition Height="18" /> </Grid.RowDefinitions>

   之后

   <Grid x:Name="HorizontalTemplate" MinHeight="44"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="18" /> <RowDefinition Height="Auto" /> <RowDefinition Height="18" /> </Grid.RowDefinitions> <Polygon Grid.Row="0" Grid.RowSpan="3" Grid.ColumnSpan="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="Black" /> <GradientStop Offset="1" Color="White" /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Polygon.Fill> </Polygon>

5. 删除“Polygon.Fill”设置。 将“Fill”设置为“{TemplateBinding Background}”。 这样，设置滑块的“Background”属性时便会设置多边形的“Fill”属性。

   之前

   <Polygon Grid.Row="0" Grid.RowSpan="3" Grid.ColumnSpan="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="Black" /> <GradientStop Offset="1" Color="White" /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Polygon.Fill> </Polygon>

   之后

   <Polygon Grid.Row="0" Grid.RowSpan="3" Grid.ColumnSpan="3" Stretch="Fill" Points="0,20 200,20 200,0" HorizontalAlignment="Stretch" VerticalAlignment="Center" Height="20" Fill="{TemplateBinding Background}"> </Polygon>

6. 在我们添加的多边形后面，有一个名为“HorizontalTrackRect”的矩形。删除此矩形的“Fill”设置，以便矩形将不可见并且不会阻碍我们的多边形。（我们不想完全删除矩形，因为控件模板还会将其用于交互视觉对象，如悬停。）

   之前

   <Rectangle x:Name="HorizontalTrackRect" Fill="{TemplateBinding Background}" Height="{ThemeResource SliderTrackThemeHeight}" Grid.Row="1" Grid.ColumnSpan="3" />

   之后

   <Rectangle x:Name="HorizontalTrackRect" Height="{ThemeResource SliderTrackThemeHeight}" Grid.Row="1" Grid.ColumnSpan="3" />

   至此，我们就完成了我们所需的模板，接下来就将其应用于我们的滑块。

7. 更新曝光滑块
   • 将滑块的 “Template” 属性设置为“{StaticResource FancySliderControlTemplate}”。
   • 删除滑块的 Background="Transparent" 设置。
   • 将滑块的背景设置为从黑色过渡到白色的线性渐变。
   • 删除我们在第 1 部分中创建的背景多边形。

   之前

   <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" Background="Transparent" Foreground="Transparent" Value="{x:Bind item.Exposure, Mode=TwoWay}" Minimum="-2" Maximum="2" Template="{StaticResource FancySliderControlTemplate}"/>

   之后

   <Slider Header="Exposure" Grid.Row="2" Foreground="Transparent" Value="{x:Bind item.Exposure, Mode=TwoWay}" Minimum="-2" Maximum="2" Template="{StaticResource FancySliderControlTemplate}"> <Slider.Background> <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5"> <LinearGradientBrush.GradientStops> <GradientStop Offset="0" Color="Black" /> <GradientStop Offset="1" Color="White" /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Slider.Background> </Slider>

8. 对温度滑块进行更新。

   之前

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

   之后

   <Slider Header="Temperature" Grid.Row="3" Foreground="Transparent" Value="{x:Bind item.Temperature, Mode=TwoWay}" Minimum="-1" Maximum="1" Template="{StaticResource FancySliderControlTemplate}"> <Slider.Background> <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5"> <LinearGradientBrush.GradientStops> <GradientStop Offset="0" Color="Blue" /> <GradientStop Offset="1" Color="Yellow" /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Slider.Background> </Slider>

9. 对色调滑块进行更新。

   之前

   <Polygon Grid.Row="4" 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="Red" /> <GradientStop Offset="1" Color="Green" /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Polygon.Fill> </Polygon> <Slider Header="Tint" Grid.Row="4" Background="Transparent" Foreground="Transparent" Value="{x:Bind item.Tint, Mode=TwoWay}" Minimum="-1" Maximum="1" />

   之后

   <Slider Header="Tint" Grid.Row="4" Foreground="Transparent" Value="{x:Bind item.Tint, Mode=TwoWay}" Minimum="-1" Maximum="1" Template="{StaticResource FancySliderControlTemplate}"> <Slider.Background> <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5"> <LinearGradientBrush.GradientStops> <GradientStop Offset="0" Color="Red" /> <GradientStop Offset="1" Color="Green" /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Slider.Background> </Slider>

10. 编译并运行应用。

    

那么，现在我们就完成了第3部分的教程内容，我们就基本掌握了在Visual Studio中创建自定义样式的方法，创如果你遇到困难或者想要 Visual Studio其他相关教程，记得关注收藏我们哦~