WPF/Silverlight Slider控件显示刻度数字

Question

我正在使用WPF Slider控件(我猜测Silverlight版本类似),它设置为水平,最小值为0,最大值为5.

我想在刻度线下面显示0到5的值,以使拇指当前指向的值更明显一些.

这是可能的,有没有人设法实现这一目标？

Answer 1

我相信最好的方法是创建一个自定义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示例开始. 这是一个非常复杂的.

然后,唯一要做的就是用新的自定义条替换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"/>

保证金很重要,因为这样可以确保您的文本位于正确的位置.

您的滑块将位于顶部,其下方有刻度线.刻度线下方将显示一行文本.