Comment ajouter un curseur à un curseur sans perdre le comportement du tapotement?

Question

La question peut sembler bizarre, ici il va:

Sliders en silverlight 3 pour windows phone ont un pouce, mais il est mis à la transparence:

<ControlTemplate x:Key="PhoneSimpleThumb" TargetType="Thumb"> 
    <Rectangle Fill="Transparent"/> 
</ControlTemplate> 

Tout fonctionne bien avec les réglages ci-dessus, si je tape le coin (ou la partie) d'un curseur de la zone active va vers ce coin et ainsi de suite ...

maintenant Si je veux ajouter une image de pouce disons quelque chose comme:

<ControlTemplate x:Key="PercentageThumbHorizontal" TargetType="Thumb"> 
     <Border Margin="-480,-18"> 
      <Rectangle Width="20" Height="20" RenderTransformOrigin="0.4,0.1" Margin="471,18,470,0" VerticalAlignment="Top" d:LayoutOverrides="Height"> 
       <Rectangle.Fill> 
        <ImageBrush Stretch="Fill" ImageSource="Resources/DesignElements/SliderThumb.png"/> 
       </Rectangle.Fill> 
      </Rectangle> 
     </Border> 
    </ControlTemplate> 

Le curseur perd son comportement, maintenant je peux changer sa valeur uniquement en utilisant l'événement drag. Pour être plus précis maintenant si j'appuie sur une partie de curseur la zone active ne passera pas à cette partie mais si je fais glisser d'une partie à l'autre la zone active de curseur ira dans la direction du glissement.

C'est le reste du code qui utilisera le modèle ci-dessus (je n'utilise que le curseur horizontal).

<Style x:Key="PercentageSliderStyle" TargetType="Slider"> 
     <Setter Property="BorderThickness" Value="0"/> 
     <Setter Property="BorderBrush" Value="Transparent"/> 
     <Setter Property="Maximum" Value="10"/> 
     <Setter Property="Minimum" Value="0"/> 
     <Setter Property="Value" Value="0"/> 
     <Setter Property="Background" Value="{StaticResource PhoneContrastBackgroundBrush}"/> 
     <Setter Property="Foreground" Value="{StaticResource PhoneAccentBrush}"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Slider"> 
        <Grid Background="Transparent"> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Normal"/> 
           <VisualState x:Name="MouseOver"/> 
           <VisualState x:Name="Disabled"> 
            <Storyboard> 
             <DoubleAnimation Duration="0" To="0.1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HorizontalTrack"/> 
             <DoubleAnimation Duration="0" To="0.1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="VerticalTrack"/> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="HorizontalFill"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="VerticalFill"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <Grid x:Name="HorizontalTemplate" Margin="{StaticResource PhoneHorizontalMargin}"> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="Auto"/> 
           <ColumnDefinition Width="Auto"/> 
           <ColumnDefinition Width="Auto" MinWidth="378"/> 
          </Grid.ColumnDefinitions> 
          <Rectangle x:Name="HorizontalTrack" Grid.ColumnSpan="3" Fill="{TemplateBinding Background}" Height="12" IsHitTestVisible="False" Margin="0,22,0,50" Opacity="0.2"/> 
          <Rectangle x:Name="HorizontalFill" Grid.Column="0" Fill="{TemplateBinding Foreground}" Height="12" IsHitTestVisible="False" Margin="0,22,0,50"/> 
          <RepeatButton x:Name="HorizontalTrackLargeChangeDecreaseRepeatButton" Grid.Column="0" IsTabStop="False" Template="{StaticResource PhoneSimpleRepeatButton}"/> 
          <RepeatButton x:Name="HorizontalTrackLargeChangeIncreaseRepeatButton" Grid.Column="2" IsTabStop="False" Template="{StaticResource PhoneSimpleRepeatButton}"/> 
          <Thumb x:Name="HorizontalThumb" Width="1" Margin="-1,0,0,0" Grid.Column="1" Template="{StaticResource PercentageThumbHorizontal}" > 
           <!--<Thumb.RenderTransform> 
            <ScaleTransform ScaleY="1" ScaleX="32"/> 
           </Thumb.RenderTransform> -->    
          </Thumb> 
         </Grid> 
         <Grid x:Name="VerticalTemplate" Margin="{StaticResource PhoneVerticalMargin}"> 
          <Grid.RowDefinitions> 
           <RowDefinition Height="*"/> 
           <RowDefinition Height="0"/> 
           <RowDefinition Height="Auto"/> 
          </Grid.RowDefinitions> 
          <Rectangle x:Name="VerticalTrack" Fill="{TemplateBinding Background}" IsHitTestVisible="False" Margin="12,0" Opacity="0.2" Grid.RowSpan="3" Width="12"/> 
          <Rectangle x:Name="VerticalFill" Fill="{TemplateBinding Foreground}" IsHitTestVisible="False" Margin="12,0" Grid.Row="2" Width="12"/> 
          <RepeatButton x:Name="VerticalTrackLargeChangeDecreaseRepeatButton" IsTabStop="False" Grid.Row="0" Template="{StaticResource PhoneSimpleRepeatButton}"/> 
          <RepeatButton x:Name="VerticalTrackLargeChangeIncreaseRepeatButton" IsTabStop="False" Grid.Row="2" Template="{StaticResource PhoneSimpleRepeatButton}"/> 
          <Thumb x:Name="VerticalThumb" Grid.Column="1" Margin="-1,0,0,0" RenderTransformOrigin="0.5,0.5" Template="{StaticResource PhoneSimpleThumb}" Width="1"> 
           <Thumb.RenderTransform> 
            <ScaleTransform ScaleY="32" ScaleX="1"/> 
           </Thumb.RenderTransform> 
          </Thumb> 
         </Grid> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

Est-ce que quelqu'un d'entre vous obtient ce qui se passe ici?

Merci.

Answer 1

La grande marge négative

<Border Margin="-480,-18"> 

est où je commence à regarder.

Essayez simplement de définir une couleur sur le pouce en premier.
Faites de petits changements et ajoutez progressivement le style que vous voulez.