none
Display numbers on the slider using XAML

    Question

  • Hi,

    I have created a slider with TickBar and now I wanted to display numbers besides those ticks.If anybody can help me out then it would be great.

     

    Thanks

     

    Friday, May 04, 2007 4:21 PM

Answers

  • I would advice you to create custom control template, rather overriding OnRender, however, overriding default control methods is not much different between WPF and WinForms
    Tuesday, May 15, 2007 3:55 PM
  • something along those lines

    public class MyTickBar : TickBar
        {
            protected override void OnRender(DrawingContext dc)
            {
                Size size = new Size(base.ActualWidth, base.ActualHeight);
                double num = this.Maximum - this.Minimum;          
                Point point = new Point(0, 0);
                Point point2 = new Point(0, 0);
                double y = this.ReservedSpace * 0.5;
                FormattedText formattedText = null;
                for (int i = 0; i < 10; i++)
                {
                    formattedText = new FormattedText(
                i.ToString(),
                CultureInfo.GetCultureInfo("en-us"),
                FlowDirection.LeftToRight,
                new Typeface("Verdana"),
                8,
                Brushes.Black);
               
                dc.DrawText(formattedText, new Point((i * (size.Width/10)),0));
                }
            }
        }

    Tuesday, May 15, 2007 3:59 PM
    Moderator

