Click here to Skip to main content
15,887,175 members
Articles / Silverlight
Tip/Trick

Silverlight Slider With Tick Lable

Rate me:
Please Sign up or sign in to vote.
1.00/5 (1 vote)
23 Nov 2011CPOL 16.1K   1
Silverlight
1) Create Custome Control for Slider

C#
public class CustomSlider : Slider
  {
      public double TickFrequency { get; set; }



      public DataTemplate TickTemplate
      {
          get { return (DataTemplate)GetValue(TickTemplateProperty); }
          set { SetValue(TickTemplateProperty, value); }
      }

      // Using a DependencyProperty as the backing store for TickTemplate.  This enables animation, styling, binding, etc...
      public static readonly DependencyProperty TickTemplateProperty =
          DependencyProperty.Register("TickTemplate", typeof(DataTemplate), typeof(CustomSlider), null);


      public CustomSlider()
      {
          DefaultStyleKey = typeof(CustomSlider);
          SizeChanged += new SizeChangedEventHandler(CustomSlider_SizeChanged);
      }

      Canvas bottomTicksCanvas;

      void CustomSlider_SizeChanged(object sender, SizeChangedEventArgs e)
      {

          bottomTicksCanvas.Children.Clear();
          int numberOfTicks = (int)((Maximum - Minimum) / TickFrequency);
          //numberOfTicks++;
          for (int i = 0; i <= numberOfTicks; i++)
          {
              double x1 = 5 + ((i) * ((this.ActualWidth - 10) / numberOfTicks));
              double y1 = 5 + ((i) * ((this.ActualHeight - 10) / numberOfTicks));

              //bottomTicksCanvas.Children.Add(CreateTick(new Point(x1, 0), new Point(x1, 5)));
              bottomTicksCanvas.Children.Add(CreateTick(new Point(0, y1), new Point(5, y1)));
              //bottomTicksCanvas.Children.Add(CreateLabel((Math.Round(((Maximum - Minimum) / numberOfTicks) * (i), 0)).ToString(), 6.0, x1));
              bottomTicksCanvas.Children.Add(CreateLabel((Math.Round(((Maximum - Minimum) / numberOfTicks) * (i), 0)).ToString(), y1, 6.0));
          }
      }

      TextBlock CreateLabel(string text, double top, double left)
      {
          TextBlock txt = new TextBlock();
          txt.Text = text;
          //txt.SetValue(Canvas.TopProperty, top);
          //txt.SetValue(Canvas.LeftProperty, left - txt.ActualWidth / 2);
          txt.SetValue(Canvas.TopProperty, top - txt.ActualHeight / 2);
          txt.SetValue(Canvas.LeftProperty, left);
          return txt;
      }

      FrameworkElement CreateTick(Point start, Point end)
      {
          if (TickTemplate == null)
          {
              Line ln = new Line();
              ln.Stroke = new SolidColorBrush(Colors.Black);
              ln.StrokeThickness = 1.0;
              ln.X1 = start.X;
              ln.Y1 = start.Y;
              ln.X2 = end.X;
              ln.Y2 = end.Y;
              return ln;
          }
          else
          {
              ContentPresenter cp = new ContentPresenter();
              cp.Content = "a";
              cp.ContentTemplate = TickTemplate;
              cp.SetValue(Canvas.TopProperty, start.Y);
              cp.SetValue(Canvas.LeftProperty, start.X - (cp.ActualWidth / 2));
              return cp;
          }
          return null;
      }

      public override void OnApplyTemplate()
      {
          base.OnApplyTemplate();
          bottomTicksCanvas = GetTemplateChild("BottomTicksCanvas") as Canvas;

      }
  }

2) create Style for Slider Control

