自定義滑塊與圖像或路徑

Question

我有我的WP7應用程序，我想restyle滑塊。我有一個問題，默認模板

我做了這樣的事情，但我不能「綁定」的拇指值。

 <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> 

將其上下移動。

Answer 1

您的滑塊模板有很大的缺乏行爲。它自己繪製，但沒有觸發器來定義對用戶點擊/拖動的反應等。

如果您想自定義滑塊的外觀，我建議您從原始模板開始並對其進行自定義。爲此，請下載應用程序Show Me The Templates!，將模板提取到您的項目中，然後開始自定義拇指。

我希望這是有幫助的。

編輯：這是錯誤的。這隻適用於WPF。在Silverlight中，我建議你的工具是摻合或者您可以使用Visual Studio的「解壓到資源」功能的模板： http://blogs.msdn.com/b/wpfsldesigner/archive/2010/06/03/creating-and-consuming-resource-dictionaries-in-wpf-and-silverlight.aspx

編輯編輯：我修改了內置滑動模板，包括你的拇指風格一個參考你應該去做的小調整的系統類型，而不是「翻轉和替換」。

<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>