图像为 Thumb 的自定义 WPF 滑块 [英] Custom WPF Slider with image as Thumb

查看：33
本文介绍了图像为 Thumb 的自定义 WPF 滑块的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何以如下图的方式为 WPF 设置 Slider 控件的样式:

任何类似的样品将不胜感激.

我试过下面的代码

 <Style x:Key="SliderThumbStyle" TargetType="Thumb"><Setter Property="SnapsToDevicePixels" Value="true"/><Setter Property="OverridesDefaultStyle" Value="false"/><Setter 属性="高度" 值="18"/><Setter 属性="宽度" 值="18"/><Setter 属性="模板"><Setter.Value><ControlTemplate TargetType="Thumb"><椭圆描边=黑色"行程厚度=1"名称="椭圆"填充="橙红"/><ControlTemplate.Triggers><触发属性="IsMouseOver" 值="True"><Setter TargetName="Ellipse" Property="Fill" Value="Orange"/></触发器><触发器属性="IsEnabled" 值="false"><Setter TargetName="Ellipse" Property="Fill" Value="Gray"/></触发器></ControlTemplate.Triggers></控制模板></Setter.Value></二传手></风格><Style TargetType="Slider" x:Key="AppSliderStyle"><Setter Property="OverridesDefaultStyle" Value="true"/><Setter 属性="模板"><Setter.Value><ControlTemplate TargetType="滑块"><网格><Grid.RowDefinitions><行定义高度=自动"/><行定义高度=自动"名称=行"/><行定义高度=自动"/></Grid.RowDefinitions><Grid.ColumnDefinitions><列定义宽度=自动"/><ColumnDefinition Width="*" Name="column"/><列定义宽度=自动"/></Grid.ColumnDefinitions><边框名称="PART_Border"BorderBrush="黑色" BorderThickness="1"填充=2"Grid.Row="1" Grid.Column="1"宽度={模板绑定宽度}"高度="{模板绑定高度}"背景="绿黄"Horizo​​ntalAlignment="拉伸"VerticalAlignment="居中"/><曲目名称="PART_Track"Horizo​​ntalAlignment="拉伸"垂直对齐 =中心"Grid.Row="1" Grid.Column="1"宽度={模板绑定宽度}"高度="{模板绑定高度}"><Track.Thumb><Thumb Style="{StaticResource SliderThumbStyle}"/></Track.Thumb></跟踪></网格></控制模板></Setter.Value></二传手></风格>

它产生了这个:

我正在努力使左右两侧的颜色不同.我必须做出哪些改变才能做到这一点?

解决方案

类似例子:

WPF的跟踪栏/滑块模板p>

您需要编辑Both RepeatButton的样式

