我想设置滑块控件的样式,以便将可拖动拇指的高度设置为8像素。
在WPF中执行此操作的最简单方法是什么?
<Slider>
<Slider.Style>
<!-- which xaml here? -->
</Slider.style>
</Slider>
答案 0 :(得分:6)
Slider Control有很多部分Thumb,RepeatButtons和一个Track。它是其中一个具有命名元素的控件,如PART_Track,由代码隐藏引用,以使其正常工作。一个很好的起点是使用Blend来帮助你。
开始一个新项目(或创建一个新窗口)。在XAML窗口中添加以下内容:
<ScrollBar/>
然后在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>
用于此的命名空间是这样的(添加到文件顶部): -
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>
这样它将应用于样式定义的区域中的所有滚动条。
答案 1 :(得分:5)
您还可以查看snoop和style snooper
答案 2 :(得分:4)
您必须创建一个控件模板来重新设置所需控件的一部分。
请查看有助于您的这篇MSDN article和this文章。
答案 3 :(得分:2)
这里提供了一篇很好的MSDN文章,为所有WPF控件提供控件模板:
http://msdn.microsoft.com/en-us/library/aa970773.aspx
请记住,这些控件模板在视觉上生成相同的控件(即:这些是WPF使用的控件模板)。但它是自定义控件的可视树的一个很好的起点。
答案 4 :(得分:1)
这是一种简单快捷的方法:
<Slider ...>
<Slider.LayoutTransform>
<ScaleTransform CenterX="0" CenterY="0" ScaleX="1" ScaleY="0.5"/>
</Slider.LayoutTransform>
</Slider>
这不完全是8像素,但你可以使用ScaleY属性玩一下,直到你得到你想要的大小。
答案 5 :(得分:0)
只是一个概念证明,你也可以设置复合控件的单个部分,如Slider: 但要注意,颜色的选择是相当随机的,所以这将是丑陋的。 不幸的是,如果省略滑块的自定义样式,Thumb-Style没有效果。
<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>