WPF Slider样式,带颜色填充与值提示

最新推荐文章于 2024-03-12 11:14:41 发布
最新推荐文章于 2024-03-12 11:14:41 发布
阅读量1.3k 收藏 1
点赞数 3
分类专栏： C# Xaml 样式 文章标签： wpf xaml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JiesonLove/article/details/114363497
版权
Xaml 同时被 3 个专栏收录
7 篇文章 0 订阅
订阅专栏
C#
6 篇文章 0 订阅
订阅专栏
样式
3 篇文章 0 订阅
订阅专栏

 样式如下:

 

主要是下面标色的代码部分做修改,其它为标准模板(喜欢的点个赞)

<!--Slider-->
    <SolidColorBrush x:Key="SliderThumb.DecreaseColor" Color="#FF5258DC"/>
    <Style x:Key="FlatSilderStyle1" TargetType="{x:Type Slider}">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="Foreground" Value="#FFE5E5E5"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Slider}">
                    <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <Grid Grid.Column="0">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <TickBar x:Name="TopTick" Fill="{TemplateBinding Foreground}" Height="4" Margin="0,0,0,2" Placement="Top" Grid.Row="0" Visibility="Collapsed"/>
                                <Border x:Name="TrackBackground" BorderBrush="#FFD6D6D6" BorderThickness="1" Background="#FFE7EAEA" Height="3" Margin="5,0" Grid.Row="1" VerticalAlignment="Center">
                                    <Canvas Margin="-6,-1">
                                        <Rectangle x:Name="PART_SelectionRange" Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" Height="3" Visibility="Hidden"/>
                                    </Canvas>
                                </Border>
                                <Track x:Name="PART_Track" Grid.Row="1">
                                    <Track.DecreaseRepeatButton>
                                        <RepeatButton Command="Slider.DecreaseLarge">
                                            <RepeatButton.Style>
                                                <Style TargetType="{x:Type RepeatButton}">
                                                    <Setter Property="OverridesDefaultStyle" Value="True"/>
                                                    <Setter Property="Background" Value="{StaticResource SliderThumb.DecreaseColor}"/>
                                                    <Setter Property="Focusable" Value="False"/>
                                                    <Setter Property="IsTabStop" Value="False"/>
                                                    <Setter Property="Height" Value="3"/>
                                                    <Setter Property="Template">
                                                        <Setter.Value>
                                                            <ControlTemplate TargetType="{x:Type RepeatButton}">
                                                                <Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
                                                            </ControlTemplate>
                                                        </Setter.Value>
                                                    </Setter>
                                                </Style>
                                            </RepeatButton.Style>
                                        </RepeatButton>
                                    </Track.DecreaseRepeatButton>
                                    <Track.IncreaseRepeatButton>
                                        <RepeatButton  Command="Slider.IncreaseLarge">
                                            <RepeatButton.Style>
                                                <Style TargetType="{x:Type RepeatButton}">
                                                    <Setter Property="OverridesDefaultStyle" Value="True"/>
                                                    <!--<Setter Property="Background" Value="{TemplateBinding  BorderBrush}"/>-->
                                                    <Setter Property="Focusable" Value="False"/>
                                                    <Setter Property="IsTabStop" Value="False"/>
                                                    <Setter Property="Height" Value="3"/>
                                                    <Setter Property="Template">
                                                        <Setter.Value>
                                                            <ControlTemplate TargetType="{x:Type RepeatButton}">
                                                                <Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
                                                            </ControlTemplate>
                                                        </Setter.Value>
                                                    </Setter>
                                                </Style>
                                            </RepeatButton.Style>
                                        </RepeatButton>
                                    </Track.IncreaseRepeatButton>
                                    <Track.Thumb>
                                        <Thumb x:Name="PART_Thumb" Tag="5"  Focusable="False" HorizontalAlignment="Left" OverridesDefaultStyle="True" VerticalAlignment="Center">
                                            <Thumb.Template>
                                                <ControlTemplate TargetType="{x:Type Thumb}">
                                                    <Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center" Margin="-6,0,0,0">
                                                        <Grid.RowDefinitions>
                                                            <RowDefinition Height="Auto"/>
                                                            <RowDefinition Height="Auto"/>
                                                        </Grid.RowDefinitions>
                                                        <Ellipse x:Name="shadow" Fill="{StaticResource SliderThumb.DecreaseColor}" Height="25" Margin="-12" Opacity="0" Grid.Row="1" Width="25"/>
                                                        <Ellipse x:Name="grip" Fill="{StaticResource SliderThumb.DecreaseColor}" Height="13" Grid.Row="1" Width="13"/>
                                                        <TextBlock x:Name="ToolipText" Text="{Binding Value,RelativeSource={RelativeSource FindAncestor, AncestorLevel=1,AncestorType={x:Type Slider}}}"  Margin="0,-20,0,0" Foreground="{StaticResource SliderThumb.DecreaseColor}" Visibility="Hidden" HorizontalAlignment="Center"/>
                                                    </Grid>
                                                    <ControlTemplate.Triggers>
                                                        <Trigger Property="IsMouseOver" Value="True">
                                                            <Trigger.EnterActions>
                                                                <BeginStoryboard>
                                                                    <Storyboard>
                                                                        <DoubleAnimation Duration="0:0:0.2" To="0.26" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="shadow"/>
                                                                    </Storyboard>
                                                                </BeginStoryboard>
                                                            </Trigger.EnterActions>
                                                            <Trigger.ExitActions>
                                                                <BeginStoryboard>
                                                                    <Storyboard>
                                                                        <DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="shadow"/>
                                                                    </Storyboard>
                                                                </BeginStoryboard>
                                                            </Trigger.ExitActions>
                                                            <Setter Property="Visibility" TargetName="ToolipText" Value="Visible"/>
                                                        </Trigger>
                                                        <Trigger Property="IsDragging" Value="True"/>
                                                        <Trigger Property="IsEnabled" Value="False">
                                                            <Setter Property="Fill" TargetName="grip" Value="#FFF0F0F0"/>
                                                            <Setter Property="Stroke" TargetName="grip" Value="#FFD9D9D9"/>
                                                        </Trigger>
                                                    </ControlTemplate.Triggers>
                                                </ControlTemplate>
                                            </Thumb.Template>
                                        </Thumb>
                                    </Track.Thumb>
                                </Track>
                                <TickBar x:Name="BottomTick" Fill="{TemplateBinding Foreground}" Height="4" Margin="0,2,0,0" Placement="Bottom" Grid.Row="2" Visibility="Collapsed"/>
                            </Grid>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="TickPlacement" Value="TopLeft">
                            <Setter Property="Visibility" TargetName="TopTick" Value="Visible"/>
                            <Setter Property="Template" TargetName="PART_Thumb">
                                <Setter.Value>
                                    <ControlTemplate TargetType="{x:Type Thumb}">
                                        <Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center">
                                            <Path x:Name="grip" Data="M0,6C0,6 5.5,0 5.5,0 5.5,0 11,6 11,6 11,6 11,18 11,18 11,18 0,18 0,18 0,18 0,6 0,6z" Fill="#FFF0F0F0" Stretch="Fill" SnapsToDevicePixels="True" Stroke="#FFACACAC" StrokeThickness="1" UseLayoutRounding="True" VerticalAlignment="Center"/>
                                        </Grid>
                                        <ControlTemplate.Triggers>
                                            <Trigger Property="IsMouseOver" Value="True">
                                                <Setter Property="Fill" TargetName="grip" Value="#00DCECFC"/>
                                                <Setter Property="Stroke" TargetName="grip" Value="#FF7EB4EA"/>
                                            </Trigger>
                                            <Trigger Property="IsDragging" Value="True">
                                                <Setter Property="Fill" TargetName="grip" Value="#FFDAECFC"/>
                                                <Setter Property="Stroke" TargetName="grip" Value="#FF569DE5"/>
                                            </Trigger>
                                            <Trigger Property="IsEnabled" Value="False">
                                                <Setter Property="Fill" TargetName="grip" Value="#FFF0F0F0"/>
                                                <Setter Property="Stroke" TargetName="grip" Value="#FFD9D9D9"/>
                                            </Trigger>
                                        </ControlTemplate.Triggers>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="Margin" TargetName="TrackBackground" Value="5,2,5,0"/>
                        </Trigger>
                        <Trigger Property="TickPlacement" Value="BottomRight">
                            <Setter Property="Visibility" TargetName="BottomTick" Value="Visible"/>
                            <Setter Property="Template" TargetName="PART_Thumb">
                                <Setter.Value>
                                    <ControlTemplate TargetType="{x:Type Thumb}">
                                        <Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center">
                                            <Path x:Name="grip" Data="M0,12C0,12 5.5,18 5.5,18 5.5,18 11,12 11,12 11,12 11,0 11,0 11,0 0,0 0,0 0,0 0,12 0,12z" Fill="#FFF0F0F0" Stretch="Fill" SnapsToDevicePixels="True" Stroke="#FFACACAC" StrokeThickness="1" UseLayoutRounding="True" VerticalAlignment="Center"/>
                                        </Grid>
                                        <ControlTemplate.Triggers>
                                            <Trigger Property="IsMouseOver" Value="True">
                                                <Setter Property="Fill" TargetName="grip" Value="#00DCECFC"/>
                                                <Setter Property="Stroke" TargetName="grip" Value="#FF7EB4EA"/>
                                            </Trigger>
                                            <Trigger Property="IsDragging" Value="True">
                                                <Setter Property="Fill" TargetName="grip" Value="#FFDAECFC"/>
                                                <Setter Property="Stroke" TargetName="grip" Value="#FF569DE5"/>
                                            </Trigger>
                                            <Trigger Property="IsEnabled" Value="False">
                                                <Setter Property="Fill" TargetName="grip" Value="#FFF0F0F0"/>
                                                <Setter Property="Stroke" TargetName="grip" Value="#FFD9D9D9"/>
                                            </Trigger>
                                        </ControlTemplate.Triggers>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="Margin" TargetName="TrackBackground" Value="5,0,5,2"/>
                        </Trigger>
                        <Trigger Property="TickPlacement" Value="Both">
                            <Setter Property="Visibility" TargetName="TopTick" Value="Visible"/>
                            <Setter Property="Visibility" TargetName="BottomTick" Value="Visible"/>
                        </Trigger>
                        <Trigger Property="IsSelectionRangeEnabled" Value="True">
                            <Setter Property="Visibility" TargetName="PART_SelectionRange" Value="Visible"/>
                        </Trigger>
                        <Trigger Property="IsKeyboardFocused" Value="True">
                            <Setter Property="Foreground" TargetName="PART_Thumb" Value="Blue"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
      

