这一直困扰着我好几天。这给我留下了一个特别是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>
答案 0 :(得分：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>