如何在 Windows Phone 7 的滑块中添加圆形端盖

Question

这已经困扰我好几天了。这给我留下了对 Windows Phone 和 XAML 的一般印象。不应该这么难。我已经在我的 app.xaml 文件中添加了一个控制模板，该模板（大部分情况下）可以工作，除非拇指处于最大位置，这会导致圆形端盖被填充圆形拇指图像周围间隙所需的矩形覆盖我用。试图通过为第 2 列设置最小列宽或添加额外的列来防止这种情况会导致奇怪的恶作剧，例如拇指图像在移动到最大位置时会完全消失。

    <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

我终于让它工作了。关键是要避免弄乱随着滑块移动而调整列大小的网格。我将端盖移到网格外，它解决了问题。我还创建了几个渐变画笔来减少要涉水的 xaml 数量。

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