Question

我想使用如所附图片所示的滑块。但是我不知道如何设置。我的意思是左边是蓝色，右边是灰色。滑点是圆形等。

谢谢！

Answer 1

根据您的要求，您需要自定义滑块样式。滑块的指示器为Thumb，如果使用水平滑块，则匹配的指示器为HorizontalThumb。我已经创建了可以直接使用的完整样式。

<SolidColorBrush x:Key="SliderTrackValueFill" Color="Blue" />
<SolidColorBrush x:Key="SliderTrackValueFillPressed" Color="Blue" />
<SolidColorBrush x:Key="SliderTrackValueFillDisabled" Color="Blue" />
<SolidColorBrush x:Key="SliderTrackValueFillPointerOver" Color="Blue" />


<Style x:Key="SliderStyle1" TargetType="Slider">
    <Setter Property="Background" Value="{ThemeResource SliderTrackFill}" />
    <Setter Property="BorderThickness" Value="{ThemeResource SliderBorderThemeThickness}" />
    <Setter Property="Foreground" Value="{ThemeResource SliderTrackValueFill}" />
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
    <Setter Property="ManipulationMode" Value="None" />
    <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
    <Setter Property="FocusVisualMargin" Value="-7,0,-7,0" />
    <Setter Property="IsFocusEngagementEnabled" Value="True" />

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Slider">
                <Grid Margin="{TemplateBinding Padding}">
                    <Grid.Resources>
                        <Style x:Key="SliderThumbStyle" TargetType="Thumb">
                            <Setter Property="BorderThickness" Value="0" />
                            <Setter Property="Background" Value="{ThemeResource SliderThumbBackground}" />
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="Thumb">
                                        <Border
                                            Background="Blue"
                                            BorderBrush="{TemplateBinding BorderBrush}"
                                            BorderThickness="{TemplateBinding BorderThickness}"
                                            CornerRadius="20"
                                            />
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </Grid.Resources>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <ContentPresenter
                        x:Name="HeaderContentPresenter"
                        Grid.Row="0"
                        Margin="{ThemeResource SliderTopHeaderMargin}"
                        x:DeferLoadStrategy="Lazy"
                        Content="{TemplateBinding Header}"
                        ContentTemplate="{TemplateBinding HeaderTemplate}"
                        FontWeight="{ThemeResource SliderHeaderThemeFontWeight}"
                        Foreground="{ThemeResource SliderHeaderForeground}"
                        TextWrapping="Wrap"
                        Visibility="Collapsed"
                        />
                    <Grid
                        x:Name="SliderContainer"
                        Grid.Row="1"
                        Background="{ThemeResource SliderContainerBackground}"
                        Control.IsTemplateFocusTarget="True"
                        >
                        <Grid x:Name="HorizontalTemplate" MinHeight="{ThemeResource SliderHorizontalHeight}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="{ThemeResource SliderPreContentMargin}" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="{ThemeResource SliderPostContentMargin}" />
                            </Grid.RowDefinitions>
                            <Rectangle
                                x:Name="HorizontalTrackRect"
                                Grid.Row="1"
                                Grid.ColumnSpan="3"
                                Height="{ThemeResource SliderTrackThemeHeight}"
                                Fill="{TemplateBinding Background}"
                                />
                            <Rectangle
                                x:Name="HorizontalDecreaseRect"
                                Grid.Row="1"
                                Fill="{TemplateBinding Foreground}"
                                />
                            <TickBar
                                x:Name="TopTickBar"
                                Grid.ColumnSpan="3"
                                Height="{ThemeResource SliderOutsideTickBarThemeHeight}"
                                Margin="0,0,0,4"
                                VerticalAlignment="Bottom"
                                Fill="{ThemeResource SliderTickBarFill}"
                                Visibility="Collapsed"
                                />
                            <TickBar
                                x:Name="HorizontalInlineTickBar"
                                Grid.Row="1"
                                Grid.ColumnSpan="3"
                                Height="{ThemeResource SliderTrackThemeHeight}"
                                Fill="{ThemeResource SliderInlineTickBarFill}"
                                Visibility="Collapsed"
                                />
                            <TickBar
                                x:Name="BottomTickBar"
                                Grid.Row="2"
                                Grid.ColumnSpan="3"
                                Height="{ThemeResource SliderOutsideTickBarThemeHeight}"
                                Margin="0,4,0,0"
                                VerticalAlignment="Top"
                                Fill="{ThemeResource SliderTickBarFill}"
                                Visibility="Collapsed"
                                />
                            <Thumb
                                x:Name="HorizontalThumb"
                                Grid.Row="0"
                                Grid.RowSpan="3"
                                Grid.Column="1"
                                Width="20"
                                Height="20"
                                AutomationProperties.AccessibilityView="Raw"
                                DataContext="{TemplateBinding Value}"
                                FocusVisualMargin="-14,-6,-14,-6"
                                Style="{StaticResource SliderThumbStyle}"
                                />
                        </Grid>
                        <Grid
                            x:Name="VerticalTemplate"
                            MinWidth="{ThemeResource SliderVerticalWidth}"
                            Visibility="Collapsed"
                            >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="{ThemeResource SliderPreContentMargin}" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="{ThemeResource SliderPostContentMargin}" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Rectangle
                                x:Name="VerticalTrackRect"
                                Grid.RowSpan="3"
                                Grid.Column="1"
                                Width="{ThemeResource SliderTrackThemeHeight}"
                                Fill="{TemplateBinding Background}"
                                />
                            <Rectangle
                                x:Name="VerticalDecreaseRect"
                                Grid.Row="2"
                                Grid.Column="1"
                                Fill="{TemplateBinding Foreground}"
                                />
                            <TickBar
                                x:Name="LeftTickBar"
                                Grid.RowSpan="3"
                                Width="{ThemeResource SliderOutsideTickBarThemeHeight}"
                                Margin="0,0,4,0"
                                HorizontalAlignment="Right"
                                Fill="{ThemeResource SliderTickBarFill}"
                                Visibility="Collapsed"
                                />
                            <TickBar
                                x:Name="VerticalInlineTickBar"
                                Grid.RowSpan="3"
                                Grid.Column="1"
                                Width="{ThemeResource SliderTrackThemeHeight}"
                                Fill="{ThemeResource SliderInlineTickBarFill}"
                                Visibility="Collapsed"
                                />
                            <TickBar
                                x:Name="RightTickBar"
                                Grid.RowSpan="3"
                                Grid.Column="2"
                                Width="{ThemeResource SliderOutsideTickBarThemeHeight}"
                                Margin="4,0,0,0"
                                HorizontalAlignment="Left"
                                Fill="{ThemeResource SliderTickBarFill}"
                                Visibility="Collapsed"
                                />
                            <Thumb
                                x:Name="VerticalThumb"
                                Grid.Row="1"
                                Grid.Column="0"
                                Grid.ColumnSpan="3"
                                Width="24"
                                Height="8"
                                AutomationProperties.AccessibilityView="Raw"
                                DataContext="{TemplateBinding Value}"
                                FocusVisualMargin="-6,-14,-6,-14"
                                Style="{StaticResource SliderThumbStyle}"
                                />
                        </Grid>
                    </Grid>
                    <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>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

如何制作这样的UWP滑块样式？

1 个答案: