Пользовательский слайдер с изображением или дорогой

Question

У меня есть ползунок в моем приложении WP7, который я хотел бы восстановить. У меня проблема с шаблоном по умолчанию

Я сделал что-то подобное, но я не могу «привязать» большой палец к значению.

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