我使用WPF Slider控件（我猜测Silverlight版本类似），它设置为水平，最小值为0，最大值为5.
我希望在刻度线下面显示0到5的值，以使拇指当前指向的值更加明显。
这是否可行，有没有人设法实现这一目标？
答案 0 :(得分：12)
我认为最好的方法是创建一个自定义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而不是默认的标记栏。
如果您不确定如何为滑块创建样式，可以从windows示例开始here.这是一个非常复杂的版本。
然后，唯一要做的就是用新的自定义条替换Top 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"/>
保证金很重要，因为这样可以确保您的文字在正确的位置。
您的滑块位于顶部，下方有刻度线。一行文字将显示在刻度线下方。
答案 1 :(得分：0)
在上述答案中添加更多细节。我们就是这样做的，首先编辑默认的Slider Control并在Blend中生成xaml。
以下是整个样式，而不是CustomTickBar替换NumberedTickBar，并将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>