问题
I want to style the slider control so that the height of the draggable thumb is set to 8 pixels.
What is the simplest way to do this in WPF?
<Slider>
<Slider.Style>
<!-- which xaml here? -->
</Slider.style>
</Slider>
回答1:
The Slider Control has many parts Thumb, RepeatButtons and a Track. It is one of those controls that have named elements, like PART_Track, referenced by the code-behind for it to work correctly. A good starting point is to use Blend to help you out.
Start a new project (or create a new window). In the XAML window add the following:
<ScrollBar/>
Then in design window of Blend right-click on the control and select "Edit control parts (Template)\Edit a Copy...". This will reverse engineer the standard control template. This can then be edited.
The Blend output is this:-
<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>
The namespace used for this was this (add to top of file):-
xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Luna"
You can then obviously alter the generated style to your heart's content
You would need to either programmatically find the scrollbar embedded in the control or apply the style to all scrollbars in the scope by altering the style definition, so:-
<Style x:Key="ScrollBarStyle1" TargetType="{x:Type ScrollBar}">
...
</Style>
becomes
<Style TargetType="{x:Type ScrollBar}">
...
</Style>
So that it will be applied to all scroll bars in the region defined by the style.
回答2:
You also might want to take a look at snoop and style snooper
回答3:
You will have to create a control template to restyle the part of the control you want.
Have a look at this MSDN article and this article which should help you.
回答4:
A nice MSDN article giving control templates for all the WPF controls is available here:
http://msdn.microsoft.com/en-us/library/aa970773.aspx
Bear in mind that these control templates generate the same control visually (i.e.: these are the control templates that WPF uses). But it's a good starting point for customizing your controls' Visual Trees.
回答5:
Here's a simple and quick way:
<Slider ...>
<Slider.LayoutTransform>
<ScaleTransform CenterX="0" CenterY="0" ScaleX="1" ScaleY="0.5"/>
</Slider.LayoutTransform>
</Slider>
This is not EXACTLY 8 pixels but you can play a bit with the ScaleY property until you get the size you want.
回答6:
Just a proof of concept that you can also style single parts of composite controls like the Slider: But beware, the choice of colors was rather random, so this is gonna be ugly. Unfortunately, the Thumb-Style does not have an effect if you leave out the custom style for the slider.
<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>
来源：https://stackoverflow.com/questions/383251/how-to-style-the-slider-control-in-wpf