HTML
<resourcedictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
                    xmlns:local="clr-namespace:SliderSample"
                    xmlns:primitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows">
    <Style TargetType="local:CustomSlider">
        <setter property="BorderThickness">
                Value="1" />
        <setter property="Maximum">
                Value="10" />
        <setter property="Minimum">
                Value="0" />
        <setter property="Value">
                Value="0" />
        <setter property="BorderBrush">
            <setter.value>
                <lineargradientbrush endpoint="0.5,1">
                                     StartPoint="0.5,0">
                    <gradientstop color="#FFA3AEB9">
                                  Offset="0" />
                    <gradientstop color="#FF8399A9">
                                  Offset="0.375" />
                    <gradientstop color="#FF718597">
                                  Offset="0.375" />
                    <gradientstop color="#FF617584">
                                  Offset="1" />
                </gradientstop></gradientstop></gradientstop></gradientstop></lineargradientbrush>
            </setter.value>
        </setter>
        <setter property="IsTabStop">
                Value="False" />
        <setter property="Template">
            <setter.value>
                <controltemplate targettype="local:CustomSlider">
                    <grid x:name="Root" xmlns:x="#unknown">
                        <grid.resources>
                            <controltemplate x:key="RepeatButtonTemplate">
                                             TargetType="primitives:RepeatButton">
                                <grid x:name="Root">
                                      Opacity="0"
                                      removed="Transparent" />
                            </grid></controltemplate>
                        </grid.resources>
                        <vsm:visualstatemanager.visualstategroups xmlns:vsm="#unknown">
                            <vsm:visualstategroup x:name="CommonStates">
                                <vsm:visualstate x:name="Normal" />
                                <vsm:visualstate x:name="MouseOver" />
                                <vsm:visualstate x:name="Disabled">
                                    <storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalTrackRectangleDisabledOverlay"
                                                                       Storyboard.TargetProperty="Visibility"
                                                                       Duration="0">
                                            <discreteobjectkeyframe keytime="0">
                                                <discreteobjectkeyframe.value>
                                                    <visibility>Visible</visibility>
                                                </discreteobjectkeyframe.value>
                                            </discreteobjectkeyframe>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ThumbDisabledOverlay"
                                                                       Storyboard.TargetProperty="Visibility"
                                                                       Duration="0">
                                            <discreteobjectkeyframe keytime="0">
                                                <discreteobjectkeyframe.value>
                                                    <visibility>Visible</visibility>
                                                </discreteobjectkeyframe.value>
                                            </discreteobjectkeyframe>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalTrackRectangleDisabledOverlay"
                                                                       Storyboard.TargetProperty="Visibility"
                                                                       Duration="0">
                                            <discreteobjectkeyframe keytime="0">
                                                <discreteobjectkeyframe.value>
                                                    <visibility>Visible</visibility>
                                                </discreteobjectkeyframe.value>
                                            </discreteobjectkeyframe>
                                        </ObjectAnimationUsingKeyFrames>
                                    </storyboard>
                                </vsm:visualstate>
                            </vsm:visualstategroup>
                        </vsm:visualstatemanager.visualstategroups>

                        <!-- Horizontal Template -->
                        <grid x:name="HorizontalTemplate">
                              removed="{TemplateBinding Background}">
                            <grid.columndefinitions>
                                <columndefinition width="Auto" />
                                <columndefinition width="Auto" />
                                <columndefinition width="*" />
                            </grid.columndefinitions>
                            <grid.rowdefinitions>
                                <rowdefinition height="Auto"></rowdefinition>
                                <rowdefinition height="Auto"></rowdefinition>
                            </grid.rowdefinitions>

                            <!-- Track Layer -->
                            <rectangle x:name="TrackRectangle">
                                       Grid.Row="0"
                                       Stroke="#FFA3AEB9"
                                       StrokeThickness="2"
                                       Fill="#FFE6EFF7"
                                       Grid.Column="0"
                                       Grid.ColumnSpan="3"
                                       Height="3"
                                       RadiusX="1"
                                       RadiusY="1"
                                       Margin="5,0,5,0" />
                            <rectangle x:name="HorizontalTrackRectangleDisabledOverlay">
                                       Grid.Row="0"
                                       Visibility="Collapsed"
                                       Fill="White"
                                       Opacity=".55"
                                       Grid.Column="0"
                                       Grid.ColumnSpan="3"
                                       Height="3"
                                       RadiusX="1"
                                       RadiusY="1"
                                       Margin="5,0,5,0" />
                            <!-- Repeat Buttons + Thumb -->
                            <primitives:repeatbutton x:name="HorizontalTrackLargeChangeDecreaseRepeatButton" xmlns:primitives="#unknown">
                                                     Grid.Row="0"
                                                     IsTabStop="False"
                                                     Template="{StaticResource RepeatButtonTemplate}"
                                                     Grid.Column="0" />
                            <primitives:thumb height="18">
                                              Grid.Row="0"
                                              x:Name="HorizontalThumb"
                                              Width="11"
                                              Grid.Column="1"
                                              IsTabStop="True" />
                            <rectangle x:name="ThumbDisabledOverlay">
                                       Grid.Row="0"
                                       RadiusX="2"
                                       RadiusY="2"
                                       Width="11"
                                       Grid.Column="1"
                                       Fill="White"
                                       Opacity=".55"
                                       Visibility="Collapsed" />
                            <primitives:repeatbutton x:name="HorizontalTrackLargeChangeIncreaseRepeatButton">
                                                     IsTabStop="False"
                                                     Grid.Row="0"
                                                     Template="{StaticResource RepeatButtonTemplate}"
                                                     Grid.Column="2" />
                            
                        </primitives:repeatbutton></rectangle></primitives:thumb></primitives:repeatbutton></rectangle></rectangle></grid>

                        <!-- Vertical Template -->
                        <grid x:name="VerticalTemplate">
                              Visibility="Collapsed"
                              removed="{TemplateBinding Background}">
                            <grid.rowdefinitions>
                                <rowdefinition height="*" />
                                <rowdefinition height="Auto" />
                                <rowdefinition height="Auto" />
                            </grid.rowdefinitions>

                            <!-- Track Layer -->
                            <rectangle stroke="#FFA3AEB9">
                                       StrokeThickness="{TemplateBinding BorderThickness}"
                                       Fill="#FFE6EFF7"
                                       Grid.Row="0"
                                       Grid.RowSpan="3"
                                       Width="3"
                                       RadiusX="1"
                                       RadiusY="1"
                                       Margin="0,5,0,5" />
                            <rectangle x:name="VerticalTrackRectangleDisabledOverlay">
                                       Visibility="Collapsed"
                                       Fill="White"
                                       Opacity=".55"
                                       Grid.Row="0"
                                       Grid.RowSpan="3"
                                       Width="3"
                                       RadiusX="1"
                                       RadiusY="1"
                                       Margin="0,5,0,5" />
                            <!-- Repeat Buttons + Thumb -->
                            <primitives:repeatbutton x:name="VerticalTrackLargeChangeDecreaseRepeatButton" xmlns:primitives="#unknown">
                                                     IsTabStop="False"
                                                     Template="{StaticResource RepeatButtonTemplate}"
                                                     Grid.Row="2" />
                            <primitives:thumb height="11">
                                              x:Name="VerticalThumb"
                                              Width="18"
                                              Grid.Row="1"
                                              IsTabStop="True" />
                            <primitives:repeatbutton x:name="VerticalTrackLargeChangeIncreaseRepeatButton">
                                                     IsTabStop="False"
                                                     Template="{StaticResource RepeatButtonTemplate}"
                                                     Grid.Row="0" />
                            <canvas x:name="BottomTicksCanvas" horizontalalignment="Right"></canvas>
                        </primitives:repeatbutton></primitives:thumb></primitives:repeatbutton></rectangle></rectangle></grid>

                    </grid>
                </controltemplate>
            </setter.value>
        </setter>
    </Style>
