Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / Silverlight

Silverlight Slider With Tick Lable

1.00/5 (1 vote)
23 Nov 2011CPOL 16.4K  
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)