How can I add rounded end caps to a slider bar in windows phone 7

Question

This has been bugging me for days. It's left me with a bad impression of Windows Phone specifically and XAML in general. It should not be this hard. I've added a control template to my app.xaml file which works (mostly) except when the thumb is in the maximum position, which causes the rounded end cap to be overwritten by the rectangle needed to fill the gaps around the round thumb image I use. Trying to prevent this by setting a minimum column width for column 2 or adding an extra column results in bizarre shenanigans like the thumb image disappearing entirely when moved to the maximum position.

    <ControlTemplate x:Key="PhoneSimpleRepeatButton" TargetType="RepeatButton">
        <Rectangle Fill="Transparent"/>
    </ControlTemplate>
    <Style x:Key="MySlider" 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="25,0,25,0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="23"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <Ellipse Grid.Column="0" Width="10"  HorizontalAlignment="Left" Height="10">
                                <Ellipse.Fill>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <GradientStop Color="Blue" Offset="0" />
                                        <GradientStop Color="LightBlue" Offset="1" />
                                    </LinearGradientBrush>
                                </Ellipse.Fill>
                                <Ellipse.Clip>
                                    <RectangleGeometry Rect="0,0,5,10"/>
                                </Ellipse.Clip>
                            </Ellipse>
                            <Ellipse Grid.Column="2" Width="10" HorizontalAlignment="Right" Height="10">
                                <Ellipse.Fill>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <GradientStop Color="Black" Offset="0" />
                                        <GradientStop Color="LightGray" Offset="1" />
                                    </LinearGradientBrush>
                                </Ellipse.Fill>
                                <Ellipse.Clip>
                                    <RectangleGeometry Rect="5,0,5,10"/>
                                </Ellipse.Clip>
                            </Ellipse>
                            <Rectangle x:Name="HorizontalFill" Grid.Column="0" Height="10" IsHitTestVisible="False" Margin="5,0,0,0">
                                    <Rectangle.Fill>
                                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <GradientStop Color="Blue" Offset="0" />
                                        <GradientStop Color="LightBlue" Offset="1" />
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                            </Rectangle>
                            <Rectangle x:Name="HorizontalTrack" Grid.Column="2" Height="10" IsHitTestVisible="False" Margin="0,0,5,0">
                                <Rectangle.Fill>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <GradientStop Color="Black" Offset="0" />
                                        <GradientStop Color="LightGray" Offset="1" />
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                                <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" Grid.Column="1" Height="23" Width="23">
                                <Thumb.Template>
                                    <ControlTemplate>
                                        <Canvas Background="Transparent" Height="23" Width="23">
                                            <Rectangle Height="10" Width="11" IsHitTestVisible="False" Margin="0,7,0,0">
                                                <Rectangle.Fill>
                                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                                        <GradientStop Color="Blue" Offset="0" />
                                                        <GradientStop Color="LightBlue" Offset="1" />
                                                    </LinearGradientBrush>
                                                </Rectangle.Fill>
                                            </Rectangle>
                                            <Rectangle Height="10" Width="11" IsHitTestVisible="False" Margin="12,7,0,0">
                                                <Rectangle.Fill>
                                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                                        <GradientStop Color="Black" Offset="0" />
                                                        <GradientStop Color="LightGray" Offset="1" />
                                                    </LinearGradientBrush>
                                                </Rectangle.Fill>
                                            </Rectangle>
                                            <Image Source="Images/thumb.png" Width="23" Height="23"/>
                                        </Canvas>
                                    </ControlTemplate>
                                </Thumb.Template>
                            </Thumb>
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Answer 1

I finally got it working. The key is to avoid messing with the grid whose columns are resized as the slider is moved. I moved the end caps outside the grid and it solved the problem. I also created a couple gradient brushes to reduce the amount to xaml to wade through.

    <ControlTemplate x:Key="PhoneSimpleRepeatButton" TargetType="RepeatButton">
        <Rectangle Fill="Transparent"/>
    </ControlTemplate>
    <LinearGradientBrush x:Key="LowerTrackGradient" StartPoint="0,0" EndPoint="0,1">
        <GradientStop Color="Blue" Offset="0" />
        <GradientStop Color="LightBlue" Offset="1" />
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="UpperTrackGradient" StartPoint="0,0" EndPoint="0,1">
        <GradientStop Color="Black" Offset="0" />
        <GradientStop Color="LightGray" Offset="1" />
    </LinearGradientBrush>
    <Style x:Key="MySlider" 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>
                        <Ellipse Fill="{StaticResource LowerTrackGradient}" Width="10" HorizontalAlignment="Left" Height="10" Margin="20,0,0,0">
                            <Ellipse.Clip>
                                <RectangleGeometry Rect="0,0,5,10"/>
                            </Ellipse.Clip>
                        </Ellipse>
                        <Ellipse Fill="{StaticResource UpperTrackGradient}" Width="10" HorizontalAlignment="Right" Height="10" Margin="0,0,20,0">
                            <Ellipse.Clip>
                                <RectangleGeometry Rect="5,0,5,10"/>
                            </Ellipse.Clip>
                        </Ellipse>
                        <Grid x:Name="HorizontalTemplate" Margin="25,0,25,0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="23"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <Rectangle x:Name="HorizontalFill" Fill="{StaticResource LowerTrackGradient}" Grid.Column="0" Height="10" IsHitTestVisible="False">
                            </Rectangle>
                            <Rectangle Fill="{StaticResource UpperTrackGradient}" x:Name="HorizontalTrack" Grid.Column="2" Height="10" IsHitTestVisible="False">
                            </Rectangle>
                                <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" Grid.Column="1" Height="23" Width="23">
                                <Thumb.Template>
                                    <ControlTemplate>
                                        <Canvas Background="Transparent" Height="23" Width="23">
                                            <Rectangle Fill="{StaticResource LowerTrackGradient}" Height="10" Width="11" IsHitTestVisible="False" Margin="0,7,0,0">
                                            </Rectangle>
                                            <Rectangle Fill="{StaticResource UpperTrackGradient}" Height="10" Width="11" IsHitTestVisible="False" Margin="12,7,0,0">
                                            </Rectangle>
                                            <Image Source="Images/thumb.png" Width="23" Height="23"/>
                                        </Canvas>
                                    </ControlTemplate>
                                </Thumb.Template>
                            </Thumb>
                        </Grid>
                    </Grid>
                </ControlTemplate>