</setter></setter></setter></setter></setter></resourcedictionary>

3)User Control For Slider

HTML
<usercontrol x:class="SliderSample.Page" xmlns:x="#unknown">
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:SliderSample"
             Width="400">
    <usercontrol.resources>
        <datatemplate x:key="dt">
            <ellipse fill="blue">
                     Width="3"
                     Height="3" />
        </ellipse></datatemplate>
    </usercontrol.resources>
    <grid>

        <grid.rowdefinitions>
            <rowdefinition />
            <rowdefinition />
            <rowdefinition />
        </grid.rowdefinitions>
        <local:customslider x:name="slider1" xmlns:local="#unknown">
                            Visibility="Collapsed"
                            TickFrequency="25"
                            Minimum="0"
                            Maximum="100"
                            Value="25"
                            Height="30"
                            TickTemplate="{StaticResource dt}"
                            Margin="20"></local:customslider>
        <local:customslider x:name="slider2" xmlns:local="#unknown">
                            Grid.Row="1"
                            Visibility="Collapsed"
                            TickFrequency="20"
                            Minimum="0"
                            Maximum="200"
                            Value="120"
                            Height="30"
                            Margin="20"></local:customslider>
        <local:customslider x:name="slider3" xmlns:local="#unknown">
                            TickFrequency="10"
                            Minimum="0"
                            Maximum="250"
                            Value="50"
                            Orientation="Vertical"
                            Grid.RowSpan="2"
                            Height="300"
                            Margin="0,0,313,0"></local:customslider>
    </grid>
</usercontrol>

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Web Developer
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralMy vote of 1 Pin
Kashif_Imran6-Aug-13 8:15
Kashif_Imran6-Aug-13 8:15 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.