3

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

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

<Slider>
    <Slider.Style>
        <!-- which xaml here? -->
    </Slider.style>
</Slider>
4

6 回答 6

6

Slider Control 有很多部分 Thumb、RepeatButtons 和一个 Track。它是具有命名元素（如 PART_Track）的控件之一，由代码隐藏引用以使其正常工作。一个好的起点是使用 Blend 来帮助您。

开始一个新项目（或创建一个新窗口）。在 XAML 窗口中添加以下内容：

<ScrollBar/>

然后在 Blend 的设计窗口中右键单击控件并选择“Edit control parts (Template)\Edit a Copy...”。这将对标准控制模板进行逆向工程。然后可以对其进行编辑。

混合输出是这样的：-

    <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>

用于此的命名空间是这样的（添加到文件顶部）：-

  xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Luna"

然后，您显然可以根据自己的喜好更改生成的样式

您需要以编程方式找到嵌入在控件中的滚动条，或者通过更改样式定义将样式应用于范围内的所有滚动条，因此：-

  <Style x:Key="ScrollBarStyle1" TargetType="{x:Type ScrollBar}">
    ...
  </Style>

变成

  <Style TargetType="{x:Type ScrollBar}">
    ...
  </Style>

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

于 2008-12-22T20:26:16.087 回答
5

您可能还想看看snoop和style snooper

于 2008-12-21T03:29:40.333 回答
4

您必须创建一个控件模板来重新设置您想要的控件部分的样式。

看看这篇MSDN 文章和这篇应该对你有帮助的文章。

于 2008-12-20T17:04:46.930 回答
3

一个很好的 MSDN 文章提供了所有 WPF 控件的控件模板，可以在这里找到：

http://msdn.microsoft.com/en-us/library/aa970773.aspx

请记住，这些控件模板在视觉上生成相同的控件（即：这些是 WPF 使用的控件模板）。但这是自定义控件的可视化树的一个很好的起点。

于 2009-01-15T11:10:05.457 回答
1

这是一个简单快捷的方法：

<Slider ...>
    <Slider.LayoutTransform>
         <ScaleTransform CenterX="0" CenterY="0" ScaleX="1" ScaleY="0.5"/>
    </Slider.LayoutTransform>
</Slider>

这不是完全 8 像素，但您可以使用 ScaleY 属性进行一些操作，直到获得所需的大小。

于 2014-01-09T13:05:05.503 回答
0

只是一个概念证明，您也可以为像滑块这样的复合控件的单个部分设置样式：但要注意，颜色的选择是相当随机的，所以这会很丑陋。不幸的是，如果您忽略滑块的自定义样式，拇指样式将不起作用。

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Grid>
    <Grid.Resources>
      <ResourceDictionary>
        <Style TargetType="{x:Type Slider}">
          <Setter Property="Background" Value="Green"/>
          <Setter Property="BorderBrush" Value="Navy"/>
          <Setter Property="Template">
            <Setter.Value>
              <ControlTemplate TargetType="{x:Type Slider}">
                <Grid x:Name="GridRoot">
                  <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                  </Grid.RowDefinitions>
  <!-- TickBar shows the ticks for Slider -->
                  <TickBar x:Name="TopTick" Height="4" Fill="Blue" Placement="Top" SnapsToDevicePixels="True" Visibility="Collapsed"/>
                  <Border x:Name="Border" Height="4" Grid.Row="1" Margin="0" Background="Blue" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/>
  <!-- The Track lays out the repeat buttons and thumb -->
                  <Track x:Name="PART_Track" Grid.Row="1">
                    <Track.Thumb>
                      <Thumb MinWidth="15" MinHeight="30"/>
                    </Track.Thumb>
                    <Track.IncreaseRepeatButton>
                      <RepeatButton Command="Slider.IncreaseLarge"/>
                    </Track.IncreaseRepeatButton>
                    <Track.DecreaseRepeatButton>
                      <RepeatButton Command="Slider.DecreaseLarge"/>
                    </Track.DecreaseRepeatButton>
                  </Track>
                  <TickBar x:Name="BottomTick" Height="4" Grid.Row="2" Fill="{TemplateBinding Foreground}" Placement="Bottom" SnapsToDevicePixels="True" Visibility="Collapsed"/>
                </Grid>
              </ControlTemplate>
            </Setter.Value>
          </Setter>
        </Style>
      </ResourceDictionary>
    </Grid.Resources>
    <Slider Maximum="100" Minimum="0">
      <Slider.Resources>
        <Style TargetType="{x:Type Thumb}">
          <Setter Property="Background" Value="Yellow"/>
          <Setter Property="Height" Value="80"/>
        </Style>
      </Slider.Resources>
    </Slider>
  </Grid>
</Page>
于 2011-08-27T06:21:03.443 回答