All replies

  • You can use a TextBlock to display the number, and then bind it's Text property to the Value property of the slider.  This article shows how to do that, in the "Displaying the angle of rotation" section: http://www.codeproject.com/WPF/GuidedTourWPF_3.asp

     

    HTH

    Friday, May 04, 2007 4:24 PM
  • Friday, May 04, 2007 4:35 PM
    Moderator
  • Hi,

    see what i have is a calibrated vertical slider and like i have 7 ticks and I want to display ticks like bottom tick will have value 0%, the one above that will have 25 % and so on.SO is there anyway I can do that using XAML.

     

    Thanks

    Friday, May 04, 2007 8:17 PM
  • I think that the link lee supplied is more in line with what you want to do.  You won't be able to easily do that in XAML.
    Friday, May 04, 2007 8:20 PM
  • How can I override the OnRender method to dispaly the numbers? Any examples would be a great help?
    Tuesday, May 15, 2007 3:37 PM
  • I would advice you to create custom control template, rather overriding OnRender, however, overriding default control methods is not much different between WPF and WinForms
    Tuesday, May 15, 2007 3:55 PM
  • something along those lines

    public class MyTickBar : TickBar
        {
            protected override void OnRender(DrawingContext dc)
            {
                Size size = new Size(base.ActualWidth, base.ActualHeight);
                double num = this.Maximum - this.Minimum;          
                Point point = new Point(0, 0);
                Point point2 = new Point(0, 0);
                double y = this.ReservedSpace * 0.5;
                FormattedText formattedText = null;
                for (int i = 0; i < 10; i++)
                {
                    formattedText = new FormattedText(
                i.ToString(),
                CultureInfo.GetCultureInfo("en-us"),
                FlowDirection.LeftToRight,
                new Typeface("Verdana"),
                8,
                Brushes.Black);
               
                dc.DrawText(formattedText, new Point((i * (size.Width/10)),0));
                }
            }
        }

    Tuesday, May 15, 2007 3:59 PM
    Moderator
  • I am confused to override the function or write custom slider help me out.

    But This is what I am looking for ?

     

    I have a sliders(group of 6) and each slider has min value , max values, different values and different number ticks 

    like the one below I have 5 more and I want to display the ticks value on each slider

     

    <Slider Height="150" Width="50" Background="LightGray" Name="sldconversion" Orientation="Vertical" TickPlacement="BottomRight" IsDirectionReversed="False"
    HorizontalAlignment="Center" IsEnabled="{Binding ElementName=rbconversion,Path=IsChecked,Mode=TwoWay}" Minimum="0" Maximum="8" Ticks="0,1,2,3,4,5,6,7,8"/>

     

    Thanks

    Wednesday, May 16, 2007 2:12 PM
  • You dont need to write custom slider.

    get the slider template from the SDK and in that it uses tickbar. replace that tickbar with your derived tickbar(sample above)

    Wednesday, May 16, 2007 2:34 PM
    Moderator
  • I have a doubt should I override the Tickbar in the XAML file or the class file.And if you could let me know how it can be done?

     

    Thanks

    Wednesday, May 16, 2007 3:26 PM
  • this is a very rough implementation(gives an idea)

    Code Snippet

    <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

    Name="TopTick"

    SnapsToDevicePixels="True"

    Placement="Top"

    Fill="{StaticResource GlyphBrush}"

    Height="5"

    />

    <Border

    Name="TrackBackground"

    Margin="0"

    CornerRadius="2"

    Height="4"

    Grid.Row="1"

    Background="{StaticResource LightBrush}"

    BorderBrush="{StaticResource NormalBorderBrush}"

    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="{TemplateBinding Foreground}"

    Placement="Bottom"

    Height="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>

     

    <Slider Template="{StaticResource HorizontalSlider}" Width="300" Height="50" Maximum="10" Value="5" TickPlacement="BottomRight" TickFrequency="1" Minimum="0"></Slider>

     

    public class MyTickBar : TickBar

    {

    protected override void OnRender(DrawingContext dc)

    {

    Size size = new Size(base.ActualWidth, base.ActualHeight);

    double num = this.Maximum - this.Minimum;

    Point point = new Point(0, 0);

    Point point2 = new Point(0, 0);

    double y = this.ReservedSpace * 0.5;

    FormattedText formattedText = null;

    for (int i = 0; i < 10; i++)

    {

    formattedText = new FormattedText(

    i.ToString(),

    CultureInfo.GetCultureInfo("en-us"),

    FlowDirection.LeftToRight,

    new Typeface("Verdana"),

    8,

    Brushes.Black);

    dc.DrawText(formattedText, new Point((i * (size.Width / 10)), 30));

    }

    }

    }

     

    Wednesday, May 16, 2007 3:49 PM
    Moderator
  • When I try to use Local node it is giving me an error that it does not recognize this node.
    Wednesday, May 16, 2007 4:10 PM
  • it is just a mapping added to the window/page

    xmlns:local="clr-namespace:your namespace"

    Wednesday, May 16, 2007 4:25 PM
    Moderator
  • I added the namespace and it is still giving me error as it is not able to recognize local:MyTickBar

     

    Wednesday, May 16, 2007 5:39 PM
  • send me an email, I will send a sample
    Wednesday, May 16, 2007 5:57 PM
    Moderator
  • my email id is vjsakec99@hotmail.com .
    Wednesday, May 16, 2007 6:04 PM
  • How can I make it Vertical I tried changing Orientation and tried different things but it is still hosizontal.

     

    Thanks

    Wednesday, May 16, 2007 8:04 PM
  • Can this slider bar be used as Ruler control as in MS Office Word? Pls do forward me the code that u wrote for Varun.

     

    Mahesh

    Monday, May 21, 2007 10:51 PM
  • Hello lee d,

    can you also send the example to me.

    Thanks in advance
    nordside
    Tuesday, January 08, 2008 9:03 AM
  • Hello,

    is it possible, that someone attach the sample code from lee d?

    Thanks
    nordside
    Friday, January 25, 2008 12:55 PM
  • this was what I was doing, this has hardcoded stuff but you get the idea

    if you look at the template for the slider, you will see something like this

     <TickBar
          Name="BottomTick"
          SnapsToDevicePixels="True"
          Grid.Row="2"
          Fill="{TemplateBinding Foreground}"
          Placement="Bottom"
          Height="4"
          Visibility="Collapsed" />
    we will change the template to use the subclassed tickbar('MyTickBar") in the template

     

    Code Snippet
    public class MyTickBar : TickBar
        {
            protected override void OnRender(DrawingContext dc)
            {
                Size size = new Size(base.ActualWidth, base.ActualHeight);
                double num = this.Maximum - this.Minimum;
                Point point = new Point(0, 0);
                Point point2 = new Point(0, 0);
                double y = this.ReservedSpace * 0.5;
                FormattedText formattedText = null;
                double x = 0;
                for (int i = 0; i <=num; i+=10)
                {
                    formattedText = new FormattedText(
                i.ToString(),
                CultureInfo.GetCultureInfo("en-us"),
                FlowDirection.LeftToRight,
                new Typeface("Verdana"),
                8,
                Brushes.Black);
                    if (Minimum == i)
                        x = 0;
                    else
                        x += this.ActualWidth / 10;
                       
                    dc.DrawText(formattedText, new Point(x, 10));
                }
            }
        }

     

     

     

    Friday, January 25, 2008 1:21 PM
    Moderator
  • I get the following error as the poster even though I added xmlns:local="clr-namespace:your namespace".
      "A value of type 'MyTickBar' cannot be added to a collection or dictionary of type "UIElementCollection".

    Could you please send me a link to the solution.

    Thanks,
    Rita

    Friday, January 23, 2009 11:20 PM
  • I get the following error (I added xmlns:local="clr-namespace:your namespace ) on the line 
    <local:MyTickBar Name="TopTick" SnapsToDevicePixels="True" Placement="Top" Fill="{StaticResource GlyphBrush}" Height="5" />:

    "A value of type 'MyTickBar' cannot be added to a collection or dictionary of type UIElementCollection".

    Is there a link to the solution that I can see?

    Thanks,
    Rita

    Friday, January 23, 2009 11:24 PM
  • Hi Lee ,

                  Can i get the sanple code as well as i have a similar scenario.

    My mail id is vikas2future@gmail.com

    Thursday, January 06, 2011 6:08 AM
  • I want to add the feature that if the user press on the text that I draw on the DrawingContext with the OnRender function the TickBar Value will change.

    how can i do that?

    Monday, November 28, 2011 3:36 PM
  • Hi Lee D,

    I seem to be having some of the same problems as V Jain.

    Would you please be so kind to send me your sample as well?

    Thanks in advance.

    Thursday, March 07, 2013 10:09 PM