帶有標籤的垂直滑塊

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

乾杯！