WPF / Silverlight Ползунок управления отображением номеров тиков

Question

Я использую элемент управления WPF Slider (полагаю, версия Silverlight похожа), для которого установлено горизонтальное значение, минимальное значение 0 и максимальное значение 5. 5. 1001 *

Я бы хотел отобразить значения 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));

      }
    }
  }

Затем вам нужно будет создать собственный стиль для вашего слайдера, который будет использовать новую панель тиканов вместо панели тикеров по умолчанию.

Если вы не уверены, как создать стиль для слайдера, вы можете начать с примера 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"/>

Поле важно, потому что это гарантирует, что ваш текст находится в нужном месте.

Ваш слайдер будет сверху, а галочки чуть ниже. Под галочками будет отображаться строка текста.

Answer 2

Добавив немного больше деталей к ответу выше.Вот как мы это сделали, во-первых, отредактируйте элемент управления Slider по умолчанию и сгенерируйте xaml в Blend.

Вот весь стиль, и да вместо 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>