1) Create Custome Control for Slider
public class CustomSlider : Slider
{
public double TickFrequency { get; set; }
public DataTemplate TickTemplate
{
get { return (DataTemplate)GetValue(TickTemplateProperty); }
set { SetValue(TickTemplateProperty, value); }
}
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);
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(0, y1), new Point(5, y1)));
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.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
<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>
<!--
<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>
<!--
<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" />
<!--
<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>
<!--
<grid x:name="VerticalTemplate">
Visibility="Collapsed"
removed="{TemplateBinding Background}">
<grid.rowdefinitions>
<rowdefinition height="*" />
<rowdefinition height="Auto" />
<rowdefinition height="Auto" />
</grid.rowdefinitions>
<!--
<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" />
<!--
<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
<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>