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#中回调函数
回调函数是一种在编程中常用的概念,本文将介绍回调函数的概念、语法和应用,并讨论如何设计优化和重用回调函数,以及它们在并发编程中的用途,感兴趣的可以了解一下
2024-02-02
Unity的IPostBuildPlayerScriptDLLs实用案例深入解析
这篇文章主要为大家介绍了Unity的IPostBuildPlayerScriptDLLs实用案例深入解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
详解C#切换窗口
最近项目不多忙，于是抽点时间巩固下切换窗口问题，感兴趣的朋友跟着小编一起学习吧
2016-04-04
通过VS中的数据源选择对话框简单实现数据库连接配置[图]
通过VS中的数据源选择对话框简单实现数据库连接配置[图]...
2007-03-03
C#操作Excel相关方法总结
这篇文章主要介绍了C#操作Excel相关方法总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-07-07
c# 引用类型和值类型
CLR支持两种类型：引用类型和值类型。引用类型总是从托管堆上分配的
2012-10-10
C# OpenCvSharp 颜色反转实例详解
OpenCVSharp是OpenCV的.NET wrapper,它比Emgucv更接近于原始的OpenCV,并且有很多的样例参考,其采用LGPL发行,对商业应用友好（基本上相当于BSD）,这篇文章主要介绍了C# OpenCvSharp 颜色反转的知识,需要的朋友可以参考下
2024-02-02
解析C#自定义控件的制作与使用实例的详解
本篇文章是对C#中自定义控件的制作与使用实例进行了详细的分析介绍，需要的朋友参考下
2013-05-05
C#中Timer使用及解决重入问题
本文主要介绍了C#中Timer使用及解决重入问题的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
C#程序员应该养成的程序性能优化写法
工作和生活中经常可以看到一些程序猿,写代码的时候只关注代码的逻辑性,而不考虑运行效率，其实这对大多数程序猿来说都是没有问题的，不过作为一只有理想的CodeMonkey,我还是希望给大家分享一些性能优化心得
2017-08-08