您的位置:首页 > Web前端 > CSS

wpf slider 进度条的样式模板,带有进度颜色显示

2014-12-30 22:38 197 查看
<span style="font-family: Arial; background-color: rgb(255, 255, 255);">效果图:</span>


只需在前台加上这段代码即可:
<Window x:Class="WpfAppSlider.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<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="10"/>
<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="10"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<Border Background="Gray" />
</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 MinHeight="20">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border Background="{StaticResource SliderBackground}"/>
<Border Grid.ColumnSpan="2" CornerRadius="4"  Background="{StaticResource SliderThumb}" Width="18">
<!--<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="8" 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 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>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<!--<Slider x:Name="SliderTest" Grid.Row="0"  Margin="10,5,10,5" Maximum="100" Minimum="0" TickFrequency="1"
Template="{StaticResource tmp}"
Value="20" TickPlacement="BottomRight"/>-->
<Slider x:Name="SliderTest"  Grid.Row="0" Style="{StaticResource Slider_CustomStyle}" ValueChanged="SliderTest_ValueChanged" />
<TextBlock Grid.Row="1" Text="{Binding Path=Value,ElementName=SliderTest}"
FontFamily="宋体" FontSize="24" FontWeight="Bold"
Margin="150,0,150,0" HorizontalAlignment="Center"/>
</Grid>
</Window>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: