arsenium
Reputation: 571
How to create windows phone 8.1 slider with center?
How to create windows phone 8.1 slider with center? like in gif file.
Any ideas? it really do? How to set the center of reference?
Upvotes: 0
Views: 84
Answers (2)
Rohit
Reputation: 552
You can create it using States using Microsoft Blend. As I can see 7 different states so create 7 states for this control or Grid whatever you use and then on firing on event or Click of button.
Its link for stackoverflow question which changes states on some criteria and if you want to know how it works then use this link. Hope it helps.
Upvotes: 0
Chirag Shah
Reputation: 981
There are two ways you could achieve that:
1.Have two dummy left and right rectangles inside the slider whose width changes when the width of actual rectangle changes.
The code:
XAML:
<Slider Style="{StaticResource SliderStyle3}"
x:Name="MySlider"
Value="50"
Maximum="100">
</Slider>
Style of the slider with two dummy rectangles:
XAML:
<Style x:Key="SliderStyle3"
TargetType="Slider">
<Setter Property="Background"
Value="{ThemeResource SliderTrackBackgroundThemeBrush}" />
<Setter Property="BorderBrush"
Value="{ThemeResource SliderBorderThemeBrush}" />
<Setter Property="BorderThickness"
Value="{ThemeResource SliderBorderThemeThickness}" />
<Setter Property="Foreground"
Value="{ThemeResource SliderTrackDecreaseBackgroundThemeBrush}" />
<Setter Property="FontFamily"
Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize"
Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="ManipulationMode"
Value="None" />
<Setter Property="IsThumbToolTipEnabled"
Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Slider">
<Grid Margin="{TemplateBinding Padding}">
<Grid.Resources>
<Style x:Key="SliderThumbStyle"
TargetType="Thumb">
<Setter Property="BorderThickness"
Value="0.8" />
<Setter Property="BorderBrush"
Value="{ThemeResource SliderThumbBorderThemeBrush}" />
<Setter Property="Background"
Value="{ThemeResource SliderThumbBackgroundThemeBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke"
Storyboard.TargetName="HorizontalBorder">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource SliderDisabledBorderThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke"
Storyboard.TargetName="VerticalBorder">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource SliderDisabledBorderThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill"
Storyboard.TargetName="HorizontalDecreaseRect">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource SliderTrackDecreaseDisabledBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill"
Storyboard.TargetName="HorizontalTrackRect">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource SliderTrackDisabledBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke"
Storyboard.TargetName="HorizontalTrackRect">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource SliderTrackDisabledBorderThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill"
Storyboard.TargetName="VerticalDecreaseRect">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource SliderTrackDecreaseDisabledBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill"
Storyboard.TargetName="VerticalTrackRect">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource SliderTrackDisabledBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke"
Storyboard.TargetName="VerticalTrackRect">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource SliderTrackDisabledBorderThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
Storyboard.TargetName="HorizontalThumb">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource SliderThumbDisabledBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
Storyboard.TargetName="HorizontalThumb">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource SliderThumbDisabledBorderThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
Storyboard.TargetName="VerticalThumb">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource SliderThumbDisabledBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
Storyboard.TargetName="VerticalThumb">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource SliderThumbDisabledBorderThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill"
Storyboard.TargetName="TopTickBar">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource SliderTickMarkOutsideDisabledForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill"
Storyboard.TargetName="HorizontalInlineTickBar">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource SliderTickMarkInlineDisabledForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill"
Storyboard.TargetName="BottomTickBar">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource SliderTickMarkOutsideDisabledForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill"
Storyboard.TargetName="LeftTickBar">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource SliderTickMarkOutsideDisabledForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill"
Storyboard.TargetName="VerticalInlineTickBar">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource SliderTickMarkInlineDisabledForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill"
Storyboard.TargetName="RightTickBar">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource SliderTickMarkOutsideDisabledForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="HeaderContentPresenter"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Content="{TemplateBinding Header}"
Style="{StaticResource HeaderContentPresenterStyle}" />
<Grid Grid.Row="1"
Margin="0,17.5,0,0">
<Grid.Resources>
<usercontrols:CustomSliderConverter x:Key="localCustomSliderControlConverter"
MyProperty="{Binding ActualWidth,ElementName=SliderContainer,Mode=OneTime}" />
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Rectangle Fill="Blue"
VerticalAlignment="Top"
HorizontalAlignment="Right"
Height="9"
Width="{Binding Path=Width,ElementName=HorizontalDecreaseRect,Converter={StaticResource localCustomSliderControlConverter}}" />
<Rectangle Fill="Gray"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Height="9"
Grid.Column="1"
Width="{Binding Path=Width,ElementName=HorizontalDecreaseRect,Converter={StaticResource localCustomSliderControlConverter},ConverterParameter=qwerty}" />
</Grid>
<Grid x:Name="SliderContainer"
Background="Transparent"
Grid.Row="1">
<Grid x:Name="HorizontalTemplate">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="17.5" />
<RowDefinition Height="Auto" />
<RowDefinition Height="30.5" />
</Grid.RowDefinitions>
<Rectangle x:Name="HorizontalTrackRect"
Grid.ColumnSpan="3"
Fill="Transparent"
Grid.Row="1" />
<Rectangle x:Name="HorizontalDecreaseRect"
Fill="Transparent"
Grid.Row="1" />
<TickBar x:Name="TopTickBar"
Grid.ColumnSpan="3"
Fill="{ThemeResource SliderTickmarkOutsideBackgroundThemeBrush}"
Height="{ThemeResource SliderOutsideTickBarThemeHeight}"
Margin="-4.5,0"
Visibility="Collapsed" />
<TickBar x:Name="HorizontalInlineTickBar"
Grid.ColumnSpan="3"
Fill="{ThemeResource SliderTickMarkInlineBackgroundThemeBrush}"
Height="{ThemeResource SliderTrackThemeHeight}"
Margin="-4.5,0"
Grid.Row="1"
Visibility="Collapsed" />
<TickBar x:Name="BottomTickBar"
Grid.ColumnSpan="3"
Fill="{ThemeResource SliderTickmarkOutsideBackgroundThemeBrush}"
Height="{ThemeResource SliderOutsideTickBarThemeHeight}"
Margin="-4.5,0"
Grid.Row="2"
Visibility="Collapsed" />
<Thumb x:Name="HorizontalThumb"
AutomationProperties.AccessibilityView="Raw"
Background="{ThemeResource SliderThumbBackgroundThemeBrush}"
Grid.Column="1"
DataContext="{TemplateBinding Value}"
Height="19"
Margin="0,13,0,0"
Grid.RowSpan="3"
Style="{StaticResource SliderThumbStyle}"
VerticalAlignment="Top"
HorizontalAlignment="Center"
Width="9.5" />
<Rectangle x:Name="HorizontalBorder"
Grid.ColumnSpan="3"
Grid.RowSpan="3"
Stroke="{TemplateBinding BorderBrush}"
StrokeThickness="{TemplateBinding BorderThickness}" />
</Grid>
<Grid x:Name="VerticalTemplate"
Visibility="Collapsed">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="13.5" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="13.5" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Rectangle x:Name="VerticalTrackRect"
Grid.Column="1"
Fill="{TemplateBinding Background}"
Grid.RowSpan="3"
Stroke="{ThemeResource SliderTrackBorderThemeBrush}" />
<Rectangle x:Name="VerticalDecreaseRect"
Grid.Column="1"
Fill="{TemplateBinding Foreground}"
Grid.Row="2" />
<TickBar x:Name="LeftTickBar"
Fill="{ThemeResource SliderTickmarkOutsideBackgroundThemeBrush}"
HorizontalAlignment="Right"
Margin="0,0,1.5,0"
Grid.RowSpan="3"
Visibility="Collapsed"
Width="{ThemeResource SliderOutsideTickBarThemeHeight}" />
<TickBar x:Name="VerticalInlineTickBar"
Grid.Column="1"
Fill="{ThemeResource SliderTickMarkInlineBackgroundThemeBrush}"
Grid.RowSpan="3"
Visibility="Collapsed"
Width="{ThemeResource SliderTrackThemeHeight}" />
<TickBar x:Name="RightTickBar"
Grid.Column="2"
Fill="{ThemeResource SliderTickmarkOutsideBackgroundThemeBrush}"
HorizontalAlignment="Left"
Margin="1.5,0,0,0"
Grid.RowSpan="3"
Visibility="Collapsed"
Width="{ThemeResource SliderOutsideTickBarThemeHeight}" />
<Thumb x:Name="VerticalThumb"
AutomationProperties.AccessibilityView="Raw"
Background="{ThemeResource SliderThumbBackgroundThemeBrush}"
Grid.Column="1"
DataContext="{TemplateBinding Value}"
Height="{ThemeResource SliderTrackThemeHeight}"
Grid.Row="1"
Style="{StaticResource SliderThumbStyle}"
Width="{ThemeResource SliderTrackThemeHeight}" />
<Rectangle x:Name="VerticalBorder"
Grid.Column="1"
Grid.RowSpan="3"
Stroke="{TemplateBinding BorderBrush}"
StrokeThickness="{TemplateBinding BorderThickness}" />
</Grid>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The value converter code:
public class CustomSliderConverter : DependencyObject, IValueConverter
{
public int MyProperty
{
get { return (int)GetValue(MyPropertyProperty); }
set { SetValue(MyPropertyProperty, value); }
}
// Using a DependencyProperty as the backing store for MyProperty. This enables animation, styling, binding, etc...
public static readonly DependencyProperty MyPropertyProperty =
DependencyProperty.Register("MyProperty", typeof(int), typeof(CustomSliderConverter), new PropertyMetadata(null));
public object Convert(object value, Type targetType, object parameter, string language)
{
try
{
if (MyProperty == 0) return value;
if (parameter == null)
{
double d = (MyProperty / 2) - (double)value;
Debug.WriteLine(d);
if (d < 0) return 0.0;
return d;
}
else
{
double d = (double)value - (MyProperty / 2);
Debug.WriteLine(d);
if (d < 0) return 0.0;
return d;
}
}
catch (Exception)
{
}
return value;
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
throw new NotImplementedException();
}
}
The other idea is to have three sliders,first for main sliding,second whose direction is reversed(leftslider) and third the usual(right slider).
Just bind the value of mainslider to the left and right sliders like below:
XAML:
<Grid Margin="0,100,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Slider x:Name="LeftSlider"
IsDirectionReversed="True"
Style="{StaticResource nothumb}"
Value="{Binding Value,ElementName=MainSlider,Converter={StaticResource localSliderConverter}}" />
<Slider x:Name="RightSlider" Grid.Column="1"
Style="{StaticResource nothumb}"
Value="{Binding Value, ElementName=MainSlider,Converter={StaticResource localSliderConverter},ConverterParameter=rightslider}" />
<Slider Grid.ColumnSpan="2"
x:Name="MainSlider"
Style="{StaticResource mainsliderstyle}" />
</Grid>
The converter for it:
public class SliderConverter:DependencyObject,IValueConverter
{
public int MyProperty
{
get { return (int)GetValue(MyPropertyProperty); }
set { SetValue(MyPropertyProperty, value); }
}
// Using a DependencyProperty as the backing store for MyProperty. This enables animation, styling, binding, etc...
public static readonly DependencyProperty MyPropertyProperty =
DependencyProperty.Register("MyProperty", typeof(int), typeof(SliderConverter), new PropertyMetadata(0));
public object Convert(object value, Type targetType, object parameter, string language)
{
if (parameter == null)
{
double d = (MyProperty / 2) - (double)value;
Debug.WriteLine(d);
if (d < 0) return 0;
return d*2;
}
else
{
double d = (double)value - (MyProperty / 2);
Debug.WriteLine(d);
if (d < 0) return 0.0;
return d*2;
}
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
throw new NotImplementedException();
}
}
Initialise in xaml this way:
<usercontrols:SliderConverter x:Key="localSliderConverter"
MyProperty="{Binding Maximum,ElementName=MainSlider}" />
Upvotes: 2
Related Questions
- How do I create an Excel (.XLS and .XLSX) file in C# without installing Microsoft Office?
- How do I remedy "The breakpoint will not currently be hit. No symbols have been loaded for this document." warning?
- Deep cloning objects
- How to set the Content-Type header for an HttpClient request?
- Setting Authorization Header of HttpClient
- The located assembly's manifest definition does not match the assembly reference
- Call one constructor from another
- How do you create a dropdownlist from an enum in ASP.NET MVC?
- Difference between Windows Phone 8.1 and Windows Phone Silverlight 8.1
- Windows Phone 8.1 Action Center like page design