自定义样式到滑块

Question

我有一个滑块，下面是它的外观图像。

我有一个白色背景，由于白色背景滑块的按钮根本看不到，所以如何改变它的风格？

我已经搜索过了，但找不到合适的帮助。

Answer 1

我设法自定义我的滑块（更改defalut模板）：

在XAML中：

<phone:PhoneApplicationPage.Resources>
    <Style x:Key="SliderStyle1" 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="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="{StaticResource PhoneHorizontalMargin}">
                            <Rectangle x:Name="HorizontalTrack" Fill="{TemplateBinding Background}" Height="12" IsHitTestVisible="False" Margin="0,22,0,50"/>
                            <!--<Rectangle x:Name="HorizontalFill" Fill="{TemplateBinding Foreground}" Height="12" IsHitTestVisible="False" Margin="0,22,0,50">-->
                                <Rectangle x:Name="HorizontalFill" Fill="BlueViolet" Height="12" IsHitTestVisible="False" Margin="0,22,0,50">
                                <Rectangle.Clip>
                                    <RectangleGeometry Rect="0, 0, 6, 12"/>
                                </Rectangle.Clip>
                            </Rectangle>
                            <!--<Rectangle x:Name="HorizontalCenterElement" Fill="{StaticResource PhoneForegroundBrush}" HorizontalAlignment="Left" Height="24" Margin="0,16,0,44" Width="12" Fill="Azure">-->
                                <Rectangle x:Name="HorizontalCenterElement" HorizontalAlignment="Left" Height="48" Margin="0,16,0,44" Width="12" Fill="Coral">
                                <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 x:Name="VerticalCenterElement" Fill="Azure" Height="48" Margin="12,0,12,0" VerticalAlignment="Top" Width="24">
                                <Rectangle.RenderTransform>
                                    <TranslateTransform/>
                                </Rectangle.RenderTransform>
                            </Rectangle>
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</phone:PhoneApplicationPage.Resources>

我已经更改了矩形的填充，轨道和矩形的大小。正如我在模拟器上测试它 - 工作。你可能知道（但对于粉丝）：

<Slider Orientation="Horizontal" HorizontalAlignment="Stretch" Grid.Row="2" Style="{StaticResource SliderStyle1}"/>

尝试一下，也许会有所帮助。

---

如果你想让它成圆（椭圆），它可以是这样的：

<Ellipse x:Name="HorizontalCenterElement" HorizontalAlignment="Left" Height="32" Margin="0,16,0,44" Width="12" Fill="Coral">
       <Ellipse.RenderTransform>
         <TranslateTransform/>
       </Ellipse.RenderTransform>
</Ellipse>

您也可以使用Path制作不同的数字example here。

Answer 2

您应该更改＆＃34; Horizo​​ntalCenterElement＆＃34;滑块样式中的矩形填充颜色。

这是我的源代码CustomSliderDesign

<!--change the rectangle-->
<Rectangle x:Name="HorizontalCenterElement"
           Fill="Blue"
           HorizontalAlignment="Left"
           Height="24"
           Margin="0,16,0,44"
           Width="12">
          <Rectangle.RenderTransform>
             <TranslateTransform />
          </Rectangle.RenderTransform>
 </Rectangle>