title: Vertical slider with labels on the ticker
body: <p>I'm currently trying to get a custom vertical slider with a ticker as well as labels in those tickers with the corresponding values. I already found online some interesting code for a horizontal slider that I'm now using in my solution and goes as follows:</p>
  
  <p>XAML:</p>
  
  <pre><code>&lt;ControlTemplate x:Key="HorizontalSlider" TargetType="{x:Type Slider}"&gt;
          &lt;Grid&gt;
              &lt;Grid.RowDefinitions&gt;
                  &lt;RowDefinition Height="Auto"/&gt;
                  &lt;RowDefinition Height="Auto" MinHeight="{TemplateBinding Slider.MinHeight}"/&gt;
                  &lt;RowDefinition Height="Auto"/&gt;
              &lt;/Grid.RowDefinitions&gt;
              &lt;local:MyTickBar Margin="5,0,10,0" x:Name="TopTick" SnapsToDevicePixels="True" Placement="Top" Fill="{StaticResource GlyphDarkBrush}" Height="5"  /&gt;
              &lt;Border Name="TrackBackground" Margin="0" CornerRadius="2" Height="4" Grid.Row="1" Background="{StaticResource GlyphLightBrush}" BorderBrush="{StaticResource ButtonNormal}" BorderThickness="1" /&gt;
              &lt;Track Grid.Row="1" Name="PART_Track"&gt;
                  &lt;Track.DecreaseRepeatButton&gt;
                      &lt;RepeatButton Style="{StaticResource SliderButtonStyle}" Command="Slider.DecreaseLarge" /&gt;
                  &lt;/Track.DecreaseRepeatButton&gt;
                  &lt;Track.Thumb&gt;
                      &lt;Thumb Style="{StaticResource SliderThumbStyle}" /&gt;
                  &lt;/Track.Thumb&gt;
                  &lt;Track.IncreaseRepeatButton&gt;
                      &lt;RepeatButton Style="{StaticResource SliderButtonStyle}" Command="Slider.IncreaseLarge" /&gt; 
                  &lt;/Track.IncreaseRepeatButton&gt;
              &lt;/Track&gt;
              &lt;TickBar Name="BottomTick" SnapsToDevicePixels="True" Grid.Row="2" Fill="Black" Placement="Bottom" Height="10" Visibility="Collapsed" /&gt;
          &lt;/Grid&gt;
          &lt;ControlTemplate.Triggers&gt;
              &lt;Trigger Property="TickPlacement" Value="TopLeft"&gt;
                  &lt;Setter TargetName="TopTick" Property="Visibility" Value="Visible"/&gt;
              &lt;/Trigger&gt;
              &lt;Trigger Property="TickPlacement" Value="BottomRight"&gt;
                  &lt;Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/&gt;
              &lt;/Trigger&gt;
              &lt;Trigger Property="TickPlacement" Value="Both"&gt;
                  &lt;Setter TargetName="TopTick" Property="Visibility" Value="Visible"/&gt;
                  &lt;Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/&gt;
              &lt;/Trigger&gt;
          &lt;/ControlTemplate.Triggers&gt;
      &lt;/ControlTemplate&gt;
  </code></pre>
  
  <p>With MyTickBar being a class defined as:</p>
  
  <pre><code>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 &lt;= 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));
          }
      }
  }
  </code></pre>
  
  <p>This works fine with a horizontal slider, but as I pretend a vertical one I tried 2 different solutions with no success. First, was to make a similar XAML for a vertical slider, but as I'm quite new to WPF, I couldn't achieve the intended solution (I basically changed the row and height properties to column and with, but is probably a bit more complex than that). And my second attempt was using a</p>
  
  <pre><code>&lt;Slider.LayoutTransform&gt;
              &lt;RotateTransform Angle="270"/&gt;
          &lt;/Slider.LayoutTransform&gt;
  </code></pre>
  
  <p>on the pretended slider, getting a slider with the labels in the incorrect position, like the following image illustrates: <a href="http://s22.postimage.org/sophl10wh/Incorrect.jpg" rel="nofollow">http://s22.postimage.org/sophl10wh/Incorrect.jpg</a></p>
  
  <p>I tried to apply a rotation to the DrawingContext of MyTicker but that rotates the entire ticker, instead of the labels with the values. So, my question is how can I obtain the pretend solution? Either through the necessary changes to a new XAML for a custom vertical slider, or just rotating the labels in the second solution. </p>