代码之家 › 专栏 › 技术社区 › falukky

如何更改前后的滚动条颜色

slider wpf

falukky · 技术社区 · 8 年前

如您所见,前后值的颜色相同。

这是我的

<style x:key=“speedFocusVisualStyte”>
<setter property=“control.template”>
<setter.value>
<控制模板>
<矩形x:name=“FocusStyle”
strokedasharray=“4 4”
半径x=“5”
半径y=“5”
fill=“透明”
行程=“99029CC7”
strokethickness=“1”/>
</controltemplate>
</setter.value>
&;
&风格/风格;

<style x:key=“speedSliderThumbStyle”targetType=“x:type thumb”>
<setter property=“overridesDefaultStyle”value=“true”/>
<setter property=“template”>
<setter.value>
<controlTemplate targetType=“x:type thumb”>
格栅& GT;
<border name=“外订单”
height=“12”
width=“12”
不透明度=“1”
borderthickness=“2”
cornerradius=“20”/>
&!--<textBlock x:name=“幻灯片值”
fontsize=“10”
前景=“a0a0a0”
VerticalAlignment=“中心”
HorizontalSignment=“中心”
fontweight=“粗体”
text=“绑定标记,relativesource=relativesource ancestortype=滑块”
margin=“0,-1,0,0”/>-->
&!--text=“绑定值,relativesource=relativesource ancestortype=slider,stringformat=0:n1”-->
和/格栅& GT;
<controlTemplate.triggers>
<trigger property=“isEnabled”value=“true”>
&!--<setter targetname=“sliderValue”property=“foreground”value=“gray”/>-->
<setter targetname=“outerOrder”property=“background”value=“gray”/>
<setter targetname=“outerOrder”property=“borderBrush”value=“gray”/>
</trigger>
<trigger property=“ismouseover”value=“true”>
&!--<setter targetname=“sliderValue”property=“foreground”value=“black”/>-->
<setter targetname=“outerOrder”property=“background”value=“a0a0”/>gt;
<setter targetname=“outerOrder”property=“borderBrush”value=“a0a0”/>gt;
</trigger>
<trigger property=“isEnabled”value=“false”>
&!--<setter targetname=“sliderValue”property=“foreground”value=“gray”/>-->
<setter targetname=“outerOrder”property=“background”value=“动态源应用程序标题栏颜色”/>gt;
<setter targetname=“outerOrder”property=“borderBrush”value=“动态源应用程序标题栏颜色”/>gt;
</trigger>
</controltemplate.triggers>
</controltemplate>
</setter.value>
&;
&风格/风格;

<style x:key=“speedSliderRepeatButtonStyle”targetType=“x:type repeatButton”>
<setter property=“overridesDefaultStyle”value=“true”/>
<setter property=“istabstop”value=“false”/>
<setter property=“focusable”value=“false”/>
<setter property=“template”>
<setter.value>
<controlTemplate targetType=“x:type repeatButton”>
<rectangle fill=“透明”/>
</controltemplate>
</setter.value>
&;
&风格/风格;

