0
如何创建与中心的Windows Phone 8.1滑块？就像在gif文件中一样。 任何想法？它真的吗？如何设置参考中心？ 
如何创建与中心的Windows Phone 8.1滑块？
A
回答
2
有两种方法，你可以做到这一点：其宽度改变滑块内
1.Have两个虚拟左和右矩形时的实际矩形变化的宽度。
的代码：
XAML：
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>
值变换器代码：
滑块的两个伪矩形<Slider Style="{StaticResource SliderStyle3}"
x:Name="MySlider"
Value="50"
Maximum="100">
</Slider>
风格
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();
}
}
另一个想法是有三个滑块，第一个用于主滑动，第二个滑块的方向相反（左滑块），第三个滑块（右滑块）。
只是mainslider的值绑定到左侧和右侧的滑块象下面这样：
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>
它的转换器：
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();
}
}
初始化在XAML中这样说：
<usercontrols:SliderConverter x:Key="localSliderConverter"
MyProperty="{Binding Maximum,ElementName=MainSlider}" />
0
您可以使用Microsoft Blend使用状态来创建它。正如我可以看到7个不同的状态，所以创建7个状态为此控件或网格无论您使用，然后在事件或点击按钮触发。
Its link for stackoverflow question which changes states on some criteria 如果你想知道它是如何工作的，那么use this link.希望它有帮助。
相关问题
- 1. 如何在Windows Phone 8.1上创建SecondaryTile？
- 2. 如何创建Xamarin.Forms Windows phone 8.1项目？
- 3. （Windows phone 8.1）在windows phone 8.1创建圆角图像按钮
- 4. 与Windows Phone的8.1
- 5. Windows Phone中动态创建按钮8.1
- 6. 与Windows Phone 8.1 Dropdownlist
- 7. 如何在Windows Phone 8.1/Windows 10上创建自定义的VirtualizingPanel？
- 8. 音量级别不会在Windows Phone 8.1滑块中更改
- 9. Windows phone 8.1创建联系任务
- 10. 如何在windows phone 8.1中创建推送通知频道
- 11. 如何在Windows Phone 8.1中创建“照片库”
- 12. Windows Phone的8.1
- 13. Windows Phone 8.1上的WebRtc 8.1
- 14. 如何创建的Windows Phone
- 15. Windows Phone 8.1 WebAuthenticationBrokerContinuationEventArgs
- 16. Windows Phone 8.1 IRC
- 17. 如何为Windows Phone 8.1创建一个System.Net.Sockets.Socket实例应用
- 18. System.NullReferenceException的Windows Phone 8.1
- 19. Windows Phone 8.1中的延迟
- 20. windows phone 8.1中的writeablebitmap
- 21. windows phone 8.1中的MessageDialog Box？
- 22. 自定义滑块的Windows 8.1
- 23. 如何在Windows Phone 8.1中显示rtf？
- 24. 在Windows Phone 8.1后面的代码中创建新页面
- 25. 如何填补与Windows Phone 8.1中的URL 20％的差距？
- 26. Windows Phone Silverlight 8.1和Windows Phone 8.1开发之间的区别
- 27. 中心滑块与css
- 28. Windows Phone 8.1 HubApp + HtmlAgilityPack
- 29. Windows Phone 8.1 MainPage Frame.navigate
- 30. Mutex和Windows Phone 8.1