如何把slider转换为非系统的样式？

Question

再把slider转换为自定义的样式时遇到阻碍，有两个问题需要解答一下。第一个：下面模版里面

Value="{StaticResource SliderTrackPressedBackgroundThemeBrush}"里面SliderTrackPressedBackgroundThemeBrush能修改吗？在哪里修改？

第二个：slider的滑动条的位置是否是写死的？我做了下面的修改，滑动条显示就不正常了。
<Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="17"/>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="32"/>
                                    </Grid.RowDefinitions>

这样滑动条显示正常，如图：如果改为

<Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="19*"/>
                                    <ColumnDefinition Width="852*"/>
                                    <ColumnDefinition Width="19*"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="27*"/>
                                    <RowDefinition Height="44*"/>
                                    <RowDefinition Height="28*"/>
                                </Grid.RowDefinitions>

滚动条就显示在中间，并且已中间作为0点显示，不能往前面拖动，请帮忙解答。

Answer 1

有人帮忙解答一下吗？

Answer 2

你是自己重写的样式 吗？你按照这个区重写控件模板

    					<Grid x:Name="HorizontalTemplate" Background="Transparent">
    						<Grid.ColumnDefinitions>
    							<ColumnDefinition Width="Auto"/>
    							<ColumnDefinition Width="Auto"/>
    							<ColumnDefinition Width="*"/>
    						</Grid.ColumnDefinitions>
    						<Grid.RowDefinitions>
    							<RowDefinition Height="17"/>
    							<RowDefinition Height="Auto"/>
    							<RowDefinition Height="32"/>
    						</Grid.RowDefinitions>
    						<Rectangle x:Name="HorizontalTrackRect" Grid.ColumnSpan="3" Fill="{TemplateBinding Background}" Grid.Row="1"/>
    						<Rectangle x:Name="HorizontalDecreaseRect" Fill="{TemplateBinding Foreground}" Grid.Row="1"/>
    						<TickBar x:Name="TopTickBar" Grid.ColumnSpan="3" Fill="{StaticResource SliderTickmarkOutsideBackgroundThemeBrush}" Height="{StaticResource SliderOutsideTickBarThemeHeight}" Margin="0,0,0,2" Visibility="Collapsed" VerticalAlignment="Bottom"/>
    						<TickBar x:Name="HorizontalInlineTickBar" Grid.ColumnSpan="3" Fill="{StaticResource SliderTickMarkInlineBackgroundThemeBrush}" Height="{StaticResource SliderTrackThemeHeight}" Grid.Row="1" Visibility="Collapsed"/>
    						<TickBar x:Name="BottomTickBar" Grid.ColumnSpan="3" Fill="{StaticResource SliderTickmarkOutsideBackgroundThemeBrush}" Height="{StaticResource SliderOutsideTickBarThemeHeight}" Margin="0,2,0,0" Grid.Row="2" Visibility="Collapsed" VerticalAlignment="Top"/>
    						<Rectangle x:Name="HorizontalBorder" Grid.ColumnSpan="3" Grid.Row="1" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}"/>
    						<Thumb x:Name="HorizontalThumb" Background="{StaticResource SliderThumbBackgroundThemeBrush}" Grid.Column="1" DataContext="{TemplateBinding Value}" Height="{StaticResource SliderTrackThemeHeight}" Grid.Row="1" Style="{StaticResource SliderThumbStyle}" Width="{StaticResource SliderTrackThemeHeight}"/>
    						<Rectangle x:Name="FocusVisualWhiteHorizontal" Grid.ColumnSpan="3" IsHitTestVisible="False" Opacity="0" Grid.RowSpan="3" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/>
    						<Rectangle x:Name="FocusVisualBlackHorizontal" Grid.ColumnSpan="3" IsHitTestVisible="False" Opacity="0" Grid.RowSpan="3" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/>
    					</Grid>

Answer 3

谢谢回复，我就是按照上面的模版改写的，

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
    <RowDefinition Height="17"/>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="32"/>
    </Grid.RowDefinitions>
这个划分是不能改的吗？我改了就成了第二种样式

Answer 4

    						<Grid.ColumnDefinitions>
    							<ColumnDefinition Width="Auto"/>
    							<ColumnDefinition Width="Auto"/>
    							<ColumnDefinition Width="*"/>
                                <!--<ColumnDefinition Width="19*"/>
                                <ColumnDefinition Width="852*"/>
                                <ColumnDefinition Width="19*"/>-->
                            </Grid.ColumnDefinitions>
    						<Grid.RowDefinitions>
    							<!--<RowDefinition Height="17"/>
    							<RowDefinition Height="Auto"/>
    							<RowDefinition Height="32"/>-->
                                <RowDefinition Height="27*"/>
                                <RowDefinition Height="44*"/>
                                <RowDefinition Height="28*"/>
                            </Grid.RowDefinitions>

Hi你改成这样就不会滚动条就显示在中间，并且已中间作为0点显示，不能往前面拖动

Answer 5

ColumnDefinition 这个属性必须这么设置是吗？不能改？还有

Fill="{StaticResource SliderTickmarkOutsideBackgroundThemeBrush}"里面SliderTrackPressedBackgroundThemeBrush能修改吗？在哪里修改？

Answer 6

Value="{StaticResource SliderTrackPressedBackgroundThemeBrush}"

最初：

     <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="HorizontalDecreaseRect">
    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTrackDecreasePressedBackgroundThemeBrush}"/>
    </ObjectAnimationUsingKeyFrames>

改为

    									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="HorizontalDecreaseRect">
    										<DiscreteObjectKeyFrame KeyTime="0" Value="SkyBlue"/>
    									</ObjectAnimationUsingKeyFrames>

当然能改啊如上

Hi,我msn:[e-mail]有空一起探讨3Q

Answer 7

你msn怎么一直不在？有时间上线呗~

Answer 8

Hi,

第一个的话你可以改成自己的，不过系统默认的那个你不能改。

第二个的我自己实验好像的确是不能够改的，你试试在Blend能不能够修改到你需要的样式。

---

Aaron
MSDN Community Support | Feedback to us
Develop and promote your apps in Windows Store
Please remember to mark the replies as answers if they help and unmark them if they provide no help.