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

小渣渣

1. <UserControl.Resources>
   
2. <!--笔刷-->
   
3.         <LinearGradientBrush x:Key="SliderBackground"  StartPoint="0,0" EndPoint="0,1">
   
4.             <GradientStop Offset="0" Color="#59ccfc"/>
   
5.             <GradientStop Offset="0.5" Color="#00b3fe"/>
   
6.             <GradientStop Offset="1" Color="#59ccfc"/>
   
7.         </LinearGradientBrush>
   
8.         <LinearGradientBrush x:Key="SliderThumb"  StartPoint="0,0" EndPoint="0,1">
   
9.             <GradientStop Offset="0" Color="#FFD9D3E8"/>
   
10.             <!--<GradientStop Offset="1" Color="#dfdfdf"/>-->
    
11.         </LinearGradientBrush>
    
12.         <LinearGradientBrush x:Key="SliderText"  StartPoint="0,0" EndPoint="0,1">
    
13.             <GradientStop Offset="0" Color="#7cce45"/>
    
14.             <GradientStop Offset="1" Color="#4ea017"/>
    
15.         </LinearGradientBrush>
    
16. 
    
17.         <!--Slider模板-->
    
18.         <Style x:Key="Slider_RepeatButton" TargetType="RepeatButton">
    
19.             <Setter Property="Focusable" Value="false" />
    
20.             <Setter Property="Template">
    
21.                 <Setter.Value>
    
22.                     <ControlTemplate TargetType="RepeatButton">
    
23.                         <Border Background="{StaticResource SliderBackground}" />
    
24.                     </ControlTemplate>
    
25.                 </Setter.Value>
    
26.             </Setter>
    
27.         </Style>
    
28. 
    
29.         <Style x:Key="Slider_RepeatButton1" TargetType="RepeatButton">
    
30.             <Setter Property="Focusable" Value="false" />
    
31.             <Setter Property="Template">
    
32.                 <Setter.Value>
    
33.                     <ControlTemplate TargetType="RepeatButton">
    
34.                         <Border Background="Transparent" />
    
35.                     </ControlTemplate>
    
36.                 </Setter.Value>
    
37.             </Setter>
    
38.         </Style>
    
39. 
    
40.         <Style x:Key="Slider_Thumb" TargetType="Thumb">
    
41.             <Setter Property="Focusable" Value="false" />
    
42.             <Setter Property="Template">
    
43.                 <Setter.Value>
    
44.                     <ControlTemplate TargetType="Thumb">
    
45.                         <Grid>
    
46.                             <Grid.ColumnDefinitions>
    
47.                                 <ColumnDefinition/>
    
48.                                 <ColumnDefinition/>
    
49.                             </Grid.ColumnDefinitions>
    
50.                             <Border Background="{StaticResource SliderBackground}"/>
    
51.                             <Border Grid.ColumnSpan="2" CornerRadius="4"  Background="{StaticResource SliderThumb}" Width="15">
    
52.                                 <!--<TextBlock Text="||" HorizontalAlignment="Center" VerticalAlignment="Center"/>-->
    
53.                             </Border>
    
54.                         </Grid>
    
55.                     </ControlTemplate>
    
56.                 </Setter.Value>
    
57.             </Setter>
    
58.         </Style>
    
59. 
    
60.         <Style x:Key="Slider_CustomStyle" TargetType="Slider">
    
61.             <Setter Property="Focusable" Value="false" />
    
62.             <Setter Property="Template">
    
63.                 <Setter.Value>
    
64.                     <ControlTemplate TargetType="Slider">
    
65.                         <Grid>
    
66.                             <!--<Grid.ColumnDefinitions>
    
67.                                 <ColumnDefinition Width="80"/>
    
68.                                 <ColumnDefinition/>
    
69.                                 <ColumnDefinition Width="40"/>
    
70.                             </Grid.ColumnDefinitions>-->
    
71.                             <Grid.Effect>
    
72.                                 <DropShadowEffect BlurRadius="10" ShadowDepth="1" />
    
73.                             </Grid.Effect>
    
74.                             <!--<Border HorizontalAlignment="Right" BorderBrush="Gray" BorderThickness="1,1,0,1" Background="{StaticResource SliderText}" Width="80" CornerRadius="8,0,0,8"/>-->
    
75.                             <!--<Border Grid.Column="2" HorizontalAlignment="Right" BorderBrush="Gray" BorderThickness="0,1,1,1" Background="{StaticResource SliderText}" Width="40" CornerRadius="0,8,8,0"/>-->
    
76.                             <!--<TextBlock Text="{Binding RelativeSource={RelativeSource TemplatedParent},Path=Tag}" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="14"/>-->
    
77.                             <!--<TextBlock Grid.Column="2" Text="{Binding ElementName=PART_Track,Path=Value,StringFormat=\{0:N0\}}" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="14" DataContext="{Binding}" />-->
    
78.                             <Border Grid.Column="1" BorderBrush="Gray" BorderThickness="1" CornerRadius="8,0,0,8">
    
79.                                 <Track Grid.Column="1" Name="PART_Track">
    
80.                                     <Track.DecreaseRepeatButton>
    
81.                                         <RepeatButton Style="{StaticResource Slider_RepeatButton}"
    
82.                                 Command="Slider.DecreaseLarge"/>
    
83.                                     </Track.DecreaseRepeatButton>
    
84.                                     <Track.IncreaseRepeatButton>
    
85.                                         <RepeatButton Style="{StaticResource Slider_RepeatButton1}"
    
86.                                 Command="Slider.IncreaseLarge"/>
    
87.                                     </Track.IncreaseRepeatButton>
    
88.                                     <Track.Thumb>
    
89.                                         <Thumb Style="{StaticResource Slider_Thumb}"/>
    
90.                                     </Track.Thumb>
    
91.                                 </Track>
    
92.                             </Border>
    
93.                         </Grid>
    
94.                     </ControlTemplate>
    
95.                 </Setter.Value>
    
96.             </Setter>
    
97.         </Style>
    
98. </UserControl.Resources>

复制代码

在这里添加进度条的样式：

<Grid>
        <Slider  Style="{StaticResource Slider_CustomStyle}"  />

</Grid>

小渣渣

原文： http://blog.csdn.net/wanlong360599336/article/details/39374101

johnyoung

顶顶顶