[WPF资源共享]进度条样式
决定不定期的提供一些WPF的样式资源和大家共享
之所以决定共享这些资源,主要是为了让需要学习这项技术的同学们,能快速起步学会复杂控件的样式自定义。因为深刻的体会到从0起步 又无人指导有多困难 得绕多少弯路
代码只供学习参考,请勿直接盗用,对自身也是没有好处的。
这里没有详细教程(写教程实在累) 不过个人觉得实例比教程都有用的多,耐心把这么点代码看完,很容易懂的
在重点的位置 我用注释的方式做了简单说明
这次提供的是进度条的样式,示例的运行效果:
[重点不在这个效果如何,而是弄清楚样式的结构,具体做成什么样子就由设计师自由发挥了]
源码:
<Style x:Key="ProgressBarStyle" TargetType="{x:Type ProgressBar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid>
<!--背景框-->
<Rectangle Margin="0" VerticalAlignment="Stretch" Height="Auto" Stroke="#FF7C8C9A" RadiusX="1" RadiusY="1">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFDEDEDE" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!--进度低槽 不要改这个DockPanel的名字-->
<DockPanel x:Name="PART_Track" Margin="1" LastChildFill="false">
<!--进度填充条 不要改这个Rec的名字-->
<Rectangle x:Name="PART_Indicator">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFF3FFA7" Offset="0.075"/>
<GradientStop Color="#FFADDA4F" Offset="0.8"/>
<GradientStop Color="#FFCFEC31" Offset="0.129"/>
<GradientStop Color="#FF8AC118" Offset="0.871"/>
<GradientStop Color="#FFA8DC3B" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</DockPanel>
<!--边缘的一像素高光-->
<Rectangle Margin="1" Height="Auto" Stroke="White" Opacity="0.25"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<!--垂直方向的进度条-->
<Style.Triggers>
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid>
<!--背景框-->
<Rectangle Margin="0" VerticalAlignment="Stretch" Height="Auto" Stroke="#FF7C8C9A" RadiusX="1" RadiusY="1">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FFDEDEDE" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<DockPanel x:Name="PART_Track" Margin="1,0,1,1" LastChildFill="false">
<Decorator x:Name="PART_Indicator" DockPanel.Dock="Bottom">
<Rectangle >
<Rectangle.LayoutTransform>
<RotateTransform Angle="-90"/>
</Rectangle.LayoutTransform>
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFF3FFA7" Offset="0.075"/>
<GradientStop Color="#FFADDA4F" Offset="0.8"/>
<GradientStop Color="#FFCFEC31" Offset="0.106"/>
<GradientStop Color="#FF8AC118" Offset="0.871"/>
<GradientStop Color="#FFA8DC3B" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Decorator>
</DockPanel>
<!--边缘的一像素高光-->
<Rectangle Margin="1" Height="Auto" Stroke="White" Opacity="0.25"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>