搜索
搜索

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

Tom Xue 发表于 Dev
8
Tom Xue

我想使用像附加图片一样的滑块。但是不知道怎么设置。我的意思是左边的部分是蓝色的，右边的部分是灰色的。并且滑块点是圆形等。

谢谢！

在此处输入图片说明

Nico Zhu - MSFT

根据您的要求，您需要自定义滑块样式。滑块的指示符是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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何设置滑块的样式？

如何设置Material-UI滑块的样式

如何使像这样的滑块？

UWP滑块滑动后

径向滑块 UWP

如何制作浮动滑块？

如何制作滑块动画

UWP如何制作聚焦图像？

禁用后如何更改Material-UI滑块的拇指样式

如何使用 jQuery 中的滑块更改样式值

图标作为滑块 UWP 的拇指

如何在UWP的主从页面中更改页面按钮的样式

x：UWP中缺少类型-如何覆盖基本控件样式？

如何在UWP中为路径控制创建共享样式？

在 UWP 中，如何更改代码中的样式设置器？

如何快速制作垂直滑块？

如何设计这样的按钮样式

如何制作这样的数组

如何制作这样的按钮？

我怎样才能为容器制作这样的样式

如何设置HTML5范围输入的样式，使其在滑块前后具有不同的颜色？

当材质 ui 滑块有多个拇指时，如何独立设置每个拇指的样式？

UWP等效于WPF样式

uwp在样式中定义eventriggerbehavior

UWP XAML中的全局样式

UWP 数据透视项样式

UWP 滚动条样式

UWP滑块；隐藏顶部显示的值

UWP 从inkToolbarPenButton 中删除大小滑块

TOP 榜单

  1. 1

    UITableView的项目向下滚动后更改颜色，然后快速备份

  2. 2

    Linux的官方Adobe Flash存储库是否已过时？

  3. 3

    用日期数据透视表和日期顺序查询

  4. 4

    应用发明者仅从列表中选择一个随机项一次

  5. 5

    Mac OS X更新后的GRUB 2问题

  6. 6

    验证REST API参数

  7. 7

    Java Eclipse中的错误13，如何解决？

  8. 8

    带有错误“ where”条件的查询如何返回结果？

  9. 9

    ggplot：对齐多个分面图-所有大小不同的分面

  10. 10

    尝试反复更改屏幕上按钮的位置 - kotlin android studio

  11. 11

    如何从视图一次更新多行（ASP.NET - Core）

  12. 12

    计算数据帧中每行的NA

  13. 13

    蓝屏死机没有修复解决方案

  14. 14

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  15. 15

    离子动态工具栏背景色

  16. 16

    VB.net将2条特定行导出到DataGridView

  17. 17

    通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

  18. 18

    在Windows 7中无法删除文件（2）

  19. 19

    python中的boto3文件上传

  20. 20

    当我尝试下载 StanfordNLP en 模型时，出现错误

  21. 21

    Node.js中未捕获的异常错误，发生调用

热门标签

归档