WPF如何自定义ProgressBar滚动条样式

更新时间：2019年06月02日 14:49:40 作者：一叶知秋，知寒冬

这篇文章主要给大家介绍了关于WPF如何自定义ProgressBar滚动条样式的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用WPF具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧

一、前言

滚动条一般用于加载进度，我们在看视频的时候或者在浏览网页的时候经常能看到加载进度的页面。在程序开发中，默认的进度加载样式可能跟程序风格不太一样，或者加载进度的时候需要更改一下加载的样式。这个时候就需要通过修改ProgressBar的样式来实现。

二、ProgressBar的基本样式

ProgressBar的基本样式很简单：

<Style TargetType="{x:Type ProgressBar}">
   <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
   <Setter Property="SnapsToDevicePixels" Value="True"/>
   <Setter Property="Height" Value="15"/>
   <Setter Property="Background" Value="#6fae5f"/>
   <Setter Property="FontSize" Value="10"/>
   <Setter Property="Padding" Value="5,0"/>
   <Setter Property="Template">
    <Setter.Value>
     <ControlTemplate TargetType="{x:Type ProgressBar}">
      <Grid Background="#00000000">
       <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
       </Grid.RowDefinitions>
       <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="CommonStates">
         <VisualState x:Name="Determinate"/>
         <VisualState x:Name="Indeterminate">
          <Storyboard RepeatBehavior="Forever">
           <PointAnimationUsingKeyFrames Storyboard.TargetName="Animation" Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)">
            <EasingPointKeyFrame KeyTime="0:0:0" Value="0.5,0.5"/>
            <EasingPointKeyFrame KeyTime="0:0:1.5" Value="1.95,0.5"/>
            <EasingPointKeyFrame KeyTime="0:0:3" Value="0.5,0.5"/>
           </PointAnimationUsingKeyFrames>
          </Storyboard>
         </VisualState>
        </VisualStateGroup>
       </VisualStateManager.VisualStateGroups>
       
       <Grid Height="{TemplateBinding Height}">
        <Border Background="#000000" CornerRadius="7.5" Opacity="0.05"/>
        <Border BorderBrush="#000000" BorderThickness="1" CornerRadius="7.5" Opacity="0.1"/>
        <Grid Margin="{TemplateBinding BorderThickness}">
         <Border x:Name="PART_Track"/>
         <Grid x:Name="PART_Indicator" ClipToBounds="True" HorizontalAlignment="Left" >
          <Grid.ColumnDefinitions>
           <ColumnDefinition x:Name="width1"/>
           <ColumnDefinition x:Name="width2" Width="0"/>
          </Grid.ColumnDefinitions>
          <Grid x:Name="Animation" RenderTransformOrigin="0.5,0.5">
           <Grid.RenderTransform>
            <TransformGroup>
             <ScaleTransform ScaleY="-1" ScaleX="1"/>
             <SkewTransform AngleY="0" AngleX="0"/>
             <RotateTransform Angle="180"/>
             <TranslateTransform/>
            </TransformGroup>
           </Grid.RenderTransform>
           <Border Background="{TemplateBinding Background}" CornerRadius="7.5">
            <Viewbox HorizontalAlignment="Left" StretchDirection="DownOnly" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="True">
             <TextBlock Foreground="#ffffff" SnapsToDevicePixels="True" FontSize="{TemplateBinding FontSize}" VerticalAlignment="Center" Text="{Binding RelativeSource={RelativeSource TemplatedParent},Path=Value,StringFormat={}{0}%}" RenderTransformOrigin="0.5,0.5">
              <TextBlock.RenderTransform>
               <TransformGroup>
                <ScaleTransform ScaleY="1" ScaleX="-1"/>
                <SkewTransform AngleY="0" AngleX="0"/>
                <RotateTransform Angle="0"/>
                <TranslateTransform/>
               </TransformGroup>
              </TextBlock.RenderTransform>
             </TextBlock>
            </Viewbox>
           </Border>
           <Border BorderBrush="#000000" BorderThickness="1" CornerRadius="7.5" Opacity="0.1"/>
          </Grid>
         </Grid>
        </Grid>
       </Grid>
      </Grid>
      <ControlTemplate.Triggers>
       
       <Trigger Property="IsEnabled" Value="False">
        <Setter Property="Background" Value="#c5c5c5"/>
       </Trigger>
       <Trigger Property="IsIndeterminate" Value="true">
        <Setter TargetName="width1" Property="Width" Value="0.25*"/>
        <Setter TargetName="width2" Property="Width" Value="0.725*"/>
       </Trigger>
      </ControlTemplate.Triggers>
     </ControlTemplate>
    </Setter.Value>
   </Setter>
  </Style>

引用示例：

<ProgressBar Height="15" Width="150" Value="40" Margin="10"/>

显示效果：

所有代码已经上传到github：https://github.com/cmfGit/WpfDemo.git

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。

您可能感兴趣的文章:

C# .NET创建虚拟目录的方法详解
虚拟目录（virtual directory），计算机术语，每个 Internet服务可以从多个目录中发布。本文将为大家介绍如何通过C# asp.net mvc 创建虚拟目录，感兴趣的可以了解一下
2022-01-01
WPF仿LiveCharts实现饼图的绘制
这篇文章主要介绍了如何利用WPF仿LiveCharts实现饼图的绘制，文中的示例代码讲解详细，对我们学习或工作有一定帮助，需要的可以参考一下
2022-07-07
C#常用GDI+文字操作汇总
这篇文章主要介绍了C#常用GDI+文字操作,包括文字投影、倒影、旋转等特效,对于提升程序界面的视觉效果有很大的用处,需要的朋友可以参考下
2014-08-08
C#中把字符串String转换为整型Int的小例子
这篇文章主要介绍了C#中把字符串String转换为整型Int的小例子,本文使用TryParse方法实现转换,需要的朋友可以参考下
2014-08-08
c# 三种方法调用WebService接口
这篇文章主要介绍了c# 三种方法调用WebService接口的相关资料，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下
2020-07-07
C#基础知识全面解析可空类型
C# 2.0 中还引入了可空类型，可空类型也是值类型，只是可空类型是包括null的值类型的，下面就介绍下C#2.0中对可空类型的支持具体有哪些内容
2012-11-11
c#连接mdf文件示例分享
这篇文章主要介绍了c#连接mdf文件示例，,需要的朋友可以参考下
2014-03-03
详解C#中的定时器Timer类及其垃圾回收机制
这篇文章主要介绍了C#中的定时器Timer类及其垃圾回收机制,讲解了Timer相关的单线程异步工作,需要的朋友可以参考下
2016-04-04
C#中增加SQLite事务操作支持与使用方法
这篇文章主要介绍了C#中增加SQLite事务操作支持与使用方法,结合实例形式分析了C#中针对SQLite事务操作的添加及使用技巧,需要的朋友可以参考下
2017-07-07
C#获取动态生成的CheckBox值
checkbox是VS2012的常用控件之一，可以方便的为某些功能取消或启用，下面教你如何简单使用checkbox。本文通过两种方法给大家介绍，需要的朋友一起看看吧
2015-09-09

WPF如何自定义ProgressBar滚动条样式

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具