<Window.Resources><样式 x:Key="SliderRepeatButton" TargetType="RepeatButton"><Setter Property="SnapsToDevicePixels" Value="true"/><Setter Property="OverridesDefaultStyle" Value="true"/><Setter 属性="IsTabStop" 值="false"/><Setter Property="Focusable" Value="false"/><Setter 属性="模板"><Setter.Value><ControlTemplate TargetType="RepeatButton"><Border BorderThickness="1" BorderBrush="Black" Background="Black" Height="3"/></控制模板></Setter.Value></二传手></风格><样式 x:Key="SliderRepeatButton1" TargetType="RepeatButton"><Setter Property="SnapsToDevicePixels" Value="true"/><Setter Property="OverridesDefaultStyle" Value="true"/><Setter 属性="模板"><Setter.Value><ControlTemplate TargetType="RepeatButton"><Border SnapsToDevicePixels="True" Background="Green" BorderThickness="1" BorderBrush="YellowGreen" Height="3"/></控制模板></Setter.Value></二传手></风格><样式 x:Key="SliderThumb" TargetType="Thumb"><Setter Property="SnapsToDevicePixels" Value="true"/><Setter Property="OverridesDefaultStyle" Value="true"/><Setter 属性="模板"><Setter.Value><ControlTemplate TargetType="Thumb"><椭圆高度=10"宽度=10"填充=绿色"></椭圆></控制模板></Setter.Value></二传手></风格><ControlTemplate x:Key="Slider" TargetType="Slider"><网格><Grid.RowDefinitions><行定义高度=自动"/><RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}"/><行定义高度=自动"/></Grid.RowDefinitions><Track Grid.Row="1" x:Name="PART_Track" ><Track.DecreaseRepeatButton><RepeatButton Style="{StaticResource SliderRepeatButton1}" Command="Slider.DecreaseLarge"/></Track.DecreaseRepeatButton><Track.Thumb><Thumb Style="{StaticResource SliderThumb}"/></Track.Thumb><Track.IncreaseRepeatButton><RepeatButton Style="{StaticResource SliderRepeatButton}" Command="Slider.IncreaseLarge"/></Track.IncreaseRepeatButton></跟踪></网格></控制模板><样式 x:Key="Horizo​​ntal_Slider" TargetType="Slider"><Setter Property="Focusable" Value="False"/><Setter Property="SnapsToDevicePixels" Value="true"/><Setter Property="OverridesDefaultStyle" Value="true"/><风格.触发器><触发属性="方向" 值="水平"><Setter 属性="MinHeight" 值="21"/><Setter 属性="MinWidth" 值="104"/><Setter Property="Template" Value="{StaticResource Slider}"/></触发器></Style.Triggers></风格></Window.Resources><Slider Style="{StaticResource Horizo​​ntal_Slider}" VerticalAlignment="Center" Value="500" Width="300" Margin="50,0,50,0"></Slider>

<块引用>

更新滑块缩略图

 <Style x:Key="SliderThumb" TargetType="Thumb"><Setter Property="SnapsToDevicePixels" Value="true"/><Setter Property="OverridesDefaultStyle" Value="true"/><Setter 属性="模板"><Setter.Value><ControlTemplate TargetType="Thumb"><椭圆高度=10"宽度=10"><椭圆.填充><ImageBrush ImageSource="Screenshot_5.png"></ImageBrush></椭圆.填充></椭圆></控制模板></Setter.Value></二传手></风格>

<块引用>

更新:带有鼠标悬停动画的滑块

您可以使用触发器添加鼠标悬停效果.

<Style x:Key="SliderThumb" TargetType="Thumb"><Setter Property="SnapsToDevicePixels" Value="true"/><Setter Property="OverridesDefaultStyle" Value="true"/><Setter 属性="模板"><Setter.Value><ControlTemplate TargetType="Thumb"><!--为椭圆添加名称以在控制模板触发器中使用--><椭圆 x:Name="Ellipse" Height="10" Width="10" Fill="Green"></Ellipse><ControlTemplate.Triggers><触发属性="IsMouseOver" 值="true"><Setter TargetName="Ellipse" Property="Fill" Value="Yellow"></Setter></触发器></ControlTemplate.Triggers></控制模板></Setter.Value></二传手></风格>

结果

How can I style a Slider control for WPF in a way like this figure:

Any similar samples would be appreciated.

