那些遇到过的问题

如何在WPF中设置滑块控件的样式？

San*_*uys 3 wpf xaml slider styling

我想设置滑块控件的样式,以便可拖动拇指的高度设置为8像素.

在WPF中执行此操作的最简单方法是什么？

<Slider>
    <Slider.Style>
        <!-- which xaml here? -->
    </Slider.style>
</Slider>
Run Code Online (Sandbox Code Playgroud)

Rhy*_*hys 6

滑块控件有很多部分Thumb,RepeatButtons和一个Track.它是其中一个具有命名元素的控件,如PART_Track,由代码隐藏引用,以使其正常工作.一个很好的起点是使用Blend来帮助你.

启动一个新项目(或创建一个新窗口).在XAML窗口中添加以下内容:

<ScrollBar/>
Run Code Online (Sandbox Code Playgroud)

然后在Blend的设计窗口中右键单击控件并选择"编辑控件(模板)\编辑副本...".这将对标准控件模板进行反向工程.然后可以编辑它.

Blend输出是这样的: - 

    <LinearGradientBrush x:Key="VerticalScrollBarPageButtonNormal" EndPoint="1, 0" StartPoint="0, 0">
        <GradientStop Color="#EEEDE5" Offset="0"/>
        <GradientStop Color="#EEEDE5" Offset="0.05"/>
        <GradientStop Color="#F3F1EC" Offset="0.06"/>
        <GradientStop Color="#FEFEFE" Offset="0.94"/>
        <GradientStop Color="#EEEDE5" Offset="0.95"/>
        <GradientStop Color="#EEEDE5" Offset="1"/>
    </LinearGradientBrush>
    <Style x:Key="ScrollBarButton" TargetType="{x:Type RepeatButton}">
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="Focusable" Value="false"/>
        <Setter Property="IsTabStop" Value="false"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Microsoft_Windows_Themes:ScrollChrome SnapsToDevicePixels="true" x:Name="Chrome" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="{TemplateBinding Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph}" ThemeColor="Metallic"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <LinearGradientBrush x:Key="VerticalScrollBarPageButtonPressed" EndPoint="1, 0" StartPoint="0, 0">
        <GradientStop Color="#D7D5C2" Offset="0"/>
        <GradientStop Color="#D7D5C2" Offset="0.05"/>
        <GradientStop Color="#E3DED3" Offset="0.06"/>
        <GradientStop Color="#FDFDF6" Offset="0.94"/>
        <GradientStop Color="#D7D5C2" Offset="0.95"/>
        <GradientStop Color="#D7D5C2" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="VerticalScrollBarPageButtonDisabled" EndPoint="1, 0" StartPoint="0, 0">
        <GradientStop Color="#EEEDE5" Offset="0"/>
        <GradientStop Color="#EEEDE5" Offset="0.05"/>
        <GradientStop Color="#F3F1EC" Offset="0.06"/>
        <GradientStop Color="#FEFEFE" Offset="0.94"/>
        <GradientStop Color="#EEEDE5" Offset="0.95"/>
        <GradientStop Color="#EEEDE5" Offset="1"/>
    </LinearGradientBrush>
    <Style x:Key="VerticalScrollBarPageButton" 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 x:Name="Bg" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Fill="{TemplateBinding Background}"/>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter Property="Fill" TargetName="Bg" Value="{StaticResource VerticalScrollBarPageButtonPressed}"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Fill" TargetName="Bg" Value="{StaticResource VerticalScrollBarPageButtonDisabled}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="IsTabStop" Value="false"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <Microsoft_Windows_Themes:ScrollChrome SnapsToDevicePixels="true" x:Name="Chrome" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsDragging}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="{TemplateBinding Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph}" ThemeColor="Metallic"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <LinearGradientBrush x:Key="HorizontalScrollBarPageButtonNormal" EndPoint="0, 1" StartPoint="0, 0">
        <GradientStop Color="#EEEDE5" Offset="0"/>
        <GradientStop Color="#EEEDE5" Offset="0.05"/>
        <GradientStop Color="#F3F1EC" Offset="0.06"/>
        <GradientStop Color="#FEFEFE" Offset="0.94"/>
        <GradientStop Color="#EEEDE5" Offset="0.95"/>
        <GradientStop Color="#EEEDE5" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="HorizontalScrollBarPageButtonPressed" EndPoint="0, 1" StartPoint="0, 0">
        <GradientStop Color="#D7D5C2" Offset="0"/>
        <GradientStop Color="#D7D5C2" Offset="0.05"/>
        <GradientStop Color="#E3DED3" Offset="0.06"/>
        <GradientStop Color="#FDFDF6" Offset="0.94"/>
        <GradientStop Color="#D7D5C2" Offset="0.95"/>
        <GradientStop Color="#D7D5C2" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="HorizontalScrollBarPageButtonDisabled" EndPoint="0, 1" StartPoint="0, 0">
        <GradientStop Color="#EEEDE5" Offset="0"/>
        <GradientStop Color="#EEEDE5" Offset="0.05"/>
        <GradientStop Color="#F3F1EC" Offset="0.06"/>
        <GradientStop Color="#FEFEFE" Offset="0.94"/>
        <GradientStop Color="#EEEDE5" Offset="0.95"/>
        <GradientStop Color="#EEEDE5" Offset="1"/>
    </LinearGradientBrush>
    <Style x:Key="HorizontalScrollBarPageButton" 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 x:Name="Bg" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Fill="{TemplateBinding Background}"/>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter Property="Fill" TargetName="Bg" Value="{StaticResource HorizontalScrollBarPageButtonPressed}"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Fill" TargetName="Bg" Value="{StaticResource HorizontalScrollBarPageButtonDisabled}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="ScrollBarStyle1" TargetType="{x:Type ScrollBar}">
        <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
        <Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
        <Setter Property="Background" Value="{StaticResource VerticalScrollBarPageButtonNormal}"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="Width" Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/>
        <Setter Property="MinWidth" Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ScrollBar}">
                    <Grid SnapsToDevicePixels="true" Background="{TemplateBinding Background}">
                        <Grid.RowDefinitions>
                            <RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>
                            <RowDefinition Height="0.00001*"/>
                            <RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>
                        </Grid.RowDefinitions>
                        <RepeatButton Style="{StaticResource ScrollBarButton}" Command="{x:Static ScrollBar.LineUpCommand}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="UpArrow"/>
                        <Track x:Name="PART_Track" Grid.Row="1" IsDirectionReversed="true">
                            <Track.Thumb>
                                <Thumb Style="{StaticResource ScrollBarThumb}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="VerticalGripper"/>
                            </Track.Thumb>
                            <Track.IncreaseRepeatButton>
                                <RepeatButton Style="{StaticResource VerticalScrollBarPageButton}" Command="{x:Static ScrollBar.PageDownCommand}"/>
                            </Track.IncreaseRepeatButton>
                            <Track.DecreaseRepeatButton>
                                <RepeatButton Style="{StaticResource VerticalScrollBarPageButton}" Command="{x:Static ScrollBar.PageUpCommand}"/>
                            </Track.DecreaseRepeatButton>
                        </Track>
                        <RepeatButton Style="{StaticResource ScrollBarButton}" Command="{x:Static ScrollBar.LineDownCommand}" Grid.Row="2" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="DownArrow"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="Orientation" Value="Horizontal">
                <Setter Property="Width" Value="Auto"/>
                <Setter Property="MinWidth" Value="0"/>
                <Setter Property="Background" Value="{StaticResource HorizontalScrollBarPageButtonNormal}"/>
                <Setter Property="Height" Value="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarHeightKey}}"/>
                <Setter Property="MinHeight" Value="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarHeightKey}}"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ScrollBar}">
                            <Grid SnapsToDevicePixels="true" Background="{TemplateBinding Background}">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>
                                    <ColumnDefinition Width="0.00001*"/>
                                    <ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>
                                </Grid.ColumnDefinitions>
                                <RepeatButton Style="{StaticResource ScrollBarButton}" Command="{x:Static ScrollBar.LineLeftCommand}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="LeftArrow"/>
                                <Track x:Name="PART_Track" Grid.Column="1">
                                    <Track.Thumb>
                                        <Thumb Style="{StaticResource ScrollBarThumb}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="HorizontalGripper"/>
                                    </Track.Thumb>
                                    <Track.IncreaseRepeatButton>
                                        <RepeatButton Style="{StaticResource HorizontalScrollBarPageButton}" Command="{x:Static ScrollBar.PageRightCommand}"/>
                                    </Track.IncreaseRepeatButton>
                                    <Track.DecreaseRepeatButton>
                                        <RepeatButton Style="{StaticResource HorizontalScrollBarPageButton}" Command="{x:Static ScrollBar.PageLeftCommand}"/>
                                    </Track.DecreaseRepeatButton>
                                </Track>
                                <RepeatButton Style="{StaticResource ScrollBarButton}" Command="{x:Static ScrollBar.LineRightCommand}" Grid.Column="2" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="RightArrow"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>
