WPF 基础控件之 Slider 样式

最新推荐文章于 2025-03-10 18:46:16 发布
最新推荐文章于 2025-03-10 18:46:16 发布
阅读量972 收藏
点赞数
文章标签： wpf qml html animation ehcache
原文链接：https://mp.weixin.qq.com/s?__biz=MzAwNTMxMzg1MA==&mid=2654090608&idx=5&sn=4e07996d73a07d3a39809ad0e6de70c5&chksm=80d81125b7af9833d67592a8b9ce27ac29d38d3d53b6ff0b1fb26678df2653d95e5bdee0c23c&scene=126&&sessionid=0
版权

其他基础控件

1.Window
2.Button
3.CheckBox
4.ComboBox
5.DataGrid
6.DatePicker
7.Expander
8.GroupBox
9.ListBox
10.ListView
11.Menu
12.PasswordBox
13.TextBox
14.RadioButton
15.ToggleButton

Slider  实现下面的效果

d25d10c0271ddad774aca051611d2030.png

1）Slider来实现动画；

  • Grid嵌套 Border并设置ScaleTransform ，当鼠标移入MouseOver 将ScaleTransform.ScaleX 与 ScaleTransform.ScaleY值To = 1.2 放大；

  • 当Orientation设置为Horizontal水平方向走SliderHorizontal；

  • 当Orientation设置为Vertical垂直方向走SliderVertical；

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:sys="clr-namespace:System;assembly=mscorlib">
    
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="../Themes/Basic/ControlBasic.xaml"/>
        <ResourceDictionary Source="../Themes/Basic/Animations.xaml"/>
    </ResourceDictionary.MergedDictionaries>
  
    <sys:Double x:Key="ThumbWidth">16</sys:Double>
    <sys:Double x:Key="ThumbCornerRadius">8</sys:Double>
    <sys:Double x:Key="RepeatButtonSize">5</sys:Double>
    
    <ControlTemplate x:Key="SliderThumbHorizontalTop" TargetType="{x:Type Thumb}">
        <Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center">
            <Border BorderBrush="{DynamicResource PrimaryPressedSolidColorBrush}" 
                    BorderThickness="2" Background="{DynamicResource BackgroundSolidColorBrush}"
                    SnapsToDevicePixels="True"
                    Height="{StaticResource ThumbWidth}" Width="{StaticResource ThumbWidth}" CornerRadius="8" Margin="-1,0,0,0"
                    Name="PART_Border" RenderTransformOrigin=".5,.5">
            </Border>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="RenderTransform" TargetName="PART_Border">
                    <Setter.Value>
                        <ScaleTransform  ScaleX="1.2" ScaleY="1.2"/>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
    <ControlTemplate x:Key="SliderThumbHorizontalBottom" TargetType="{x:Type Thumb}">
        <Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center">
            <Border BorderBrush="{DynamicResource PrimaryNormalSolidColorBrush}" 
                    BorderThickness="2" Background="{DynamicResource BackgroundSolidColorBrush}"
                    SnapsToDevicePixels="True"
                    Height="{StaticResource ThumbWidth}" Width="{StaticResource ThumbWidth}" CornerRadius="8" Margin="-1,0,0,0"
                    Name="PART_Border" RenderTransformOrigin=".5,.5">
            </Border>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="RenderTransform" TargetName="PART_Border">
                    <Setter.Value>
                        <ScaleTransform  ScaleX="1.2" ScaleY="1.2"/>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <ControlTemplate x:Key="SliderThumbHorizontal" TargetType="{x:Type Thumb}">
        <ControlTemplate.Resources>
            <!--<Storyboard x:Key="ThumbMouseOut">
                <DoubleAnimation Storyboard.TargetName="PART_Border"
                                 Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
                                 To="1" Duration="00:00:0.1"/>
                <DoubleAnimation Storyboard.TargetName="PART_Border"
                                 Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
                                 To="1" Duration="00:00:0.1"/>
            </Storyboard>-->
            <Storyboard x:Key="ThumbMouseOver">
                <DoubleAnimation Storyboard.TargetName="PART_Border"
                                 Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
                                 From="1"
                                 To="1.2" Duration="00:00:0.1"/>
                <DoubleAnimation Storyboard.TargetName="PART_Border"
                                 Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
                                 From="1"
                                 To="1.2" Duration="00:00:0.1"/>
            </Storyboard>
        </ControlTemplate.Resources>
        <Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center">
            <Border BorderBrush="{DynamicResource PrimaryNormalSolidColorBrush}" 
                    BorderThickness="2" Background="{DynamicResource WindowForegroundColorBrush}"
                    SnapsToDevicePixels="True"
                    Height="{StaticResource ThumbWidth}" Width="{StaticResource ThumbWidth}" CornerRadius="8" Margin="-1,0,0,0"
                    Name="PART_Border" RenderTransformOrigin=".5,.5">
                <Border.RenderTransform>
                    <ScaleTransform/>
                </Border.RenderTransform>
            </Border>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard x:Name="BeginStoryboard"  Storyboard="{StaticResource ThumbMouseOver}" />
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <StopStoryboard BeginStoryboardName="BeginStoryboard"/>
                    <!--<BeginStoryboard Storyboard="{StaticResource ThumbMouseOut}" />-->
                </Trigger.ExitActions>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <Style x:Key="RepeatButtonTransparent" TargetType="{x:Type RepeatButton}">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Focusable" Value="False"/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Rectangle Fill="{TemplateBinding Background}" 
                                   Height="{TemplateBinding Height}" 
                                   Width="{TemplateBinding Width}"/>
                    <!--<Border Background="{TemplateBinding Background}"
                            Height="{TemplateBinding Height}" 
                            Width="{TemplateBinding Width}"
                            CornerRadius="4,4,0,0"/>-->
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <ControlTemplate x:Key="SliderThumbHorizontalDefault" TargetType="{x:Type Thumb}">
        <Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center">
            <Border BorderBrush="{DynamicResource PrimaryNormalSolidColorBrush}" 
                    BorderThickness="2" Background="{DynamicResource BackgroundSolidColorBrush}"
                    SnapsToDevicePixels="True"
                    Height="{StaticResource ThumbWidth}" Width="{StaticResource ThumbWidth}" CornerRadius="8" Margin="-1,0,0,0"
                    Name="PART_Border" RenderTransformOrigin=".5,.5">
            </Border>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="RenderTransform" TargetName="PART_Border">
                    <Setter.Value>
                        <ScaleTransform  ScaleX="1.2" ScaleY="1.2"/>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
    <ControlTemplate x:Key="SliderHorizontal" TargetType="{x:Type Slider}">
        <Border x:Name="border"
                    BorderBrush="{TemplateBinding BorderBrush}" 
                    BorderThickness="{TemplateBinding BorderThickness}" 
                    Background="{TemplateBinding Background}" 
                    SnapsToDevicePixels="True"
                    Padding="2">
            <Grid>
                <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"/>
                <TickBar x:Name="BottomTick" Fill="{TemplateBinding Foreground}" Height="4" Margin="0,2,0,0" Placement="Bottom" Grid.Row="2" Visibility="Collapsed"/>
                <Border x:Name="TrackBackground" 
                        Height="6.0" 
                        Margin="5,0" 
                        Grid.Row="1" 
                        VerticalAlignment="center">
                    <Canvas Margin="-6,-1">
                        <Rectangle x:Name="PART_SelectionRange" 
                                       Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" 
                                       Height="4.0" Visibility="Hidden"/>
                    </Canvas>
                </Border>
                <Track x:Name="PART_Track" Grid.Row="1">
                    <Track.DecreaseRepeatButton>
                        <RepeatButton Command="{x:Static Slider.DecreaseLarge}" 
                                          Style="{DynamicResource RepeatButtonTransparent}" 
                                          Background="{DynamicResource PrimaryNormalSolidColorBrush}" 
                                          Height="{StaticResource RepeatButtonSize}"/>
                    </Track.DecreaseRepeatButton>
                    <Track.IncreaseRepeatButton>
                        <RepeatButton Command="{x:Static Slider.IncreaseLarge}" 
                                      Style="{StaticResource RepeatButtonTransparent}"
                                      Background="{DynamicResource LightSolidColorBrush}" 
                                      Height="{StaticResource RepeatButtonSize}"/>
                    </Track.IncreaseRepeatButton>
                    <Track.Thumb>
                        <Thumb x:Name="Thumb" Focusable="False" 
                                   OverridesDefaultStyle="True" 
                                   Template="{StaticResource SliderThumbHorizontal}" 
                                   VerticalAlignment="Center"/>
                    </Track.Thumb>
                </Track>
            </Grid>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="TickPlacement" Value="TopLeft">
                <Setter Property="Visibility" TargetName="TopTick" Value="Visible"/>
                <Setter Property="Template" TargetName="Thumb" Value="{StaticResource SliderThumbHorizontal}"/>
                <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="Thumb" Value="{StaticResource SliderThumbHorizontal}"/>
                <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="Thumb" Value="{DynamicResource PrimaryNormalSolidColorBrush}"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
    <ControlTemplate x:Key="SliderThumbVerticalLeft" TargetType="{x:Type Thumb}">
        <Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center">
            <Border BorderBrush="{DynamicResource PrimaryNormalSolidColorBrush}" 
                    BorderThickness="2" Background="{DynamicResource BackgroundSolidColorBrush}"
                    SnapsToDevicePixels="True" UseLayoutRounding="True"
                    Height="{StaticResource ThumbWidth}" Width="{StaticResource ThumbWidth}" CornerRadius="8"
                    Name="PART_Border" RenderTransformOrigin=".5,.5">
            </Border>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="RenderTransform" TargetName="PART_Border">
                    <Setter.Value>
                        <ScaleTransform  ScaleX="1.2" ScaleY="1.2"/>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
    <ControlTemplate x:Key="SliderThumbVerticalRight" TargetType="{x:Type Thumb}">
        <Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center">
            <Border BorderBrush="{DynamicResource PrimaryNormalSolidColorBrush}" 
                    BorderThickness="2" Background="{DynamicResource BackgroundSolidColorBrush}"
                    SnapsToDevicePixels="True"
                    Height="{StaticResource ThumbWidth}" Width="{StaticResource ThumbWidth}" CornerRadius="8"
                    Name="PART_Border" RenderTransformOrigin=".5,.5">
            </Border>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="RenderTransform" TargetName="PART_Border">
                    <Setter.Value>
                        <ScaleTransform  ScaleX="1.2" ScaleY="1.2"/>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
    <ControlTemplate x:Key="SliderThumbVerticalDefault" TargetType="{x:Type Thumb}">
        <Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center">
            <Border BorderBrush="{DynamicResource PrimaryNormalSolidColorBrush}" 
                    BorderThickness="2" Background="{DynamicResource BackgroundSolidColorBrush}" 
                    SnapsToDevicePixels="True" UseLayoutRounding="True"
                    Height="{StaticResource ThumbWidth}" Width="{StaticResource ThumbWidth}" CornerRadius="8" Margin="0,0,0,-1"
                    Name="PART_Border" RenderTransformOrigin=".5,.5">
            </Border>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="RenderTransform" TargetName="PART_Border">
                    <Setter.Value>
                        <ScaleTransform  ScaleX="1.2" ScaleY="1.2"/>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <ControlTemplate x:Key="SliderThumbVertical" TargetType="{x:Type Thumb}">
        <ControlTemplate.Resources>
            <!--<Storyboard x:Key="ThumbMouseOut">
                <DoubleAnimation Storyboard.TargetName="PART_Border"
                                 Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
                                 To="1" Duration="00:00:0.1"/>
                <DoubleAnimation Storyboard.TargetName="PART_Border"
                                 Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
                                 To="1" Duration="00:00:0.1"/>
            </Storyboard>-->
            <Storyboard x:Key="ThumbMouseOver">
                <DoubleAnimation Storyboard.TargetName="PART_Border"
                                 Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
                                 From="1"
                                 To="1.2" Duration="00:00:0.1"/>
                <DoubleAnimation Storyboard.TargetName="PART_Border"
                                 Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
                                 From="1"
                                 To="1.2" Duration="00:00:0.1"/>
            </Storyboard>
        </ControlTemplate.Resources>
        <Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center">
            <Border BorderBrush="{DynamicResource PrimaryNormalSolidColorBrush}" 
                    BorderThickness="2" Background="{DynamicResource BackgroundSolidColorBrush}" 
                    SnapsToDevicePixels="True" UseLayoutRounding="True"
                    Height="{StaticResource ThumbWidth}" Width="{StaticResource ThumbWidth}" CornerRadius="8" Margin="0,0,0,-1"
                    Name="PART_Border" RenderTransformOrigin=".5,.5">
                <Border.RenderTransform>
                    <ScaleTransform/>
                </Border.RenderTransform>
            </Border>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard x:Name="BeginStoryboard" Storyboard="{StaticResource ThumbMouseOver}" />
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <StopStoryboard BeginStoryboardName="BeginStoryboard"/>
                    <!--<BeginStoryboard Storyboard="{StaticResource ThumbMouseOut}" />-->
                </Trigger.ExitActions>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
    
    
    <ControlTemplate x:Key="SliderVertical" TargetType="{x:Type Slider}">
        <Border x:Name="border" 
                    BorderBrush="{TemplateBinding BorderBrush}" 
                    BorderThickness="{TemplateBinding BorderThickness}" 
                    Background="{TemplateBinding Background}" 
                    SnapsToDevicePixels="True"
                    Padding="2">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition MinWidth="{TemplateBinding MinWidth}" Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <TickBar x:Name="TopTick" Grid.Column="0" Fill="{TemplateBinding Foreground}" Margin="0,0,2,0" Placement="Left" Visibility="Collapsed" Width="4"/>
                <TickBar x:Name="BottomTick" Grid.Column="2" Fill="{TemplateBinding Foreground}" Margin="2,0,0,0" Placement="Right" Visibility="Collapsed" Width="4"/>
                <Border x:Name="TrackBackground" 
                        HorizontalAlignment="center" 
                        Margin="0,5"
                        Width="6.0">
                    <Canvas Margin="-1,-6">
                        <Rectangle x:Name="PART_SelectionRange" 
                                   Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" 
                                   Visibility="Hidden" Width="4.0"/>
                    </Canvas>
                </Border>
                <Track x:Name="PART_Track" Grid.Column="1">
                    <Track.DecreaseRepeatButton>
                        <RepeatButton Command="{x:Static Slider.DecreaseLarge}"
                                          Style="{StaticResource RepeatButtonTransparent}"
                                          Background="{DynamicResource PrimaryNormalSolidColorBrush}" 
                                          Width="{StaticResource RepeatButtonSize}"/>
                    </Track.DecreaseRepeatButton>
                    <Track.IncreaseRepeatButton>
                        <RepeatButton Command="{x:Static Slider.IncreaseLarge}" 
                                          Style="{StaticResource RepeatButtonTransparent}"
                                          Background="{DynamicResource LightSolidColorBrush}" 
                                          Width="{StaticResource RepeatButtonSize}"/>
                    </Track.IncreaseRepeatButton>
                    <Track.Thumb>
                        <Thumb x:Name="Thumb" Focusable="False" 
                                   OverridesDefaultStyle="True" 
                                   Template="{StaticResource SliderThumbVertical}" 
                                   VerticalAlignment="Top"/>
                    </Track.Thumb>
                </Track>
            </Grid>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="TickPlacement" Value="TopLeft">
                <Setter Property="Visibility" TargetName="TopTick" Value="Visible"/>
                <Setter Property="Template" TargetName="Thumb" Value="{StaticResource SliderThumbVertical}"/>
                <Setter Property="Margin" TargetName="TrackBackground" Value="2,5,0,5"/>
            </Trigger>
            <Trigger Property="TickPlacement" Value="BottomRight">
                <Setter Property="Visibility" TargetName="BottomTick" Value="Visible"/>
                <Setter Property="Template" TargetName="Thumb" Value="{StaticResource SliderThumbVertical}"/>
                <Setter Property="Margin" TargetName="TrackBackground" Value="0,5,2,5"/>
            </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>
        </ControlTemplate.Triggers>
    </ControlTemplate>
    <Style TargetType="{x:Type Slider}" BasedOn="{StaticResource ControlBasicStyle}">
        <Setter Property="Stylus.IsPressAndHoldEnabled" Value="False"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="Foreground" Value="{DynamicResource PrimaryNormalSolidColorBrush}"/>
        <Setter Property="Template" Value="{StaticResource SliderHorizontal}"/>
        <Style.Triggers>
            <Trigger Property="Orientation" Value="Vertical">
                <Setter Property="Template" Value="{StaticResource SliderVertical}"/>
            </Trigger>
            <!--<Trigger Property="IsEnabled" Value="False">
                <Setter Property="Opacity" Value="{StaticResource EnabledOpacity}" />
            </Trigger>-->
        </Style.Triggers>
    </Style>

