首页 > 代码库 > WPF初学之绘制自己需要的Slider
WPF初学之绘制自己需要的Slider
最近研究了slider的一些功能。主要是修改他们的样式，换成我们想要的控件模型。进度度显示等。首先说一下slider的组成
Slider 控件允许用户选择值从值的范围。 下面的插图演示了 Slider 控件的一个示例。
slider 控件的示例
可以通过设置 Slider 控件的属性来自定义该控件。 下表描述可以自定义的 Slider 的一些属性：
Slider 的方向，水平或垂直。
沿 Slider 跟踪的刻度线位置。
显示 Slider的当前值的工具提示显示。
Thumb 的能力。对齐的滴答标记或在任意点沿 Slider。
增加价值的方向沿 Slider的。
有关如何自定义 Slider 控件的更多信息，请参见各个成员。
http://msdn.microsoft.com/zh-cn/library/system.windows.controls.slider.aspx
MSDN中的Slider 样式和模板，有兴趣的可以看看
http://msdn.microsoft.com/zh-cn/library/ms753256.aspx
下面是我自己设计的一个slider样式。上图
以后还可以扩展一些功能。比如像拖拽右边的小按钮！！！目前没时间搞。马上给出样式。。。。
1 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 2 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 3 4 <Color x:Key="DisabledControlDarkColor">Red</Color> 5 <Color x:Key="ControlLightColor">White</Color> 6 <Color x:Key="ControlMediumColor">Yellow</Color> 7 <Color x:Key="ControlDarkColor">Orange</Color> 8 <Color x:Key="ControlMouseOverColor">Red</Color> 9 <Color x:Key="ControlPressedColor">Green</Color> 10 <Color x:Key="GlyphColor">Red</Color> 11 <!--Border colors--> 12 <Color x:Key="BorderLightColor">Red</Color> 13 <Color x:Key="BorderMediumColor">Black</Color> 14 <Color x:Key="BorderDarkColor">Pink</Color> 15 <Color x:Key="SliderTrackDarkColor">Red</Color> 16 17 18 <Style x:Key="RepeatButton1" TargetType="{x:Type RepeatButton}"> 19 <Style.Setters> 20 <Setter Property="SnapsToDevicePixels" 21 Value=http://www.mamicode.com/"true" /> 22 <Setter Property="OverridesDefaultStyle" 23 Value=http://www.mamicode.com/"false" /> 24 <Setter Property="IsTabStop" 25 Value=http://www.mamicode.com/"false" /> 26 <Setter Property="Background" Value=http://www.mamicode.com/"Blue"> </Setter> 27 <Setter Property="Height" Value=http://www.mamicode.com/"10"/> 28 <Setter Property="BorderBrush" Value=http://www.mamicode.com/"Transparent"/> 29 <Setter Property="BorderThickness" Value=http://www.mamicode.com/"0"></Setter> 30 <Setter Property="Focusable" Value=http://www.mamicode.com/"False"/> 31 </Style.Setters> 32 <Style.Triggers> 33 <Trigger Property="IsPressed" Value=http://www.mamicode.com/"True"> 34 <Setter Property="Background"> 35 <Setter.Value> 36 <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"> 37 <!--<GradientStop Color="Gray" Offset="0"/>--> 38 <GradientStop Color="LightBlue" Offset="1"/> 39 </LinearGradientBrush> 40 </Setter.Value> 41 </Setter> 42 </Trigger> 43 </Style.Triggers> 44 </Style> 45 46 <Style x:Key="abtn" TargetType="Button"> 47 <Style.Triggers> 48 <Trigger Property="IsMouseOver" Value=http://www.mamicode.com/"true"> 49 <Setter Property="Background" Value=http://www.mamicode.com/"Red"></Setter> 50 </Trigger> 51 52 </Style.Triggers> 53 </Style> 54 55 <Style x:Key="RepeatButton2" 56 TargetType="{x:Type RepeatButton}"> 57 <Setter Property="SnapsToDevicePixels" 58 Value=http://www.mamicode.com/"true" /> 59 <Setter Property="OverridesDefaultStyle" 60 Value=http://www.mamicode.com/"true" /> 61 <Setter Property="IsTabStop" 62 Value=http://www.mamicode.com/"false" /> 63 <Setter Property="Focusable" 64 Value=http://www.mamicode.com/"false" /> 65 <Setter Property="Height" Value=http://www.mamicode.com/"10"/> 66 <Setter Property="Background" Value=http://www.mamicode.com/"Blue"/> 67 <Setter Property="Template"> 68 <Setter.Value> 69 <ControlTemplate TargetType="{x:Type RepeatButton}"> 70 <Grid> 71 <Thumb Name="tumb" Width="20" Height="30"></Thumb> 72 </Grid> 73 </ControlTemplate> 74 </Setter.Value> 75 </Setter> 76 </Style> 77 78 <Style x:Key="SliderThumbStyle" 79 TargetType="{x:Type Thumb}"> 80 <Setter Property="SnapsToDevicePixels" 81 Value=http://www.mamicode.com/"true" /> 82 <Setter Property="OverridesDefaultStyle" 83 Value=http://www.mamicode.com/"true" /> 84 <Setter Property="Height" 85 Value=http://www.mamicode.com/"20" /> 86 <Setter Property="Width" 87 Value=http://www.mamicode.com/"20" /> 88 <Setter Property="Template"> 89 <Setter.Value> 90 <ControlTemplate TargetType="{x:Type Thumb}"> 91 <Ellipse x:Name="Ellipse" 92 StrokeThickness="1"> 93 <Ellipse.Stroke> 94 <LinearGradientBrush StartPoint="0,0" 95 EndPoint="0,1"> 96 <LinearGradientBrush.GradientStops> 97 <GradientStopCollection> 98 <GradientStop Color="{DynamicResource BorderLightColor}" 99 Offset="0.0" />100 <GradientStop Color="{DynamicResource BorderDarkColor}"101 Offset="1.0" />102 </GradientStopCollection>103 </LinearGradientBrush.GradientStops>104 </LinearGradientBrush>105 </Ellipse.Stroke>106 <Ellipse.Fill>107 <LinearGradientBrush EndPoint="0.5,1"108 StartPoint="0.5,0">109 <GradientStop Color="{DynamicResource ControlMediumColor}"110 Offset="1" />111 <GradientStop Color="{DynamicResource ControlLightColor}" />112 </LinearGradientBrush>113 </Ellipse.Fill>114 <VisualStateManager.VisualStateGroups>115 <VisualStateGroup x:Name="CommonStates">116 <VisualState x:Name="Normal" />117 <VisualState x:Name="MouseOver">118 <Storyboard>119 <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).120 (GradientBrush.GradientStops)[0].(GradientStop.Color)"121 Storyboard.TargetName="Ellipse">122 <EasingColorKeyFrame KeyTime="0"123 Value=http://www.mamicode.com/"{StaticResource ControlMouseOverColor}" />124 </ColorAnimationUsingKeyFrames>125 </Storyboard>126 </VisualState>127 <VisualState x:Name="Pressed">128 <Storyboard>129 <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).130 (GradientBrush.GradientStops)[0].(GradientStop.Color)"131 Storyboard.TargetName="Ellipse">132 <EasingColorKeyFrame KeyTime="0"133 Value=http://www.mamicode.com/"{StaticResource ControlPressedColor}" />134 </ColorAnimationUsingKeyFrames>135 </Storyboard>136 </VisualState>137 <VisualState x:Name="Disabled">138 <Storyboard>139 <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).140 (GradientBrush.GradientStops)[0].(GradientStop.Color)"141 Storyboard.TargetName="Ellipse">142 <EasingColorKeyFrame KeyTime="0"143 Value=http://www.mamicode.com/"{StaticResource DisabledControlDarkColor}" />144 </ColorAnimationUsingKeyFrames>145 </Storyboard>146 </VisualState>147 </VisualStateGroup>148 </VisualStateManager.VisualStateGroups>149 </Ellipse>150 </ControlTemplate>151 </Setter.Value>152 </Setter>153 </Style>154 155 <ControlTemplate x:Key="HorizontalSlider" TargetType="{x:Type Slider}">156 <Grid>157 <Grid.RowDefinitions>158 <RowDefinition Height="Auto" />159 <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />160 <RowDefinition Height="Auto" />161 </Grid.RowDefinitions>162 <TickBar x:Name="TopTick"163 SnapsToDevicePixels="True"164 Placement="Top"165 Height="4"166 Visibility="Collapsed">167 <TickBar.Fill>168 <SolidColorBrush Color="{DynamicResource GlyphColor}" />169 </TickBar.Fill>170 </TickBar>171 <Border x:Name="TrackBackground"172 Margin="0"173 CornerRadius="3"174 Height="6"175 Grid.Row="1"176 BorderThickness="0">177 <Border.BorderBrush>178 <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">179 <LinearGradientBrush.GradientStops>180 <GradientStopCollection>181 <GradientStop Color="Transparent" Offset="1" />182 <!--<GradientStop Color="{DynamicResource BorderDarkColor}" Offset="1.0" />-->183 </GradientStopCollection>184 </LinearGradientBrush.GradientStops>185 </LinearGradientBrush>186 </Border.BorderBrush>187 <Border.Background>188 <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">189 <LinearGradientBrush.GradientStops>190 <GradientStopCollection>191 <!--<GradientStop Color="Gray" Offset="0.0" />-->192 <GradientStop Color="Gray" Offset="1.0" />193 </GradientStopCollection>194 </LinearGradientBrush.GradientStops>195 </LinearGradientBrush>196 </Border.Background>197 </Border>198 <Track Grid.Row="1"199 x:Name="PART_Track">200 <Track.DecreaseRepeatButton>201 <RepeatButton Style="{StaticResource RepeatButton1}"202 Command="Slider.DecreaseLarge" />203 </Track.DecreaseRepeatButton>204 <Track.Thumb>205 <Thumb Style="{StaticResource SliderThumbStyle}" />206 </Track.Thumb>207 <Track.IncreaseRepeatButton>208 <RepeatButton Style="{StaticResource RepeatButton2}"209 Command="Slider.IncreaseLarge" />210 </Track.IncreaseRepeatButton>211 212 </Track>213 <TickBar x:Name="BottomTick"214 SnapsToDevicePixels="True"215 Grid.Row="2"216 Fill="{TemplateBinding Foreground}"217 Placement="Bottom"218 Height="4"219 Visibility="Collapsed" />220 </Grid>221 <ControlTemplate.Triggers>222 <Trigger Property="TickPlacement"223 Value=http://www.mamicode.com/"TopLeft">224 <Setter TargetName="TopTick"225 Property="Visibility"226 Value=http://www.mamicode.com/"Visible" />227 </Trigger>228 <Trigger Property="TickPlacement"229 Value=http://www.mamicode.com/"BottomRight">230 <Setter TargetName="BottomTick"231 Property="Visibility"232 Value=http://www.mamicode.com/"Visible" />233 </Trigger>234 <Trigger Property="TickPlacement"235 Value=http://www.mamicode.com/"Both">236 <Setter TargetName="TopTick"237 Property="Visibility"238 Value=http://www.mamicode.com/"Visible" />239 <Setter TargetName="BottomTick"240 Property="Visibility"241 Value=http://www.mamicode.com/"Visible" />242 </Trigger>243 </ControlTemplate.Triggers>244 </ControlTemplate>245 246 <Style x:Key="progressSlider" TargetType="{x:Type Slider}">247 <Setter Property="SnapsToDevicePixels"248 Value=http://www.mamicode.com/"true" />249 <Setter Property="OverridesDefaultStyle"250 Value=http://www.mamicode.com/"true" />251 <Setter Property="Background" Value=http://www.mamicode.com/"Transparent"></Setter>252 <Style.Triggers>253 <Trigger Property="Orientation"254 Value=http://www.mamicode.com/"Horizontal">255 <Setter Property="MinWidth"256 Value=http://www.mamicode.com/"104" />257 <Setter Property="MinHeight"258 Value=http://www.mamicode.com/"21" />259 <Setter Property="Template"260 Value=http://www.mamicode.com/"{StaticResource HorizontalSlider}" />261 </Trigger>262 </Style.Triggers>263 </Style>264 265 </ResourceDictionary>
做的比较粗糙。。。有时间给大家设计一个好看的播放进度条！
感兴趣的加新浪微博一起聊哦。。。http://weibo.com/518121567
WPF初学之绘制自己需要的Slider
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。