WPF Slider 样式

样式1

拖拽进度条

 <Style x:Key="StyleForRepeatButton" TargetType="{x:Type RepeatButton}">

            <Style.Setters>

                <Setter Property="Background">

                    <Setter.Value>

                        <LinearGradientBrush  

                            StartPoint="1,0"  

                            EndPoint="1,0">

                            <GradientStop Color="Silver" Offset="0"/>

                            

                        </LinearGradientBrush>

                    </Setter.Value>

                </Setter>

                <Setter Property="Height" Value="5"/>

                <Setter Property="BorderBrush" Value="Transparent"/>

                <Setter Property="Focusable" Value="False"/>

            </Style.Setters>

            <Style.Triggers>

                <Trigger Property="IsPressed" Value="True">

                    <!--<Setter Property="Background">

                        <Setter.Value>

                            <LinearGradientBrush StartPoint="0.5,0"  

                                                 EndPoint="0.5,1">

                                <GradientStop Color="Silver" />

                                <GradientStop Color="Silver" />

                            </LinearGradientBrush>

                        </Setter.Value>

                    </Setter>-->

                </Trigger>

                <Trigger Property="IsMouseOver" Value="False">

                    <Setter Property="Background" Value="Silver"></Setter>

                </Trigger>

            </Style.Triggers>

        </Style>

        <ControlTemplate x:Key="tmpThumb" TargetType="{x:Type Thumb}">

            <Ellipse Name="e" Width="13" Height="13" Fill="#AEDEE6"/>

            <ControlTemplate.Triggers>

                <!--<Trigger Property="IsMouseOver" Value="True">

                    <Setter TargetName="e" Property="Fill" Value="#AEDEE6"/>

                </Trigger>-->

            </ControlTemplate.Triggers>

        </ControlTemplate>

        <ControlTemplate x:Key="tmp" TargetType="{x:Type Slider}">

            <Grid>

                <Grid.RowDefinitions>

                    <RowDefinition Height="auto"/>

                    <RowDefinition Height="auto" MinHeight="25"/>

                    <RowDefinition Height="auto"/>

                </Grid.RowDefinitions>

                <TickBar x:Name="top" Fill="Magenta" Grid.Row="0" HorizontalAlignment="Stretch"  

                         Placement="Top" Height="8"  

                         Visibility="Collapsed"/>

                <Track x:Name="PART_Track" Grid.Row="1" HorizontalAlignment="Stretch">

                    <Track.IncreaseRepeatButton>

                        <RepeatButton Style="{StaticResource StyleForRepeatButton}"  

                                      Command="Slider.IncreaseLarge"/>

                    </Track.IncreaseRepeatButton>

                    <Track.DecreaseRepeatButton>

                        <RepeatButton Style="{StaticResource StyleForRepeatButton}"  

                                      Command="Slider.DecreaseLarge"/>

                    </Track.DecreaseRepeatButton>

                    <Track.Thumb>

                        <Thumb Height="20" Template="{StaticResource tmpThumb}"/>

                    </Track.Thumb>

                </Track>

                <TickBar x:Name="Bottom" Grid.Row="2" Fill="Magenta" HorizontalAlignment="Stretch"  

                         Visibility="Collapsed" Placement="Bottom" Height="8"/>

            </Grid>

            <ControlTemplate.Triggers>

                <Trigger Property="TickPlacement" Value="TopLeft">

                    <Setter TargetName="top" Property="Visibility" Value="Visible"/>

                </Trigger>

                <Trigger Property="TickPlacement" Value="BottomRight">

                    <Setter Property="Visibility" TargetName="Bottom" Value="Visible"/>

                </Trigger>

                <Trigger Property="TickPlacement" Value="Both">

                    <Setter TargetName="top" Property="Visibility" Value="Visible"/>

                    <Setter TargetName="Bottom" Property="Visibility" Value="Visible"/>

                </Trigger>

            </ControlTemplate.Triggers>

        </ControlTemplate>

样式2