<controlTemplate x:key=“HorizontalSlider”targetType=“x:Type Slider”>
<grid margin=“5”>
<grid.rowdefinitions>
<rowdefinition height=“自动”/>
<rowdefinition height=“auto”minheight=“模板绑定minheight”/>gt;
<rowdefinition height=“自动”/>
</grid.rowdefinitions>
<tickbar x:name=“toptick”visibility=“colled”fill=“lightgray”placement=“top”snapstodevicepexels=“true”
height=“4”margin=“0,0,0,2”/>
<border x:name=“跟踪背景”
grid.row=“1”
margin=“10,0”
borderthickness=“2”
borderBrush=“动态源labelDisableForegroundColor”
VerticalAlignment=“中心”
height=“1”/>
<track x:name=“part_track”grid.row=“1”>
<track.decreaserepeatButton>
<repeatButton command=“x:static slider.decreaselarge”style=“staticresource speedsliderrepeatbuttonstyle”/>gt;
</track.decreaserepeatButton>
<track.increaserepeatButton>
<repeatButton command=“x:static slider.increaselarge”style=“staticresource speedsliderrepeatbuttonstyle”/>gt;
</track.increaserepeatButton>
<track.thumb>
<thumb x:name=“thumb”style=“静态资源速度幻灯片thumbstyle”/>gt;
</track.thumb>
</track>
<tickbar x:name=“BottomTick”grid.row=“2”visibility=“colled”fill=“lightGray”placement=“bottom”
snapstodevicepexels=“true”height=“4”margin=“0,2,0,0”/>gt;
和/格栅& GT;
<controlTemplate.triggers>
<trigger property=“TickPlacement”value=“TopLeft”>
<setter targetname=“toptick”property=“visibility”value=“visible”/>
</trigger>
<trigger property=“TickPlacement”value=“BottomRight”>
<setter targetname=“BottomTick”property=“visibility”value=“visible”/>
</trigger>
<trigger property=“TickPlacement”value=“两者”>
<setter targetname=“toptick”property=“visibility”value=“visible”/>
<setter targetname=“BottomTick”property=“visibility”value=“visible”/>
</trigger>
<trigger property=“isEnabled”value=“false”>
<setter targetname=“trackbackground”property=“borderBrush”value=“dynamicResource ListViewItemBorderBrushColor”/>gt;
</trigger>
&!--<trigger property=“isfocused”value=“true”>
<setter targetname=“trackbackground”property=“borderbrush”value=“orange”/>
</trigger>-->
</controltemplate.triggers>
</controltemplate>

<controlTemplate x:key=“VerticalSlider”targetType=“x:Type Slider”>
<grid margin=“5”>
<grid.columndefinitions>
<columnDefinition width=“自动”/>
<columnDefinition width=“auto”minwidth=“模板绑定minwidth”/>gt;
<columnDefinition width=“自动”/>
</grid.columndefinitions>
<tickbar x:name=“toptick”visibility=“colled”fill=“lightgray”placement=“left”snapstodevicepexels=“true”
width=“4”margin=“0,0,2,0”/>
<border x:name=“跟踪背景”
grid.column=“1”
边距=0,10”
borderthickness=“2”
borderBrush=“浅灰色”
HorizontalSignment=“中心”
width=“4”/>
<track x:name=“part_track”grid.column=“1”>
<track.decreaserepeatButton>
<repeatButton command=“x:static slider.decreaselarge”style=“staticresource speedsliderrepeatbuttonstyle”/>gt;
</track.decreaserepeatButton>
<track.increaserepeatButton>
<repeatButton command=“x:static slider.increaselarge”style=“staticresource speedsliderrepeatbuttonstyle”/>gt;
</track.increaserepeatButton>
<track.thumb>
<thumb x:name=“thumb”style=“静态资源幻灯片thumbstyle”/>gt;
</track.thumb>
</track>
<Tickbar x:name=“BottomTick”网格。column=“2”
visibility=“可见”
fill=“浅灰色”
placement=“右”
width=“4”
margin=“2,0,0,0”
snapstodevicepexels=“真”/>
和/格栅& GT;
<controlTemplate.triggers>
<trigger property=“TickPlacement”value=“TopLeft”>
<setter targetname=“toptick”property=“visibility”value=“visible”/>
</trigger>
<trigger property=“TickPlacement”value=“BottomRight”>
<setter targetname=“BottomTick”property=“visibility”value=“visible”/>
</trigger>
<trigger property=“TickPlacement”value=“两者”>
<setter targetname=“toptick”property=“visibility”value=“visible”/>
<setter targetname=“BottomTick”property=“visibility”value=“visible”/>
</trigger>
</controltemplate.triggers>
</controltemplate>
< /代码> 

我尝试在speedSliderRepeatButtonStyle内更改值,但这没有起到帮助。