Run Code Online (Sandbox Code Playgroud)

用于此的命名空间是这样的(添加到文件顶部): - 

  xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Luna"
Run Code Online (Sandbox Code Playgroud)

然后,您可以明显地将生成的样式更改为您的内容

您需要以编程方式查找控件中嵌入的滚动条,或者通过更改样式定义将样式应用于作用域中的所有滚动条,因此: - 

  <Style x:Key="ScrollBarStyle1" TargetType="{x:Type ScrollBar}">
    ...
  </Style>
Run Code Online (Sandbox Code Playgroud)

变

  <Style TargetType="{x:Type ScrollBar}">
    ...
  </Style>
Run Code Online (Sandbox Code Playgroud)

这样它将应用于样式定义的区域中的所有滚动条.

ben*_*wey 5

你也可以看一下snoop和style snooper

归档时间：

查看次数：

32608 次

最近记录：

11 年，9 月 前
相关归档
WPF/MVVM - 如何在ViewModel中双击TreeViewItems？ 29
C#XAMARIN.FORMS中的HyperlinkBut​​ton 12
WPF自定义面板/控件创建 - "甜甜圈" 8
JQuery内容滑块 - 最佳实践？ 8
在WPF中使用带有ObservableCollection的HashSets 7
为什么Blend/Visual Studio总是错误地生成ResourceDictionary"Source"？ 6
如何在WPF XAML中制作加载图形？ 5
从Windows窗体到WPF 5
以编程方式启动按钮的弹出按钮 4
如果目标属性已具有显式值,则属性触发器中的setter将失败 1
难疑归档
如何重定向到其他网页？ 7725
什么是"大O"符号的简单英语解释？ 4851
深度克隆对象 2135
Dockerfile中的`COPY`和`ADD`命令有什么区别？ 1991
迭代对象属性 1904
表命名困境:奇异与多个名称 1404
"无法找到或加载主类"是什么意思？ 1277
如何使用SSH在远程计算机上运行shell脚本？ 1164
如何向给定元素添加类？ 1109
git:撤消所有工作目录更改,包括新文件 1108