带有标签的垂直滑块

Question

我目前正在尝试使用自动垂直滑块以及带有相应值的代号的标签。我已经在网上找到的是我现在用我的解决方案，也适用于一个水平滑块一些有趣的代码如下：

XAML：

<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> 
      <local:MyTickBar Margin="5,0,10,0" x:Name="TopTick" SnapsToDevicePixels="True" Placement="Top" Fill="{StaticResource GlyphDarkBrush}" Height="5" /> 
      <Border Name="TrackBackground" Margin="0" CornerRadius="2" Height="4" Grid.Row="1" Background="{StaticResource GlyphLightBrush}" BorderBrush="{StaticResource ButtonNormal}" BorderThickness="1" /> 
      <Track Grid.Row="1" Name="PART_Track"> 
       <Track.DecreaseRepeatButton> 
        <RepeatButton Style="{StaticResource SliderButtonStyle}" Command="Slider.DecreaseLarge" /> 
       </Track.DecreaseRepeatButton> 
       <Track.Thumb> 
        <Thumb Style="{StaticResource SliderThumbStyle}" /> 
       </Track.Thumb> 
       <Track.IncreaseRepeatButton> 
        <RepeatButton Style="{StaticResource SliderButtonStyle}" 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> 

随着MyTickBar被定义为一类：

public class MyTickBar : 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"), 16, Brushes.Black); 
      dc.DrawText(formattedText, new Point((tickFrequencySize * i), 30)); 
     } 
    } 
} 

这适用于水平滑块，但是当我假装垂直滑块时，我尝试了两种不同的解决方案，但都没有成功。首先，为垂直滑块创建一个类似的XAML，但由于我对WPF相当陌生，因此无法实现预期的解决方案（我基本上将行和高度属性更改为列和列，但可能只是一点点比这更复杂）。我的第二次尝试在假装滑块使用

<Slider.LayoutTransform> 
      <RotateTransform Angle="270"/> 
     </Slider.LayoutTransform> 

，得到一个滑块，在不正确的位置标签，像下面的图片说明：http://s22.postimage.org/sophl10wh/Incorrect.jpg

我试着旋转应用到的DrawingContext的MyTicker，但它会旋转整个代码，而不是带有值的标签。所以，我的问题是我如何获得假装解决方案？通过对自定义垂直滑块的新XAML进行必要的更改，或者只是在第二个解决方案中旋转标签。

Answer 1

因此，我现在可以回答我自己的问题，也许可以帮助未来的人尝试实现相同的目标。就像我在我自己的问题的评论中所说的，稍后我意识到我可以去msdn并获得适当的垂直滑块模板，而不是尝试修改水平滑块模板。

我现在的XAML现在是：

<ControlTemplate x:Key="VerticalSlider" TargetType="{x:Type Slider}"> 
     <Grid> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="Auto"/> 
       <ColumnDefinition Width="Auto" MinWidth="{TemplateBinding Slider.MinWidth}"/> 
       <ColumnDefinition Width="Auto"/> 
      </Grid.ColumnDefinitions> 
      <local:MyTickBarVertical Margin="0,0,0,10" x:Name="TopTick" SnapsToDevicePixels="True" Placement="Left" Fill="{StaticResource GlyphDarkBrush}" Width="4" /> 
      <Track Grid.Column="1" Name="PART_Track"> 
       <Track.DecreaseRepeatButton> 
        <RepeatButton 
     Style="{StaticResource SliderButtonStyle}" 
     Command="Slider.DecreaseLarge" /> 
       </Track.DecreaseRepeatButton> 
       <Track.Thumb> 
        <Thumb Style="{StaticResource SliderThumbStyle}" /> 
       </Track.Thumb> 
       <Track.IncreaseRepeatButton> 
        <RepeatButton 
     Style="{StaticResource SliderButtonStyle}" 
     Command="Slider.IncreaseLarge" /> 
       </Track.IncreaseRepeatButton> 
      </Track> 
      <TickBar 
    Name="BottomTick" 
    SnapsToDevicePixels="True" 
    Grid.Column="2" 
    Fill="Black" 
    Placement="Right" 
    Width="4" 
    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> 

和我做做一些小改动我的课，因为我现在正在使用合适的垂直滚动条：

public class MyTickBarVertical : 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 
     //width to height 
     tickFrequencySize = (size.Height * 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.Maximum) - Convert.ToInt32(this.Minimum + this.TickFrequency * i), 10); 
      formattedText = new FormattedText(text, CultureInfo.GetCultureInfo("en-us"), FlowDirection.RightToLeft, new Typeface("Verdana"), 16, Brushes.Black); 
      dc.DrawText(formattedText, new Point(0, (tickFrequencySize * i))); 
     } 
    } 
} 

现在越来越如下：http://s4.postimage.org/d0q6dpxvx/Correct.jpg

干杯！