uwp中Slider控件外观style重写

    wpf可以对控件外观使用xaml重写模板,默认的外观在(Program Files)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP;SDK version>\Generic,如果你安装了win10SDK的话,如果没有可以在其他sdk中类似路径寻找。

对于Slider控件,简单的重写了一下style,瞬间让滑动条变得粗壮了许多,如下图所示:

    根据sdk模板对照修改是一个简单的办法。首先在xaml设计视图里面(不是代码),右键点击slider控件(其他控件也可以),选择编辑模板,就默认模板会自动填充在代码区,如果vs版本低的话可能需要按照上面的办法手动查看generic.xaml文件。

    对于slider小小改动一下,就成了上面图片的外观。


    <Style TargetType="Slider" x:Key="MySlider">
        <Setter Property="Background" Value="White" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="Foreground" Value="HotPink" />
        <Setter Property="FontFamily" Value="youyuan" />
        <Setter Property="FontSize" Value="30" />
        <Setter Property="ManipulationMode" Value="None" />
        <Setter Property="UseSystemFocusVisuals" Value="True" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Slider">
                    <Grid Margin="10">
                        <Grid.Resources>
                            <Style TargetType="Thumb" x:Key="SliderThumbStyle">
                                <Setter Property="BorderThickness" Value="0" />
                                <Setter Property="Background" Value="Plum" />
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="Thumb">
                                            <Border Background="Black" BorderBrush="Blue" BorderThickness="1" CornerRadius="0" />
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </Grid.Resources>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>

                       
                        <Grid x:Name="SliderContainer" Background="Transparent" 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="12" Grid.Row="1" Grid.ColumnSpan="3" />
                                <Rectangle x:Name="HorizontalDecreaseRect" Fill="{TemplateBinding Foreground}" Grid.Row="1" />
                                <TickBar x:Name="TopTickBar" Visibility="Collapsed" Fill="{ThemeResource SystemControlForegroundBaseMediumLowBrush}" Height="{ThemeResource SliderOutsideTickBarThemeHeight}" VerticalAlignment="Bottom" Margin="0,0,0,4" Grid.ColumnSpan="3" />
                                <TickBar x:Name="HorizontalInlineTickBar" Visibility="Collapsed" Fill="{ThemeResource SystemControlBackgroundAltHighBrush}" Height="{ThemeResource SliderTrackThemeHeight}" Grid.Row="1" Grid.ColumnSpan="3" />
                                <TickBar x:Name="BottomTickBar" Visibility="Collapsed" Fill="{ThemeResource SystemControlForegroundBaseMediumLowBrush}" Height="{ThemeResource SliderOutsideTickBarThemeHeight}" VerticalAlignment="Top" Margin="0,4,0,0" Grid.Row="2" Grid.ColumnSpan="3" />
                                <Thumb x:Name="HorizontalThumb" Background="Black" Style="{StaticResource SliderThumbStyle}" DataContext="{TemplateBinding Value}" Height="40" Width="15" Grid.Row="0" Grid.RowSpan="3" Grid.Column="1" 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 SystemControlForegroundBaseMediumLowBrush}" Width="{ThemeResource SliderOutsideTickBarThemeHeight}" HorizontalAlignment="Right" Margin="0,0,4,0" Grid.RowSpan="3" />
                                <TickBar x:Name="VerticalInlineTickBar" Visibility="Collapsed" Fill="{ThemeResource SystemControlBackgroundAltHighBrush}" Width="{ThemeResource SliderTrackThemeHeight}" Grid.Column="1" Grid.RowSpan="3" />
                                <TickBar x:Name="RightTickBar" Visibility="Collapsed" Fill="{ThemeResource SystemControlForegroundBaseMediumLowBrush}" Width="{ThemeResource SliderOutsideTickBarThemeHeight}" HorizontalAlignment="Left" Margin="4,0,0,0" Grid.Column="2" Grid.RowSpan="3" />
                                <Thumb x:Name="VerticalThumb" Background="{ThemeResource SystemControlForegroundAccentBrush}" Style="{StaticResource SliderThumbStyle}" DataContext="{TemplateBinding Value}" Width="24" Height="8" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" AutomationProperties.AccessibilityView="Raw" />
                            </Grid>
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>



备注:slider的其他引用资源

Resource key Description
SliderContainerBackground Background color at rest
SliderContainerBackgroundPointerOver Background color on hover
SliderContainerBackgroundPressed Background color when pressed
SliderContainerBackgroundDisabled Background color when disabled
SliderThumbBackground Background color of the thumb at rest
SliderThumbBackgroundPointerOver Background color of the thumb on hover
SliderThumbBackgroundPressed Background color of the thumb when pressed
SliderThumbBackgroundDisabled Background color of the thumb when disabled
SliderTrackFill Color of unfilled portion of track
SliderTrackFillPointerOver Color of unfilled portion of track on hover
SliderTrackFillPressed Color of unfilled portion of track when pressed
SliderTrackFillDisabled Color of unfilled portion of track when disabled
SliderTrackValueFill Color of filled portion of track
SliderTrackValueFillPointerOver Color of filled portion of track on hover
SliderTrackValueFillPressed Color of filled portion of track when pressed
SliderTrackValueFillDisabled Color of filled portion of track when disabled
SliderHeaderForeground Foreground color of the label
SliderHeaderForegroundDisabled Foreground color of the label when disabled
SliderTickBarFill Color of the tick marks
SliderTickBarFillDisabled Color of the tick marks when disabled
SliderInlineTickBarFill Color of inline tick marks


作者:songshizhao 发表于:2017-04-08T02:05:05 访问量:7742
评论 [发表评论]