定制滑块与图像或路径路径、滑块、图像
我在WP7应用程序的滑块我想restyle。具有默认模板有问题即时通讯
I have a slider in my WP7 app that I would like to restyle. Im having a problem with default template
我做了这样的事情，但我不能绑定拇指值。
I made something like this but I cannot "bind" the thumb to the value.
<Style x:Key="ThumbStyle1" TargetType="Thumb">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Grid >
<Path Data="M13.832941,48.001114 L-0.00066526519,15.584446 L-0.1685528,3.1627214 L46.375076,3.1882343 L46.59383,15.594595 L33.375225,48.063122 z" Fill="#FF6D6D74" Margin="-0.668,2.662,0.906,-0.562" Stretch="Fill" Stroke="Black" UseLayoutRounding="False"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="tempoSliderControlTemplate" TargetType="Slider" >
<Grid>
<Rectangle Fill="#FF6D6D74" Margin="25,0,25,0" Stroke="Black"/>
<Thumb x:Name="VerticalThumb" Width="50" Height="50" Style="{StaticResource ThumbStyle1}" RenderTransformOrigin="0.5,0.5" CacheMode="BitmapCache"/>
</Grid>
</ControlTemplate>
将它移到向上和向下。
to move it up and down.
推荐答案
您模板的滑块有pretty的大缺乏的行为。它绘制本身，但没有触发器来定义反应用户点击/拖拽等。
Your template for the Slider has a pretty big lack of behavior. It draws itself, but has no triggers to define reactions to user clicks / drags, etc.
如果您想自定义滑块的样子，我建议你开始与原来的模板，并对其进行自定义。要做到这一点，下载的应用程序示范的模板！，提取模板项目，然后开始定制拇指。
If you want to customize the look of the slider, I would suggest that you start with the original template and customize it. To do this, download the app Show Me The Templates!, extract the template to your project, then start customizing the thumb.
我希望这是有帮助的。
编辑：这是错误的。这仅适用于WPF。在Silverlight中，我建议你的工具是混合，也可以使用Visual Studio的解压到资源的功能模板： http://blogs.msdn.com/b/wpfsldesigner/archive/2010/06/03/creating-and-consuming-resource-dictionaries-in-wpf-and-silverlight.aspx
This is wrong. This only works in WPF. In Silverlight, the tool I'd recommend is Blend OR you can use Visual Studio's "Extract to Resource" feature on the template: http://blogs.msdn.com/b/wpfsldesigner/archive/2010/06/03/creating-and-consuming-resource-dictionaries-in-wpf-and-silverlight.aspx
编辑编辑：我修改了内置滑动模板，包括你的拇指风格为参考的小调整系统的类型，你应该去，而不是推倒重来
Edit I modified the builtin slider template to include your thumb style as a reference to the type of system of small tweaks you should go for rather than a "rip and replace".
<Grid>
<Grid.Resources>
<Style x:Key="ThumbStyle1" TargetType="Thumb">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Grid >
<Path Data="M13.832941,48.001114 L-0.00066526519,15.584446 L-0.1685528,3.1627214 L46.375076,3.1882343 L46.59383,15.594595 L33.375225,48.063122 z" Fill="#FF6D6D74" Margin="-0.668,2.662,0.906,-0.562" Stretch="Fill" Stroke="Black" UseLayoutRounding="False"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SliderStyle1" TargetType="Slider">
<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"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Slider">
<Grid x:Name="Root">
<Grid.Resources>
<ControlTemplate x:Key="RepeatButtonTemplate">
<Grid x:Name="Root" Background="Transparent" Opacity="0"/>
</ControlTemplate>
</Grid.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="HorizontalTrackRectangleDisabledOverlay">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ThumbDisabledOverlay">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="VerticalTrackRectangleDisabledOverlay">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused"/>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="HorizontalTemplate" Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Rectangle x:Name="TrackRectangle" Grid.ColumnSpan="3" Grid.Column="0" Fill="#FFE6EFF7" Height="3" Margin="5,0,5,0" RadiusY="1" RadiusX="1" Stroke="#FFA3AEB9" StrokeThickness="{TemplateBinding BorderThickness}"/>
<Rectangle x:Name="HorizontalTrackRectangleDisabledOverlay" Grid.ColumnSpan="3" Grid.Column="0" Fill="White" Height="3" Margin="5,0,5,0" Opacity=".55" RadiusY="1" RadiusX="1" Visibility="Collapsed"/>
<RepeatButton x:Name="HorizontalTrackLargeChangeDecreaseRepeatButton" Grid.Column="0" IsTabStop="False" Template="{StaticResource RepeatButtonTemplate}"/>
<Thumb x:Name="HorizontalThumb" Grid.Column="1" Height="18" IsTabStop="True" Width="11"/>
<Rectangle x:Name="ThumbDisabledOverlay" Grid.Column="1" Fill="White" Opacity=".55" RadiusY="2" RadiusX="2" Visibility="Collapsed" Width="11"/>
<RepeatButton x:Name="HorizontalTrackLargeChangeIncreaseRepeatButton" Grid.Column="2" IsTabStop="False" Template="{StaticResource RepeatButtonTemplate}"/>
</Grid>
<Grid x:Name="VerticalTemplate" Background="{TemplateBinding Background}" Visibility="Collapsed">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Rectangle Fill="#FFE6EFF7" Margin="0,5,0,5" RadiusY="1" Grid.Row="0" RadiusX="1" Grid.RowSpan="3" Stroke="#FFA3AEB9" StrokeThickness="{TemplateBinding BorderThickness}" Width="3"/>
<Rectangle x:Name="VerticalTrackRectangleDisabledOverlay" Fill="White" Margin="0,5,0,5" Opacity=".55" RadiusY="1" Grid.Row="0" RadiusX="1" Grid.RowSpan="3" Visibility="Collapsed" Width="3"/>
<RepeatButton x:Name="VerticalTrackLargeChangeDecreaseRepeatButton" IsTabStop="False" Grid.Row="2" Template="{StaticResource RepeatButtonTemplate}"/>
<Thumb x:Name="VerticalThumb" Height="11" IsTabStop="True" Grid.Row="1" Width="18" Style="{StaticResource ThumbStyle1}"/>
<RepeatButton x:Name="VerticalTrackLargeChangeIncreaseRepeatButton" IsTabStop="False" Grid.Row="0" Template="{StaticResource RepeatButtonTemplate}"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Slider Style="{StaticResource SliderStyle1}" Orientation="Vertical" HorizontalAlignment="Left" />
</Grid>
