WPF如何自定义ProgressBar滚动条样式
更新时间:2020年6月25日 10:36 点击:1871
一、前言
滚动条一般用于加载进度,我们在看视频的时候或者在浏览网页的时候经常能看到加载进度的页面。在程序开发中,默认的进度加载样式可能跟程序风格不太一样,或者加载进度的时候需要更改一下加载的样式。这个时候就需要通过修改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#实现简单学生信息管理系统
下一篇: WPF自定义实现IP地址输入控件
相关文章
c# WPF中通过双击编辑DataGrid中Cell的示例(附源码)
这篇文章主要介绍了c# WPF中通过双击编辑DataGrid中Cell的示例(附源码),帮助大家更好的理解和学习使用c#,感兴趣的朋友可以了解下...2021-03-03- 主要功能:获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 :$(window).width(); 获取页面的文档高度 $(document).height(); 获取页面的文档宽度 :$(document).width();...2015-10-21
- 最近在网上看到了新版的360安全卫士,感觉界面还不错,于是用WPF制作了一个,时间有限,一些具体的控件没有制作,用图片代替了。感兴趣的朋友一起跟着小编学习WPF实现类似360安全卫士界面的程序源码分享...2020-06-25
- 这篇文章主要介绍了JavaScript 获取滚动条位置并将页面滑动到锚点的的相关资料,帮助大家更好的理解和学习使用JavaScript,感兴趣的朋友可以了解下...2021-02-09
BootStrap Progressbar 实现大文件上传的进度条的实例代码
这篇文章主要介绍了BootStrap Progressbar 实现大文件上传的进度条的实例代码的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-07-01- 这篇文章主要为大家详细介绍了WPF仿三星手机充电界面实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要介绍了C# WPF 通过委托实现多窗口间的传值的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2020-06-25
- 这篇文章主要介绍了c# textbox的滚动条总是指向最底端的简单解决方法,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了C#中WPF使用多线程调用窗体组件的方法,涉及C#中多线程的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
- 这篇文章主要为大家详细介绍了WPF TextBox实现按字节长度限制输入功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要为大家详细介绍了WPF InkCanvas绘制矩形和椭圆,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 在开发中经常遇到去掉全部的滚动条,去掉右边的滚动条且保留底下的滚动条,去掉底下的滚动条且保留右边的滚动条,大家基于js是怎么实现的呢?下面小编通过本文给大家详细介绍下,对js iframe滚动条相关知识感兴趣的朋友一起学习吧...2016-11-22
- 这篇文章主要给大家介绍了关于WPF基础教程之形状画刷与变换的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-25
- 下面小编就为大家带来一篇DIV随滚动条滚动而滚动实现代码【推荐】。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-04-16
- 这篇文章主要给大家介绍了关于WPF如何自定义TabControl控件样式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。...2020-06-25
- 下面小编就为大家带来一篇js将滚动条滚动到指定位置的简单实现方法。小编觉得挺不错的, 现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-07-01
- 下面小编就为大家分享一篇WPF水珠效果按钮组的实现教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-09-22
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
这篇文章主要介绍了快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突问题,感兴趣的小伙伴们可以参考一下...2016-04-18- 本篇文章是对WPF实现音频文件循环顺序播放的方法进行了详细的分析介绍,需要的朋友参考下...2021-09-22
- 这篇文章主要为大家详细介绍了WPF实现转圈进度条效果,如何设计自定义的绕圈进度条,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-22