Windows phone 7 如何在windows phone 7中向滑块添加圆形端盖
这已经困扰我好几天了。这给我留下了一个对WindowsPhone和XAML的坏印象。不应该这么难。我已经在app.xaml文件中添加了一个控件模板，该模板可以（大部分）工作，但拇指处于最大位置时除外，这会导致圆角端盖被矩形覆盖，该矩形用于填充我使用的圆形拇指图像周围的间隙。试图通过为第2列设置最小列宽或添加额外的列来防止这种情况，会导致一些奇怪的恶作剧，比如拇指图像在移动到最大位置时完全消失Windows phone 7 如何在windows phone 7中向滑块添加圆形端盖,windows-phone-7,xaml,slider,app.xaml,Windows Phone 7,Xaml,Slider,App.xaml,这已经困扰我好几天了。这给我留下了一个对WindowsPhone和XAML的坏印象。不应该这么难。我已经在app.xaml文件中添加了一个控件模板，该模板可以（大部分）工作，但拇指处于最大位置时除外，这会导致圆角端盖被矩形覆盖，该矩形用于填充我使用的圆形拇指图像周围的间隙。试图通过为第2列设置最小列宽或添加额外的列来防止这种情况，会导致一些奇怪的恶作剧，比如拇指图像在移动到最大位置时完全消失 <ControlTemplate x:Key="PhoneSimpleRepeatButt
<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>
我终于让它工作了。关键是要避免弄乱网格，移动滑块时网格的列会调整大小。我将端盖移到网格外，解决了问题。我还创建了一对渐变笔刷，以减少要涉水的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>