JiesonLove
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
【WPF】WPF Slider 控件自定义样式
qq_37284394的博客
04-17 1520
WPF Slider 控件自定义样式 本文通过改写Slider 控件默认模板，实现自定义样式 一、创建Slider控件 提示：根据需要自行调整大小和位置 <Slider HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top" Width="526" Height="55"/> 二、生成默认模板 1. 选中控件，右击选择“编辑模板”->“编辑副本”，并确定 2. 完成后会生成如下代码 提示：本文只针对水平S
WPF中Slider控件的用法与详解
最新发布
Wangzhe910113的博客
04-17 1021
WPF中Slider控件的详细用法，与效果展示！
WPF滑块控件(Slider)的自定义样式
weixin_30470857的博客
08-01 732
前言 每次开发滑块控件的样式都要花很久去读样式代码，感觉有点记不牢，所以特此备忘。 自定义滑块样式 首先创建项目，添加Slider控件。 然后获取Slider的Window样式，如下图操作。 然后弹出界面如下.我们点击确定。 点击确定后，我们的页面的Resources中，增加了一系列样式代码，而滑块代码会被修改为如下样子： <Slider HorizontalAli...
WPF 基础控件之 Slider 样式
dotNET跨平台
06-07 877
其他基础控件1.Window2.Button3.CheckBox4.ComboBox5.DataGrid 6.DatePicker7.Expander8.GroupBox9.ListBox10.ListView11.Menu12.PasswordBox13.TextBox14.RadioButton15.ToggleButtonSlider 实现下面的效果1）Slide...
WPF Slider 样式
weixin_45884724的博客
01-04 393
WPF Slider样式
WPF 控件专题 Slider控件详解
^@^lemon tea^@^
08-05 3999
WPF 控件专题 Slider控件详解
WPF自定义进度条控件和slider 滑块控件
03-25
比如，你可以创建一个带有自定义指示器的`Slider`，当用户调整值时，指示器会显示当前值。`Slider`的`Value`属性同样可以绑定到数据源，以实现动态数据交互。 在实现这些自定义控件时，关键在于理解和使用WPF的模板...
wpf Slider 模板
05-11
在Windows Presentation Foundation（WPF）中，Slider是一个常用的控件，它允许用户通过滑动条来选择一个介于最小值和最大值之间的数值。在标准的WPF Slider控件中，虽然功能强大，但其外观和交互可能无法满足所有...
WPF WIn8样式滚动条和进度条
06-30
在Windows Presentation Foundation (WPF) 中，为应用程序创建与Windows 8风格相匹配的滚动条和进度条可以提升用户界面的现代感和一致性。本文将深入探讨如何在WPF项目中实现Windows 8样式的滚动条和进度条，并提供...
WPF各种控件样式大全
11-21
12. **Slider**: Slider提供一种通过拖动滑块来选择值的方式，样式可调整滑块、轨道和刻度线的颜色。 在WPF中，这些控件的样式通常存储在资源字典(ResourceDictionary)中，便于在整个应用程序中重用。通过使用...
WPF 控件专题 Slider样式模板二
^@^lemon tea^@^
09-18 538
WPF Slider样式模板二
wpf slider进度条的样式模板，带有进度颜色显示
weixin_30872867的博客
01-11 235
wpf slider进度条的样式模板，带有进度颜色显示 原文:wpf slider进度条的样式模板，带有进度颜色显示 版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wanlong360599336/art...
WPF学习（四）颜色设置（背景画刷和前景画刷）
Alina_catty的博客
07-01 2182
背景画刷和前景画刷 在WPF中，背景和前景分别使用Background和Foreground属性设置这两个区域（但非内容）的颜色。 这些属性使用的是更强大的对象：Brush对象。该对象为填充背景和前景内容提供了灵活性，可使用单一颜色（用SolidColorBrush画刷）或更特殊的颜色（如使用LinearGraidientBrush或TileBrush画刷）填充背景和前景。 1.用代码设置颜色 假...
在 WPF 为你的自定义控件添加属性
懒怠的小猫
10-07 2255
首先，在你的自定义控件类 (示例:以上代码简化了官方方法的流程，以便你不用再去额外输入不必要的参数，并提前对 sender 进行类型转换。此后，添加一个属性只需要添加以下代码即可，相比传统方法看起来会非常直观，非常省事。以上代码中，defaultValue 可以为 null，但使用 null 作为默认值必须声明泛型类型。
WPF Slider自定义
m0_48915942的博客
03-12 237
由于Slider可以变换方向，本文只用“SliderHorizontal”水平方向的模板。其余方向可以删除，或者自定义。2. RepeatButton: 在Thumb两侧，共有两个，左边单击减少，右边单击增加。在微软的官方文档上可以看见，Slider由几个部分组成。1. TickBar ：作为Slider的基底。3. Thumb：最上层可以滑动的滑块。要自定义样式，可以分别修改上述各个部分。2. Tick Marks: 刻度。4. Track: 滑块滑动的轨迹。一、自定义样式结果图。二、解析Slider。
WPF学习：Slider — 冒泡显示值
BeanGo的博客
02-17 954
WPF学习：Slider — 冒泡显示值
WPF的自定义播放进度条样式
FireGhost57的专栏
02-13 1991
&lt;!-- 资源：颜色 --&gt; &lt;SolidColorBrush x:Key="commonSlider_BrightColor" Color="#2ED6CC"/&gt; &lt;SolidColorBrush x:Key="playSlider_DarkColor" Color="#989A9A"/&gt;
wpf slider 不等分刻度值位置
06-09
WPF Slider控件默认是等分刻度值位置的，如果要实现不等分刻度值位置的Slider，可以通过自定义Slider的TickPlacement属性和TickFrequency属性来实现。 在XAML中，可以设置Slider的TickPlacement属性为“None”，...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值