如您所见,前后值的颜色相同。

这是我的Style:



















<Style x:Key="SpeedFocusVisualStyte">
    <Setter Property="Control.Template">
        <Setter.Value>
            <ControlTemplate>
                <Rectangle x:Name="FocusStyle" 
                           StrokeDashArray="4 4"
                           RadiusX="5"
                           RadiusY="5" 
                           Fill="Transparent"
                           Stroke="#99029cc7" 
                           StrokeThickness="1" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="SpeedSliderThumbStyle" TargetType="{x:Type Thumb}">
    <Setter Property="OverridesDefaultStyle" Value="True"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Thumb}">
                <Grid>
                    <Border Name="outerBorder"
                            Height="12"
                            Width="12"
                            Opacity="1" 
                            BorderThickness="2"
                            CornerRadius="20"/>
                    <!--<TextBlock x:Name="sliderValue"
                               FontSize="10"
                               Foreground="#A0A0A0"
                               VerticalAlignment="Center" 
                               HorizontalAlignment="Center" 
                               FontWeight="Bold"
                               Text="{Binding Tag, RelativeSource={RelativeSource AncestorType=Slider}}"
                               Margin="0,-1,0,0"/>-->
                    <!--Text="{Binding Value, RelativeSource={RelativeSource AncestorType=Slider}, StringFormat={}{0:N1}}"-->
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="True">
                        <!--<Setter TargetName="sliderValue" Property="Foreground" Value="Gray"/>-->
                        <Setter TargetName="outerBorder" Property="Background" Value="Gray"/>
                        <Setter TargetName="outerBorder" Property="BorderBrush" Value="Gray"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <!--<Setter TargetName="sliderValue" Property="Foreground" Value="Black"/>-->
                        <Setter TargetName="outerBorder" Property="Background" Value="#A0A0A0"/>
                        <Setter TargetName="outerBorder" Property="BorderBrush" Value="#A0A0A0"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <!--<Setter TargetName="sliderValue" Property="Foreground" Value="Gray"/>-->
                        <Setter TargetName="outerBorder" Property="Background" Value="{DynamicResource ApplicationTitleBarColor}"/>
                        <Setter TargetName="outerBorder" Property="BorderBrush" Value="{DynamicResource ApplicationTitleBarColor}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="SpeedSliderRepeatButtonStyle" TargetType="{x:Type RepeatButton}">
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="IsTabStop" Value="false"/>
    <Setter Property="Focusable" Value="false"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type RepeatButton}">
                <Rectangle Fill="Transparent"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<ControlTemplate x:Key="HorizontalSlider" TargetType="{x:Type Slider}">
    <Grid Margin="5">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <TickBar x:Name="TopTick" Visibility="Collapsed" Fill="LightGray" Placement="Top" SnapsToDevicePixels="True"
             Height="4" Margin="0,0,0,2" />
        <Border x:Name="TrackBackground"
                Grid.Row="1"
                Margin="10,0"
                BorderThickness="2"
                BorderBrush="{DynamicResource LabelDisableForegroundColor}"
                VerticalAlignment="Center" 
                Height="1" />
        <Track x:Name="PART_Track" Grid.Row="1">
            <Track.DecreaseRepeatButton>
                <RepeatButton Command="{x:Static Slider.DecreaseLarge}"  Style="{StaticResource SpeedSliderRepeatButtonStyle}" />
            </Track.DecreaseRepeatButton>
            <Track.IncreaseRepeatButton>
                <RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource SpeedSliderRepeatButtonStyle}"/>
            </Track.IncreaseRepeatButton>
            <Track.Thumb>
                <Thumb x:Name="Thumb" Style="{StaticResource SpeedSliderThumbStyle}"/>
            </Track.Thumb>
        </Track>
        <TickBar x:Name="BottomTick" Grid.Row="2" Visibility="Collapsed" Fill="LightGray" Placement="Bottom"
             SnapsToDevicePixels="True" Height="4" Margin="0,2,0,0"/>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="TickPlacement" Value="TopLeft">
            <Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
        </Trigger>
        <Trigger Property="TickPlacement" Value="BottomRight">
            <Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
        </Trigger>
        <Trigger Property="TickPlacement" Value="Both">
            <Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
            <Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
        </Trigger>
        <Trigger Property="IsEnabled" Value="false">
            <Setter TargetName="TrackBackground" Property="BorderBrush" Value="{DynamicResource ListViewItemBorderBrushColor}"/> 
        </Trigger>
        <!--<Trigger Property="IsFocused" Value="True">
            <Setter TargetName="TrackBackground" Property="BorderBrush" Value="Orange" />
        </Trigger>-->
    </ControlTemplate.Triggers>