</ResourceDictionary>

2）Styles.Slider.xaml 代码如下；

<WrapPanel Margin="0,10">
           <Slider Width="200"/>
                    <Slider Width="200" Value="50" Maximum="100"  Margin="10,0"/>
                    <Slider Width="200" Value="50" Maximum="100" IsEnabled="False"/>
 </WrapPanel>

Nuget[1]Install-Package WPFDevelopers.Minimal

06427f713a147ec038891624927c754b.gif

[2][3]

参考资料

[1]

Nuget: https://www.nuget.org/packages/WPFDevelopers.Minimal/

[2]

GitHub: https://github.com/WPFDevelopersOrg

[3]

Gitee: https://gitee.com/WPFDevelopersOrg

WPF Slider滑动条的颜色修改
dianguachen3172的博客
08-01 1056
效果如下： 鄙人虽然开发WPF有些时间，但之前一直是一些简单Template和Style改改之类的工作，并没有深入研究过。此次为了完成工作，首先也是网上搜了半天，没有找到合适的代码直接拷贝（搜索能力待提高），干脆就直接静下心来琢磨琢磨。 一开始在界面上就放了Slider，挠挠头，怎么修改Template才能达到效果呢？后来想到了Blend，之前一直听说很强大的界面设计工具，但是一...
【WPF】WPF Slider 控件自定义样式
qq_37284394的博客
04-17 1690
WPF Slider 控件自定义样式 本文通过改写Slider 控件默认模板，实现自定义样式 一、创建Slider控件 提示：根据需要自行调整大小和位置 <Slider HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top" Width="526" Height="55"/> 二、生成默认模板 1. 选中控件，右击选择“编辑模板”->“编辑副本”，并确定 2. 完成后会生成如下代码 提示：本文只针对水平S
WPF Slider 样式
weixin_45884724的博客
01-04 463
WPF Slider样式
【WPF】Slider滑动方法（INotifyPropertyChanged、ValueChanged ）响应速度对比分析
最新发布
wangnaisheng的专栏
03-10 909
【WPF】Slider滑动方法（INotifyPropertyChanged、ValueChanged ）响应速度对比分析
WPF滑块控件(Slider)的自定义样式
weixin_30470857的博客
08-01 835
前言 每次开发滑块控件的样式都要花很久去读样式代码，感觉有点记不牢，所以特此备忘。 自定义滑块样式 首先创建项目，添加Slider控件。 然后获取Slider的Window样式，如下图操作。 然后弹出界面如下.我们点击确定。 点击确定后，我们的页面的Resources中，增加了一系列样式代码，而滑块代码会被修改为如下样子： <Slider HorizontalAli...
wpf精简风Slider样式资源文件
11-05
精简风的Slider，下载后请修改命名空间，并在App.xaml中引用该资源，可直接在页面中添加
WPF 快速了解并实现美观的Slider自定义控件-Slider详解-示例-效果
08-19
本文源码
WPF 快速了解并实现美观的Slider自定义控件|Slider详解|示例|效果
qq_42399932的博客
08-19 2255
本文深入探讨了WPF中Slider控件的自定义技巧，从基本构造到高级视觉效果的实现。首先，展示了进度条的动态效果，随后详细描述了如何设置Slider的Thumb样式和刻度展示。介绍了Slider的核心属性如Value、Minimum、Maximum，并提供了XML示例代码。文章还解释了如何自定义Track和Thumb，并通过代码示例展示了Thumb在不同状态下的视觉效果。此外，探讨了TickBar的自定义方法和两种自定义刻度显示效果的技术。
WPF自定义进度条控件和slider 滑块控件
03-25
总之，WPF提供的强大样式和模板功能使得自定义`ProgressBar`和`Slider`变得容易且有趣。通过自定义这些控件，不仅可以满足设计需求，还能提升应用的整体用户体验。对WPF样式系统的深入理解和实践，对于任何希望在WPF...
WPF：Slider样式
weixin_34413065的博客
11-22 1671
简述    WPF中Slider分为三部分，滑块类型为Thumb；进度条类型为RepeatButton，其中：位于滑块左侧或下侧部分为DecreaseRepeatButton，位于滑块右侧或上侧部分为IncreaseRepeatButton。   设置Slider样式时，一般单独设置三部分的样式(Style)，然后在Sldier的样式(Style)中引用它们。 代码示例 <Style Tar...
wpf slider（滑块随时间滑动） 时间轴
11-05
WPF，Slider的应用，将滑动条作为时间轴，随时间滑动。 下载次数越多所需积分越高，不定期改低积分。
WPF 控件专题 Slider样式模板
^@^lemon tea^@^
08-08 774
WPF 控件专题 Slider样式模板改写
WPF Slider Styles
YouyoMei的博客
05-31 722
WPF Slider Styles 第一种样式- <Style x:Key="SliderRepeatButtonStyle" TargetType="{x:Type RepeatButton}"> <Setter Property="OverridesDefaultStyle" Value="true"/> <Setter Property="IsTabStop" Value="false"/> <Sett
WPF 控件专题 Slider样式模板二
^@^lemon tea^@^
09-18 739
WPF Slider样式模板二
继续聊WPF——Slider控件
kanwoerzi
11-21 882
Slider控件，讲行通俗一点就是我们很常见的滑块，控件的外观上显示一系例刻度值，并存在一个可以被拖动的滑块，用户可以通过拖动滑块来控制控件的值。 如下图所示，是Windows系统的音量调节滑块。 下图所示为QQ音频聊天设置窗口中的音量调节滑块。 这样，我们就以很直观的方式认识了Slider控件。 接下来看看该控件的构成： 然后，查看...
WPF Slider自定义
m0_48915942的博客
03-12 488
由于Slider可以变换方向，本文只用“SliderHorizontal”水平方向的模板。其余方向可以删除，或者自定义。2. RepeatButton: 在Thumb两侧，共有两个，左边单击减少，右边单击增加。在微软的官方文档上可以看见，Slider由几个部分组成。1. TickBar ：作为Slider的基底。3. Thumb：最上层可以滑动的滑块。要自定义样式，可以分别修改上述各个部分。2. Tick Marks: 刻度。4. Track: 滑块滑动的轨迹。一、自定义样式结果图。二、解析Slider。
wpf 开发中的slider控件
ldd909的专栏
11-16 9644
<br />因为项目需要，在学习wpf,在这期间在用slider时遇到了一些问题，现整理如下，<br />slider控件模糊阴影<br /><Slider.Effect>                <br />                <DropShadowEffect BlurRadius="5" Color="White" Opacity="0.7" ShadowDepth="7"/><br /> </Slider.Effect><br />slider控件value值默认为Double类型
WPF中自定义美观Slider控件的实现方法
总而言之，WPF中Slider控件的自定义实现是一个涉及XAML样式定义、C#后台逻辑以及用户交互设计的综合性任务。开发者通过掌握这些知识点，可以创建出既美观又实用的自定义Slider控件，从而提升整个应用程序的用户体验...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值