2010-11-26 11 views
5

Estoy usando un control deslizante de WPF (supongo que la versión de Silverlight es similar) que se establece en horizontal y tiene un valor mínimo de 0 y un valor máximo de 5.WPF/Control deslizante de Silverlight marque los números

Me gustaría mostrar los valores 0 - 5 debajo de las marcas de graduación para que sea un poco más obvio a qué valor apunta el pulgar actualmente.

¿Es esto posible y alguien ha logrado esto?

+0

¿Quieres una respuesta que funcione en Silverlight? Es mejor si eres explícito acerca de dónde esto realmente necesita funcionar. – AnthonyWJones

+0

Hola, Anthony, lo necesito para un proyecto de WPF que se trasladará a Silverlight el próximo año, así que no estoy particularmente molesto si recibo una solución de WPF o Silverlight. Dadas las similitudes entre los dos, espero ser capaz de adaptar cualquier sugerencia de cualquier manera. Mitch – Mitch

Respuesta

11

Creo que la mejor manera de hacerlo es crear un control TickBar personalizado y anular la representación de los tics. Aquí está una manera:

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)); 

     } 
    } 
    } 

A continuación, tendrá que crear un estilo personalizado para su control deslizante que utiliza su nueva Tickbar en lugar de la tickbar defecto.

Si no está seguro de cómo crear un estilo para un control deslizante puede comenzar con el ejemplo de Windows here. Es muy sofisticado.

Luego, lo único que queda por hacer es reemplazar Top Tickbar por uno nuevo personalizado. Básicamente Cambio:

<TickBar Name="TopTick" SnapsToDevicePixels="True" Placement="Top" Fill="{StaticResource GlyphBrush}" Height="4" Visibility="Collapsed" /> 

a esto:

<local:NumberedTickBar Name="TopTick" Margin="5,0,10,0" SnapsToDevicePixels="True" Grid.Row="0" Fill="{TemplateBinding Foreground}" Placement="Top" Height="4" Visibility="Collapsed"/> 

El margen es importante, ya que se asegurará de que su texto está en el lugar correcto.

Su control deslizante estará en la parte superior con marcas justo debajo. Una fila de texto se mostrará debajo de los ticks.

0

Agregando un poco más de detalle a la respuesta anterior. Así es como lo hicimos, primero editamos el Control deslizante predeterminado y generamos el xaml en Mezcla.

Aquí está el estilo completo y sí en lugar de CustomTickBar, reemplace el NumberedTickBar y utilice la plantilla para su control deslizante como control deslizante horizontal como se indica en el estilo.

<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>