音乐进度条，播放进度条

        <!--笔刷-->

        <LinearGradientBrush x:Key="SliderBackground"  StartPoint="0,0" EndPoint="0,1">

            <GradientStop Offset="0" Color="#59ccfc"/>

            <GradientStop Offset="0.5" Color="#00b3fe"/>

            <GradientStop Offset="1" Color="#59ccfc"/>

        </LinearGradientBrush>

        <LinearGradientBrush x:Key="SliderThumb"  StartPoint="0,0" EndPoint="0,1">

            <GradientStop Offset="0" Color="#FFD9D3E8"/>

            <!--<GradientStop Offset="1" Color="#dfdfdf"/>-->

        </LinearGradientBrush>

        <LinearGradientBrush x:Key="SliderText"  StartPoint="0,0" EndPoint="0,1">

            <GradientStop Offset="0" Color="#7cce45"/>

            <GradientStop Offset="1" Color="#4ea017"/>

        </LinearGradientBrush>

        <!--Slider模板-->

        <Style x:Key="Slider_RepeatButton" TargetType="RepeatButton">

            <Setter Property="Focusable" Value="false" />

            

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="RepeatButton">

                        <Border Background="{StaticResource SliderBackground}" />

                        

                    </ControlTemplate>

                    

                </Setter.Value>

            </Setter>

        </Style>

        <Style x:Key="Slider_RepeatButton1" TargetType="RepeatButton">

            <Setter Property="Focusable" Value="false" />

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="RepeatButton">

                        <Border Background="Transparent" />

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

        <Style x:Key="Slider_Thumb" TargetType="Thumb">

            <Setter Property="Focusable" Value="false" />

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="Thumb">

                        <Grid>

                            <Grid.ColumnDefinitions>

                                <ColumnDefinition/>

                                <ColumnDefinition/>

                            </Grid.ColumnDefinitions>

                            <Border Background="{StaticResource SliderBackground}"/>

                            <Border Grid.ColumnSpan="2" CornerRadius="4"  Background="{StaticResource SliderThumb}" Width="15">

                                <!--<TextBlock Text="||" HorizontalAlignment="Center" VerticalAlignment="Center"/>-->

                            </Border>

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

        <Style x:Key="Slider_CustomStyle" TargetType="Slider">

            <Setter Property="Focusable" Value="false" />

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="Slider">

                        <Grid>

                            <Border Grid.Column="1" BorderBrush="Gray" BorderThickness="1" CornerRadius="8,0,0,8">

                                <Track Grid.Column="1" Name="PART_Track">

                                    <Track.DecreaseRepeatButton>

                                        <RepeatButton Style="{StaticResource Slider_RepeatButton}"

                                Command="Slider.DecreaseLarge"/>

                                    </Track.DecreaseRepeatButton>

                                    <Track.IncreaseRepeatButton>

                                        <RepeatButton Style="{StaticResource Slider_RepeatButton1}"

                                Command="Slider.IncreaseLarge"/>

                                    </Track.IncreaseRepeatButton>

                                    <Track.Thumb>

                                        <Thumb Style="{StaticResource Slider_Thumb}"/>

                                    </Track.Thumb>

                                </Track>

                            </Border>

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

样式 3

拖拽 左右有颜色进度条

