Question

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

这是我的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中的值，但这没有帮助。

Answer 1

这可能是您的意思：

SpeedSliderRepeatButtonStyle：

<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属性设置为{{ 1}}或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>  </ControlTemplate.Triggers>中的BorderThicknes设置为HorizontalSlider，因为不再有一个边框，所以现在有了2：左右边框。

例如，如果要更改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>

中创建它

如何更改之前和之后的滑块线颜色

1 个答案: