How can I add a thumb to a slider without losing the slider tap behavior? - silverlight-3.0

Question

The question may sound weird, here it goes:
Sliders in silverlight 3 for windows phone have a thumb but it's set to transparent:
<ControlTemplate x:Key="PhoneSimpleThumb" TargetType="Thumb">
<Rectangle Fill="Transparent"/>
</ControlTemplate>
Everything works ok with the above settings, if I tap the corner (or the part) of a slider the active zone goes towards that corner and so on...
Now If I want to add a thumb image let's say something like:
<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>
The slider loses it's behavior, now I can change its value only using the drag event. To be more specific now if I tap a slider part the active zone won't go to that part but if I drag from one part to another the slider active zone will go in the direction of the dragging.
this is the rest of the code which will use the above template ( I only use the horizontal slider ).
<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>
Does anyone of you gets what is happening here ?
Thanks.

Answer 1

The large negative margin
<Border Margin="-480,-18">
is where I'd start looking.
Try just setting a color to the thumb first.
Make small changes and incrementally add the styling you want.