<Window.Resources>

            <LinearGradientBrush x:Key="SliderBackground"  StartPoint="0,0" EndPoint="0,1">

                <GradientStop Offset="0" Color="#59ccfc"/>

                <GradientStop Offset="0.5" Color="#00b3fe"/>

                <GradientStop Offset="1" Color="#59ccfc"/>

            </LinearGradientBrush>

            <LinearGradientBrush x:Key="SliderThumb"  StartPoint="0,0" EndPoint="0,1">

                <GradientStop Offset="0" Color="#FFD9D3E8"/>

                <!--<GradientStop Offset="1" Color="#dfdfdf"/>-->

            </LinearGradientBrush>

            <LinearGradientBrush x:Key="SliderText"  StartPoint="0,0" EndPoint="0,1">

                <GradientStop Offset="0" Color="#7cce45"/>

                <GradientStop Offset="1" Color="#4ea017"/>

            </LinearGradientBrush>

            <LinearGradientBrush x:Key="SliderBackground2"  StartPoint="0,0" EndPoint="0,1">

                <GradientStop Offset="0" Color="Gray"/>

                <GradientStop Offset="0.5" Color="Gray"/>

                <GradientStop Offset="1" Color="#59ccfc"/>

            </LinearGradientBrush>

            <!--Slider模板-->

            <Style x:Key="Slider_RepeatButton" TargetType="RepeatButton">

                <Setter Property="Focusable" Value="false" />

                <Setter Property="Height" Value="5"/>

                <Setter Property="BorderBrush" Value="Transparent"/>

                <Setter Property="Template">

                    <Setter.Value>

                        <ControlTemplate TargetType="RepeatButton">

                            <Border Background="{StaticResource SliderBackground}" />

                        </ControlTemplate>

                    </Setter.Value>

                </Setter>

            </Style>

            <Style x:Key="Slider_RepeatButton1" TargetType="RepeatButton">

                <Setter Property="Focusable" Value="false" />

                <Setter Property="Height" Value="5"/>

                <Setter Property="BorderBrush" Value="Transparent"/>

                <Setter Property="Template">

                    <Setter.Value>

                        <ControlTemplate TargetType="RepeatButton">

                            <Border Background="Silver" />

                        </ControlTemplate>

                    </Setter.Value>

                </Setter>

            </Style>

            <Style x:Key="Slider_Thumb" TargetType="Thumb">

                <Setter Property="Focusable" Value="false" />

                <Setter Property="Template">

                    <Setter.Value>

                        <ControlTemplate TargetType="Thumb">

                        <Ellipse Name="e" Width="15" Height="15" Fill="#AEDEE6"/>

                    </ControlTemplate>

                    </Setter.Value>

                </Setter>

            </Style>

            <Style x:Key="Slider_CustomStyle" TargetType="Slider">

                <Setter Property="Focusable" Value="false" />

                <Setter Property="Template">

                    <Setter.Value>

                        <ControlTemplate TargetType="Slider">

                            <Grid>

                                <!--<Grid.ColumnDefinitions>                                  <ColumnDefinition Width="80"/>                                  <ColumnDefinition/>                                  <ColumnDefinition Width="40"/>                              </Grid.ColumnDefinitions>-->

                                

                                <!--<Border HorizontalAlignment="Right" BorderBrush="Gray" BorderThickness="1,1,0,1" Background="{StaticResource SliderText}" Width="80" CornerRadius="8,0,0,8"/>                            <Border Grid.Column="2" HorizontalAlignment="Right" BorderBrush="Gray" BorderThickness="0,1,1,1" Background="{StaticResource SliderText}" Width="40" CornerRadius="0,8,8,0"/>                            <TextBlock Grid.Column="2" Text="{Binding RelativeSource={RelativeSource TemplatedParent},Path=Tag}" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="14"/>                            <TextBlock Grid.Column="0" Text="{Binding ElementName=PART_Track,Path=Value,StringFormat=/{0:N0/}}" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="14" DataContext="{Binding}" />-->

                                <Border Grid.Column="1" BorderBrush="Red" BorderThickness="0" CornerRadius="0,0,0,0">

                                    <Track Grid.Column="1" Name="PART_Track">

                                        <Track.DecreaseRepeatButton>

                                            <RepeatButton Style="{StaticResource Slider_RepeatButton}"                                  Command="Slider.DecreaseLarge"/>

                                        </Track.DecreaseRepeatButton>

                                        <Track.IncreaseRepeatButton>

                                            <RepeatButton Style="{StaticResource Slider_RepeatButton1}"                                  Command="Slider.IncreaseLarge"/>

                                        </Track.IncreaseRepeatButton>

                                        <Track.Thumb>

                                            <Thumb Style="{StaticResource Slider_Thumb}"/>

                                        </Track.Thumb>

                                    </Track>

                                </Border>

                            </Grid>

                        </ControlTemplate>

                    </Setter.Value>

                </Setter>

            </Style>

        </Window.Resources>