我正在使用一个WPF滑块控件（我猜Silverlight版本类似），它设置为水平，最小值为0，最大值为5。
我希望在刻度线下方显示数值0-5，以使拇指当前指向的值更加明显。
这是否可能，并且有人已经成功实现了吗？
我希望在刻度线下方显示数值0-5，以使拇指当前指向的值更加明显。
这是否可能，并且有人已经成功实现了吗？
WPF/Silverlight 滑块控件显示刻度数字
6
- Mitch
2
你需要一个在Silverlight中可用的答案吗？最好明确指出它需要在哪里工作。 - AnthonyWJones
1嗨，安东尼，我需要它用于一个正在转移到Silverlight的WPF项目，所以我并不特别在意是否获得WPF或Silverlight解决方案。鉴于两者之间的相似之处，我希望能够适应任何建议。米奇 - Mitch
2个回答
11
我认为最好的方法是创建一个自定义的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));
}
}
}
那么你需要为你的滑块创建一个自定义样式，该样式使用你的新标尺而不是默认的标尺。
如果您不确定如何为滑块创建样式，可以从Windows示例这里开始。 它非常复杂。
然后，唯一剩下要做的就是用你的新的自定义标尺替换顶部的标尺。 基本上是更改：
<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"/>
边距很重要，因为这将确保您的文本处于正确的位置。
您的滑块将在顶部，下方紧接着是刻度。 刻度下面会显示一行文本。
- Liz
0
对上面的答案进行更详细的补充。我们是这样做的，首先编辑默认的滑块控件并在Blend中生成xaml。
这是整个样式，而且不是使用CustomTickBar替换NumberedTickBar，而是将提供的水平滑块模板用于你的滑块。
<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>
- nikhil
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接