WPF的轨迹栏/滑块模板

我正在寻找一个自定义的控制WPF，允许最小，最大值和指标的具体价值。 如果我要画的话，它看起来会像这样

在这个例子中，最小值=0，最大值=600，指示符=200 500表示我的工具栏改变颜色的点

我正在寻找一个自定义的WPF控件，该控件允许最小值、最大值和特定值上的指示器

你的意思是，你正在寻找

滑块

类。为什么要重新发明轮子？只需为其声明自己的

ControlTemplate

：

<Slider Minimum="0" Maximum="500">
    <Slider.Template>
        <ControlTemplate TargetType="{x:Type Slider}">
            <!-- define your ControlTemplate content in here -->
        </ControlTemplate>
    </Slider.Template>
</Slider>

声明新的

ControlTemplate

s时，最好从默认模板开始，然后慢慢地进行更改。您可以在MSDN的页面中找到默认的

滑块控制模板

您可以从页面中找到有关
滑块的更多信息，也可以从MSDN上的中找到有关
控制模板的更多信息。
您需要编辑滑块模板以实现设计滑块。您可以根据自己的选择为控件使用颜色或图像

对于您的问题，下面的模板将工作良好

<Window.Resources>      
    
    <Style x:Key="SliderRepeatButton" TargetType="RepeatButton">
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="IsTabStop" Value="false" />
        <Setter Property="Focusable" Value="false" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RepeatButton">
                    <Border Background="Transparent"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    
    <Style x:Key="SliderRepeatButton1" TargetType="RepeatButton">
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="OverridesDefaultStyle" Value="true" />           
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RepeatButton">
                    <Border SnapsToDevicePixels="True" Background="YellowGreen"  BorderThickness="1" BorderBrush="YellowGreen" Height="3"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="SliderThumb" TargetType="Thumb">
        <Setter Property="SnapsToDevicePixels" Value="true" />    
        <Setter Property="OverridesDefaultStyle" Value="true" />            
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Thumb">
                    <StackPanel Orientation="Vertical">
                        <Path Data="M 0 0 L 8 0 L 4 6 Z"  Stroke="YellowGreen" Margin="-2,0,0,0" StrokeThickness="2" Fill="YellowGreen"></Path>
                        <Line X1="0" Y1="0" X2="0" Y2="7" Stroke="Gray" StrokeThickness="1" Margin="2,0,0,0" StrokeDashArray="1.5,1.5"></Line>
                        <TextBlock Foreground="Black" Margin="-2,30,0,0"  Text="{Binding Value, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Slider}}}"/>
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <ControlTemplate x:Key="Slider"  TargetType="Slider">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <TickBar  x:Name="TopTick"  Fill="LightGray" VerticalAlignment="Top"   SnapsToDevicePixels="True" Grid.Row="0" Placement="Top" Height="5" Visibility="Visible"/>
            <Border BorderBrush="LightGray"  BorderThickness="0,0,0,1" ></Border>
            <Border x:Name="TrackBackground" VerticalAlignment="Center" Margin="0,-10,0,0" BorderBrush="Red" Background="Red" Height="3"   Grid.Row="1"  BorderThickness="1"/>
            <Track Grid.Row="1" x:Name="PART_Track" Margin="0,-10,0,0"  >
                <Track.DecreaseRepeatButton>
                    <RepeatButton Style="{StaticResource SliderRepeatButton1}"  Command="Slider.DecreaseLarge" />
                </Track.DecreaseRepeatButton>
                <Track.Thumb>
                    <Thumb Style="{StaticResource SliderThumb}" Margin="0,-20,0,0" />
                </Track.Thumb>
                <Track.IncreaseRepeatButton>
                    <RepeatButton Style="{StaticResource SliderRepeatButton}" Command="Slider.IncreaseLarge" />
                </Track.IncreaseRepeatButton>
            </Track>
            <TextBlock Text="0" Grid.Row="1" Margin="0,15,0,0"></TextBlock>
            <TickBar x:Name="BottomTick" Fill="LightGray"   SnapsToDevicePixels="True" Grid.Row="2"   Placement="Bottom" Height="4" Visibility="Collapsed" />
        </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>

    <Style x:Key="Horizontal_Slider" TargetType="Slider">
        <Setter Property="Focusable" Value="False"/>
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Style.Triggers>
            <Trigger Property="Orientation" Value="Horizontal">
                <Setter Property="MinHeight" Value="21" />
                <Setter Property="MinWidth" Value="104" />
                <Setter Property="Template" Value="{StaticResource Slider}" />
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

<Slider Style="{StaticResource Horizontal_Slider}" VerticalAlignment="Center" TickFrequency="37.5" Minimum="0" Maximum="600" Value="500" Width="300" Margin="50,0,50,0"></Slider>



在我看来，这与控件最为相似。这将是您最好的基础，然后只是模板/样式它相应。我们可以使用图像在滑块的背景颜色“红色”的地方吗？根据我试过的代码和我做过的，在ContentTemplate中的sliderRepeatButton中，我使用了Ellipse和imageBrush填充，但我在UI上遇到了异常。请引导。是的，我们可以使用图像而不是红色。而不是像这篇文章一样使用图像笔刷。您好，我如何使其垂直？您的滑块类链接指向进度条类，也许您可以更新链接？