Silverlight Slider With Tick Lable
1.00/5 (1 vote)
Silverlight
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); }
}
// 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
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">
Value="1" />
Value="10" />
Value="0" />
Value="0" />
StartPoint="0.5,0">
Offset="0" />
Offset="0.375" />
Offset="0.375" />
Offset="1" />
Value="False" />
TargetType="primitives:RepeatButton">
Opacity="0"
removed="Transparent" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalTrackRectangleDisabledOverlay"
Storyboard.TargetProperty="Visibility"
Duration="0">
Visible
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ThumbDisabledOverlay"
Storyboard.TargetProperty="Visibility"
Duration="0">
Visible
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalTrackRectangleDisabledOverlay"
Storyboard.TargetProperty="Visibility"
Duration="0">
Visible
</ObjectAnimationUsingKeyFrames>
<!-- Horizontal Template -->
removed="{TemplateBinding Background}">
<!-- Track Layer -->
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" />
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 -->
Grid.Row="0"
IsTabStop="False"
Template="{StaticResource RepeatButtonTemplate}"
Grid.Column="0" />
Grid.Row="0"
x:Name="HorizontalThumb"
Width="11"
Grid.Column="1"
IsTabStop="True" />
Grid.Row="0"
RadiusX="2"
RadiusY="2"
Width="11"
Grid.Column="1"
Fill="White"
Opacity=".55"
Visibility="Collapsed" />
IsTabStop="False"
Grid.Row="0"
Template="{StaticResource RepeatButtonTemplate}"
Grid.Column="2" />
<!-- Vertical Template -->
Visibility="Collapsed"
removed="{TemplateBinding Background}">
<!-- Track Layer -->
StrokeThickness="{TemplateBinding BorderThickness}"
Fill="#FFE6EFF7"
Grid.Row="0"
Grid.RowSpan="3"
Width="3"
RadiusX="1"
RadiusY="1"
Margin="0,5,0,5" />
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 -->
IsTabStop="False"
Template="{StaticResource RepeatButtonTemplate}"
Grid.Row="2" />
x:Name="VerticalThumb"
Width="18"
Grid.Row="1"
IsTabStop="True" />
IsTabStop="False"
Template="{StaticResource RepeatButtonTemplate}"
Grid.Row="0" />
</Style>
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">
Width="3"
Height="3" />
Visibility="Collapsed"
TickFrequency="25"
Minimum="0"
Maximum="100"
Value="25"
Height="30"
TickTemplate="{StaticResource dt}"
Margin="20">
Grid.Row="1"
Visibility="Collapsed"
TickFrequency="20"
Minimum="0"
Maximum="200"
Value="120"
Height="30"
Margin="20">
TickFrequency="10"
Minimum="0"
Maximum="250"
Value="50"
Orientation="Vertical"
Grid.RowSpan="2"
Height="300"
Margin="0,0,313,0">