WPF 的轨迹栏/滑块模板 [英] Track bar /slider template for WPF

问题描述

我正在寻找 WPF 的自定义控件，它允许在特定值上显示最小值、最大值和指标.如果我必须画它，它看起来像这样

Im looking for a customized control for WPF which allows Min,Max values and Indicator on specific value. If I had to paint it, It would look similar to this

在这个例子中我有 min =0, max= ~600, indicator=~200500 表示我的条形改变颜色的点

In this example I have min =0, max= ~600, indicator=~200 500 indicates the point where my bar changes color

推荐答案

您需要编辑滑块模板来实现您的设计滑块.您可以根据自己的选择使用颜色或图像作为控件.示例-修改后的滑块模板

You need to edit slider template to achieve your design slider. You can use Colors or Image for controls as per your choice. Example- Modified slider template

对于您的问题，以下模板可以正常工作.

For your question below template will work fine .

<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>

这篇关于WPF 的轨迹栏/滑块模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！