双向滑块或范围滑块Windows Phone 8

Question

我想使用双向滑块来获取用户的最小值和最大值。我编辑了模板并在滑块上有两个矩形，但只有一个响应。在滑动第二个矩形时，第一个矩形响应而不是第二个矩形。

请告诉我们如何使双向滑块正常工作。

修改了滑块模板

<Style x:Key="CustomSlider" 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 PhoneChromeBrush}"/>
    <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="VerticalFill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid x:Name="HorizontalTemplate" Margin="{StaticResource PhoneHorizontalMargin}">
                        <Rectangle x:Name="HorizontalTrack" Height="12" IsHitTestVisible="False" Margin="0,22,0,10" Fill="#FF75B3C1"/>
                        <Rectangle x:Name="HorizontalFill" Height="12" IsHitTestVisible="False" Margin="0,22,0,10" Fill="#FFEE887E">
                            <Rectangle.Clip>
                                <RectangleGeometry Rect="0, 0, 6, 12"/>
                            </Rectangle.Clip>
                        </Rectangle>
                        <Rectangle x:Name="HorizontalCenterElement" HorizontalAlignment="Left" Height="24" Margin="0,10,0,0" Width="12" Fill="#FFBAB9C3">
                            <Rectangle.RenderTransform>
                                <TranslateTransform/>
                            </Rectangle.RenderTransform>
                        </Rectangle>
                        <Rectangle x:Name="HorizontalCenterElement1" HorizontalAlignment="Left" Height="24" Margin="369,44,0,34" Width="12" Fill="#FFBAB9C3">
                            <Rectangle.RenderTransform>
                                <TranslateTransform/>
                            </Rectangle.RenderTransform>
                        </Rectangle>
                    </Grid>
                    <Grid x:Name="VerticalTemplate" Margin="{StaticResource PhoneVerticalMargin}">
                        <Rectangle x:Name="VerticalTrack" Fill="{TemplateBinding Background}" IsHitTestVisible="False" Margin="18,0,18,0" Width="12"/>
                        <Rectangle x:Name="VerticalFill" Fill="{TemplateBinding Foreground}" IsHitTestVisible="False" Margin="18,0,18,0" Width="12">
                            <Rectangle.Clip>
                                <RectangleGeometry Rect="0, 0, 12, 6"/>
                            </Rectangle.Clip>
                        </Rectangle>
                        <Rectangle x:Name="VerticalCenterElement" Fill="{StaticResource PhoneForegroundBrush}" Height="12" Margin="12,0,12,0" VerticalAlignment="Top" Width="24">
                            <Rectangle.RenderTransform>
                                <TranslateTransform/>
                            </Rectangle.RenderTransform>
                        </Rectangle>
                    </Grid>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>