</ControlTemplate>

<ControlTemplate x:Key="VerticalSlider" TargetType="{x:Type Slider}">
    <Grid Margin="5">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" MinWidth="{TemplateBinding MinWidth}"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <TickBar x:Name="TopTick" Visibility="Collapsed" Fill="LightGray" Placement="Left" SnapsToDevicePixels="True"
             Width="4" Margin="0,0,2,0" />
        <Border x:Name="TrackBackground"
                Grid.Column="1"
                Margin="0,10"
                BorderThickness="2"
                BorderBrush="LightGray"
                HorizontalAlignment="Center" 
                Width="4" />
        <Track x:Name="PART_Track" Grid.Column="1">
            <Track.DecreaseRepeatButton>
                <RepeatButton Command="{x:Static Slider.DecreaseLarge}"  Style="{StaticResource SpeedSliderRepeatButtonStyle}" />
            </Track.DecreaseRepeatButton>
            <Track.IncreaseRepeatButton>
                <RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource SpeedSliderRepeatButtonStyle}"/>
            </Track.IncreaseRepeatButton>
            <Track.Thumb>
                <Thumb x:Name="Thumb" Style="{StaticResource SliderThumbStyle}" />
            </Track.Thumb>
        </Track>
        <TickBar x:Name="BottomTick" Grid.Column="2"
                 Visibility="Visible"
                 Fill="LightGray"
                 Placement="Right"
                 Width="4"
                 Margin="2,0,0,0"
                 SnapsToDevicePixels="True" />
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="TickPlacement" Value="TopLeft">
            <Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
        </Trigger>
        <Trigger Property="TickPlacement" Value="BottomRight">
            <Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
        </Trigger>
        <Trigger Property="TickPlacement" Value="Both">
            <Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
            <Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>


我试图改变里面的价值观SpeedSliderRepeatButtonStyle但这没有帮助。

1 回复 | 直到 7 年前

sTrenat 8 年前

以下是您可能的意思:

速度滑块重复按钮样式:

<Style x:Key="SpeedSliderRepeatButtonStyle" TargetType="{x:Type RepeatButton}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type RepeatButton}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" MaxWidth="15"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto" MaxWidth="15"/>
                </Grid.ColumnDefinitions>
                <Grid x:Name="LeftButton" Grid.Column="0">
                    <Grid.Style>
                        <Style TargetType="Grid">
                            <Setter Property="Visibility" Value="Collapsed"/>
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding Path=Tag, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=RepeatButton}}"
                                                Value="Left">
                                    <Setter Property="Visibility" Value="Visible"/>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Grid.Style>
                    <!--Template for left button-->
                    <Rectangle Fill="Red"/>
                </Grid>

                      <Rectangle Grid.Column="1"
                        Height="{TemplateBinding FontSize}" 
                        VerticalAlignment="Center"
                        HorizontalAlignment="Stretch"
                        StrokeThickness="0"
                        Fill="{TemplateBinding BorderBrush}"
                />

                <Grid x:Name="RightColumn" Grid.Column="2">
                    <Grid.Style>
                        <Style TargetType="Grid">
                            <Setter Property="Visibility" Value="Collapsed"/>
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding Path=Tag, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=RepeatButton}}"
                                                Value="Right">
                                    <Setter Property="Visibility" Value="Visible"/>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Grid.Style>
                    <!--Template for right button-->
                    <Rectangle Fill="Red"/>
                </Grid>
            </Grid>
        </ControlTemplate>
    </Setter.Value>