I tried the below code 

  <Style x:Key="SliderThumbStyle" TargetType="Thumb">
        <Setter Property="SnapsToDevicePixels" Value="true"/>
        <Setter Property="OverridesDefaultStyle" Value="false"/>
        <Setter Property="Height" Value="18"/>
        <Setter Property="Width" Value="18"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Thumb">
                    <Ellipse  Stroke="Black"
                          StrokeThickness="1"
                          Name="Ellipse" 
                          Fill="OrangeRed" />
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="Ellipse" Property="Fill" Value="Orange"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter TargetName="Ellipse" Property="Fill" Value="Gray"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="Slider" x:Key="AppSliderStyle">
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Slider">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto" />
                            <RowDefinition Height="auto" Name="row" />
                            <RowDefinition Height="auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto" />
                            <ColumnDefinition Width="*" Name="column" />
                            <ColumnDefinition Width="auto" />
                        </Grid.ColumnDefinitions>
                        <Border Name="PART_Border"
                           BorderBrush="Black" BorderThickness="1"
                           Padding="2"
                          Grid.Row="1" Grid.Column="1"
                           Width="{TemplateBinding Width}"
                           Height="{TemplateBinding Height}"
                           Background="GreenYellow"
                           HorizontalAlignment="Stretch"
                           VerticalAlignment="Center" />
                        <Track Name="PART_Track"
                              HorizontalAlignment="Stretch"
                              VerticalAlignment="Center"
                              Grid.Row="1" Grid.Column="1"
                              Width="{TemplateBinding Width}"
                              Height="{TemplateBinding Height}">
                            <Track.Thumb>
                                <Thumb Style="{StaticResource SliderThumbStyle}" />
                            </Track.Thumb>
                        </Track>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

And it produced this :

I am struggling to make the color different on the left and right sides. What changes do I have to make to do that?

解决方案

Similar example :

Track bar /slider template for WPF

You need to edit style of Both RepeatButton 

<Window.Resources>

    <Style x:Key="SliderRepeatButton" TargetType="RepeatButton">
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="IsTabStop" Value="false" />
        <Setter Property="Focusable" Value="false" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RepeatButton">
                    <Border  BorderThickness="1" BorderBrush="Black" Background="Black" Height="3"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="SliderRepeatButton1" TargetType="RepeatButton">
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RepeatButton">
                    <Border SnapsToDevicePixels="True" Background="Green"  BorderThickness="1" BorderBrush="YellowGreen" Height="3"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="SliderThumb" TargetType="Thumb">
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Thumb">
                    <Ellipse Height="10" Width="10" Fill="Green"></Ellipse>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <ControlTemplate x:Key="Slider"  TargetType="Slider">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Track Grid.Row="1" x:Name="PART_Track"   >
                <Track.DecreaseRepeatButton>
                    <RepeatButton Style="{StaticResource SliderRepeatButton1}"  Command="Slider.DecreaseLarge" />
                </Track.DecreaseRepeatButton>
                <Track.Thumb>
                    <Thumb Style="{StaticResource SliderThumb}"  />
                </Track.Thumb>
                <Track.IncreaseRepeatButton>
                    <RepeatButton Style="{StaticResource SliderRepeatButton}" Command="Slider.IncreaseLarge" />
                </Track.IncreaseRepeatButton>
            </Track>
        </Grid>            
    </ControlTemplate>

    <Style x:Key="Horizontal_Slider" TargetType="Slider">
        <Setter Property="Focusable" Value="False"/>
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Style.Triggers>
            <Trigger Property="Orientation" Value="Horizontal">
                <Setter Property="MinHeight" Value="21" />
                <Setter Property="MinWidth" Value="104" />
                <Setter Property="Template" Value="{StaticResource Slider}" />
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

<Slider Style="{StaticResource Horizontal_Slider}" VerticalAlignment="Center"  Value="500" Width="300" Margin="50,0,50,0"></Slider>

Update slider thumb with image

   <Style x:Key="SliderThumb" TargetType="Thumb">
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Thumb">
                    <Ellipse Height="10" Width="10">
                        <Ellipse.Fill>
                            <ImageBrush ImageSource="Screenshot_5.png"></ImageBrush>
                        </Ellipse.Fill>
                    </Ellipse>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Update: slider thumb with Mouseover animation

You can add mouserover effect using triggers.

<Style x:Key="SliderThumb" TargetType="Thumb">
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Thumb">
                    <!--Add name to ellipse to use in  controltemplate triggers-->
                    <Ellipse x:Name="Ellipse" Height="10" Width="10" Fill="Green"></Ellipse>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter TargetName="Ellipse" Property="Fill" Value="Yellow"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Result

这篇关于图像为 Thumb 的自定义 WPF 滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