我正在使用 WPF Slider 控件（我猜 Silverlight 版本类似），它设置为水平，最小值为 0，最大值为 5。
我想在刻度线下方显示值 0 - 5，以便更清楚地显示拇指当前指向的值。
这可能吗？有没有人设法做到这一点？
【问题讨论】：
标签： wpf silverlight slider
我认为最好的方法是创建一个自定义的 TickBar 控件并覆盖刻度的渲染。这是一种方法：
public class NumberedTickBar : TickBar
{
protected override void OnRender(DrawingContext dc)
{
Size size = new Size(base.ActualWidth,base.ActualHeight);
int tickCount = (int)((this.Maximum - this.Minimum) / this.TickFrequency) + 1;
if((this.Maximum - this.Minimum) % this.TickFrequency == 0)
tickCount -= 1;
Double tickFrequencySize;
// Calculate tick's setting
tickFrequencySize = (size.Width * this.TickFrequency / (this.Maximum - this.Minimum));
string text = "";
FormattedText formattedText = null;
double num = this.Maximum - this.Minimum;
int i = 0;
// Draw each tick text
for(i = 0;i <= tickCount;i++)
{
text = Convert.ToString(Convert.ToInt32(this.Minimum + this.TickFrequency * i),10);
formattedText = new FormattedText(text,CultureInfo.GetCultureInfo("en-us"),FlowDirection.LeftToRight,new Typeface("Verdana"),8,Brushes.Black);
dc.DrawText(formattedText,new Point((tickFrequencySize * i),30));
}
}
}
然后您必须为您的滑块创建一个自定义样式，该样式使用您的新 Tickbar 而不是默认的 tickbar。
如果您不确定如何为滑块创建样式，您可以从 windows 示例 here. 开始，这是一个非常复杂的示例。
那么剩下要做的就是用新的自定义选项替换顶部 Tickbar。 基本改变：
<TickBar Name="TopTick" SnapsToDevicePixels="True" Placement="Top" Fill="{StaticResource GlyphBrush}" Height="4" Visibility="Collapsed" />
到这里：
<local:NumberedTickBar Name="TopTick" Margin="5,0,10,0" SnapsToDevicePixels="True" Grid.Row="0" Fill="{TemplateBinding Foreground}" Placement="Top" Height="4" Visibility="Collapsed"/>
边距很重要，因为这将确保您的文本位于正确的位置。
您的滑块将位于顶部，其下方有刻度。勾号下方会显示一行文字。
【讨论】：
为上述答案添加更多细节。我们就是这样做的，首先编辑默认的 Slider Control 并在 Blend 中生成 xaml。
这是整个样式，是的，而不是 CustomTickBar 替换 NumberedTickBar 并将您的 Slider 的模板用作样式中提供的 Horizontal Slider。
<SolidColorBrush
x:Key="SliderThumb.Static.Foreground"
Color="#FFE5E5E5" />
<SolidColorBrush
x:Key="SliderThumb.MouseOver.Background"
Color="#FFDCECFC" />
<SolidColorBrush
x:Key="SliderThumb.MouseOver.Border"
Color="#FF7Eb4EA" />
<SolidColorBrush
x:Key="SliderThumb.Pressed.Background"
Color="#FFDAECFC" />
<SolidColorBrush
x:Key="SliderThumb.Pressed.Border"
Color="#FF569DE5" />
<SolidColorBrush
x:Key="SliderThumb.Disabled.Background"
Color="#FFF0F0F0" />
<SolidColorBrush
x:Key="SliderThumb.Disabled.Border"
Color="#FFD9D9D9" />
<SolidColorBrush
x:Key="SliderThumb.Static.Background"
Color="#FFF0F0F0" />
<SolidColorBrush
x:Key="SliderThumb.Static.Border"
Color="#FFACACAC" />
<SolidColorBrush
x:Key="SliderThumb.Track.Border"
Color="#FFD6D6D6" />
<SolidColorBrush
x:Key="SliderThumb.Track.Background"
Color="Red" />
<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}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style
x:Key="SliderThumbStyle"
TargetType="{x:Type Thumb}">
<Setter
Property="SnapsToDevicePixels"
Value="true" />
<Setter
Property="OverridesDefaultStyle"
Value="true" />
<Setter
Property="Height"
Value="18" />
<Setter
Property="Width"
Value="18" />
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="{x:Type Thumb}">
<Ellipse
Name="Ellipse"
Fill="Orange"
Stroke="#404040"
StrokeThickness="1" />
<ControlTemplate.Triggers>
<Trigger
Property="IsMouseOver"
Value="True">
<Setter
TargetName="Ellipse"
Property="Fill"
Value="#FFC3C0FF" />
</Trigger>
<Trigger
Property="IsEnabled"
Value="false">
<Setter
TargetName="Ellipse"
Property="Fill"
Value="#EEEEEE" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate
x:Key="SliderThumbHorizontalDefault"
TargetType="{x:Type Thumb}">
<Grid
HorizontalAlignment="Center"
UseLayoutRounding="True"
VerticalAlignment="Center">
<Path
x:Name="grip"
Data="M 0,0 C0,0 11,0 11,0 11,0 11,18 11,18 11,18 0,18 0,18 0,18 0,0 0,0 z"
Fill="{StaticResource SliderThumb.Static.Background}"
Stretch="Fill"
SnapsToDevicePixels="True"
Stroke="{StaticResource SliderThumb.Static.Border}"
StrokeThickness="1"
UseLayoutRounding="True"
VerticalAlignment="Center" />
</Grid>
<ControlTemplate.Triggers>
<Trigger
Property="IsMouseOver"
Value="true">
<Setter
Property="Fill"
TargetName="grip"
Value="{StaticResource SliderThumb.MouseOver.Background}" />
<Setter
Property="Stroke"
TargetName="grip"
Value="{StaticResource SliderThumb.MouseOver.Border}" />
</Trigger>
<Trigger
Property="IsDragging"
Value="true">
<Setter
Property="Fill"
TargetName="grip"
Value="{StaticResource SliderThumb.Pressed.Background}" />
<Setter
Property="Stroke"
TargetName="grip"
Value="{StaticResource SliderThumb.Pressed.Border}" />
</Trigger>
<Trigger
Property="IsEnabled"
Value="false">
<Setter
Property="Fill"
TargetName="grip"
Value="{StaticResource SliderThumb.Disabled.Background}" />
<Setter
Property="Stroke"
TargetName="grip"
Value="{StaticResource SliderThumb.Disabled.Border}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate
x:Key="HorizontalSlider"
TargetType="{x:Type Slider}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition
Height="Auto" />
<RowDefinition
Height="Auto"
MinHeight="{TemplateBinding Slider.MinHeight}" />
<RowDefinition
Height="Auto" />
</Grid.RowDefinitions>
<Custom:CustomTickBar
Margin="5,0,10,0"
x:Name="TopTick"
SnapsToDevicePixels="True"
Placement="Top"
Fill="Green"
Height="5" />
<Border
Name="TrackBackground"
Margin="0"
CornerRadius="2"
Height="4"
Grid.Row="1"
Background="{StaticResource SliderThumb.Track.Background}"
BorderBrush="{StaticResource SliderThumb.Track.Border}"
BorderThickness="1" />
<Track
Grid.Row="1"
Name="PART_Track">
<Track.DecreaseRepeatButton>
<RepeatButton
Style="{StaticResource RepeatButtonTransparent}"
Command="Slider.DecreaseLarge" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb
Style="{StaticResource SliderThumbStyle}" />
<!--<Thumb
Style="{StaticResource SliderThumbHorizontalDefault}" />-->
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton
Style="{StaticResource RepeatButtonTransparent}"
Command="Slider.IncreaseLarge" />
</Track.IncreaseRepeatButton>
</Track>
<TickBar
Name="BottomTick"
SnapsToDevicePixels="True"
Grid.Row="2"
Fill="Black"
Placement="Bottom"
Height="10"
Visibility="Collapsed" />
</Grid>
<ControlTemplate.Triggers>
<Trigger
Property="TickPlacement"
Value="TopLeft">
<Setter
TargetName="TopTick"
Property="Visibility"
Value="Visible" />
</Trigger>
<Trigger
Property="TickPlacement"
Value="BottomRight">
<Setter
TargetName="BottomTick"
Property="Visibility"
Value="Visible" />
</Trigger>
<Trigger
Property="TickPlacement"
Value="Both">
<Setter
TargetName="TopTick"
Property="Visibility"
Value="Visible" />
<Setter
TargetName="BottomTick"
Property="Visibility"
Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
【讨论】：