Track bar /slider template for 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

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

回答1:

Try this

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

回答2:

Im looking for a customized control for WPF which allows Min,Max values and Indicator on specific value

You mean, you're looking for the Slider Class. Why re-invent the wheel? Just declare your own ControlTemplate for it:

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

When declaring new ControlTemplates, it always a good idea to start with the default one and slowly makes changes from there. you can find the default Slider ControlTemplate in the Slider Styles and Templates page on MSDN.

You can find out more about the Slider class from the Slider Class page and more about ControlTemplates from the ControlTemplate Class on MSDN.