WPF/Silverlight Slider 컨트롤 눈금 번호 표시

Question

가로로 설정되어 있고 최소값이 0이고 최대 값이 5 인 WPF 슬라이더 컨트롤 (저는 Silverlight 버전과 비슷합니다)을 사용하고 있습니다.

엄지 손가락이 현재 가리키고있는 값을 조금 더 분명하게하기 위해 눈금 아래에 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 대신 새 Tickbar를 사용하여 슬라이더의 사용자 정의 스타일을 만들어야합니다 : 여기에 한 가지 방법입니다.

슬라이더 용 스타일을 만드는 방법을 잘 모르는 경우에는 Windows로 시작할 수 있습니다. 예 : here. 매우 정교한 스타일입니다.

그러면 할 일은 상단 맞춤 막대를 새 맞춤 막대로 바꾸는 것입니다. 는 기본적으로 변경 :

<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 컨트롤을 편집하고 Blend에서 xaml을 생성합니다.

여기에 전체 스타일이 있고 CustomTickBar 대신 yes를 지정하면 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>