效果图:
只需在前台加上这段代码即可:
<UserControl.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> <!--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> <!--<Grid.ColumnDefinitions> <ColumnDefinition Width="80"/> <ColumnDefinition/> <ColumnDefinition Width="40"/> </Grid.ColumnDefinitions>--> <Grid.Effect> <DropShadowEffect BlurRadius="10" ShadowDepth="1" /> </Grid.Effect> <!--<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 Text="{Binding RelativeSource={RelativeSource TemplatedParent},Path=Tag}" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="14"/>--> <!--<TextBlock Grid.Column="2" 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="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> </UserControl.Resources>
在这里添加进度条的样式:
<Grid>
<Slider Style="{StaticResource Slider_CustomStyle}" />
</Grid>
时间: 2024-10-02 05:01:00