</Setter>

我在这里所做的是将ControlTemplate修改为有3列:左按钮、跟踪栏和右按钮,如果您想使左按钮或右按钮可见,只需设置 RepeatButton Tag 属性到 Left 或 Right ,其他人留下空的。

和示例水平滑块控制模板:

<ControlTemplate x:Key="HorizontalSlider" TargetType="{x:Type Slider}">
<Grid Margin="5">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <TickBar x:Name="TopTick" Visibility="Collapsed" Fill="LightGray" Placement="Top" SnapsToDevicePixels="True" Height="4" Margin="0,0,0,2" />
    <Border x:Name="TrackBackground"
            Grid.Row="1"
            Margin="10,0"
            BorderThickness="0"
            BorderBrush="{DynamicResource LabelDisableForegroundColor}"
            VerticalAlignment="Center" 
            Height="1" />
    <Track x:Name="PART_Track" Grid.Row="1">
        <Track.DecreaseRepeatButton>
                    <RepeatButton Command="{x:Static Slider.DecreaseLarge}"  BorderBrush="Gray" BorderThickness="5" FontSize="5" Style="{StaticResource SpeedSliderRepeatButtonStyle}" />
        </Track.DecreaseRepeatButton>
        <Track.IncreaseRepeatButton>
                    <RepeatButton Command="{x:Static Slider.IncreaseLarge}" BorderBrush="Gray" BorderThickness="2" FontSize="2" Tag="Right" Style="{StaticResource SpeedSliderRepeatButtonStyle}"/>
        </Track.IncreaseRepeatButton>
        <Track.Thumb>
            <Thumb x:Name="Thumb" Style="{StaticResource SpeedSliderThumbStyle}"/>
        </Track.Thumb>
    </Track>
    <TickBar x:Name="BottomTick" Grid.Row="2" Visibility="Collapsed" Fill="LightGray" Placement="Bottom" SnapsToDevicePixels="True" Height="4" Margin="0,2,0,0"/>
</Grid>
<ControlTemplate.Triggers>
    <Trigger Property="TickPlacement" Value="TopLeft">
        <Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
    </Trigger>
    <Trigger Property="TickPlacement" Value="BottomRight">
        <Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
    </Trigger>
    <Trigger Property="TickPlacement" Value="Both">
        <Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
        <Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
    </Trigger>
    <Trigger Property="IsEnabled" Value="false">
        <Setter TargetName="TrackBackground" Property="BorderBrush" Value="{DynamicResource ListViewItemBorderBrushColor}"/>
    </Trigger>
    <!--<Trigger Property="IsFocused" Value="True">
       <Setter TargetName="TrackBackground" Property="BorderBrush" Value="Orange" />
    </Trigger>-->
</ControlTemplate.Triggers>

我设置的重要内容是什么 BorderThicknes 你的 HorizontalSlider 到 0 ,因为不再有一个边框,现在您有两个:左边框和右边框。

例如,如果要更改IsEnabled上滑块的颜色,可以这样做:

<RepeatButton Command="{x:Static Slider.IncreaseLarge}" BorderThickness="2" FontSize="2" Tag="Right">
    <RepeatButton.Style>
        <Style TargetType="RepeatButton" BasedOn="{StaticResource SpeedSliderRepeatButtonStyle}">
            <Setter Property="BorderBrush" Value="#FF666666"/>
            <Style.Triggers>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="BorderBrush" Value="#FF222222"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </RepeatButton.Style> 
</RepeatButton>

你也可以参加 SpeedSliderRepeatButtonStyle