[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>

 转自:http://slanyao.diandian.com/post/2009-09-15/40028174898

posted on 2012-11-21 01:03  老杨999  阅读(526)  评论(0编辑  收藏  举报

导航