Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >删除进度条中的光泽吗?

删除进度条中的光泽吗?
EN

Stack Overflow用户
提问于 2012-10-13 09:53:13
回答 2查看 7.9K关注 0票数 14

因此,有人建议我使用WPF窗体为我的应用程序创建自定义UI。我想要做的第一件事就是改变进度条的外观。唯一让我对它的新外观望而却步的是它上面的光滑效果。我想要的进度条是由大多数纯色。有没有办法去掉进度条的光滑部分?

如下所示:

谢谢。

EN

回答 2

Stack Overflow用户

发布于 2012-10-13 15:28:53

您可以通过编辑进度条的ControlTemplate来实现所需的任何样式。下面是一个例子:

免责声明:我不是设计师。

代码语言:javascript
运行
AI代码解释
复制
<!-- Brushed used by the progress bar style -->
<LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill" EndPoint="0,0" MappingMode="Absolute" StartPoint="-100,0">
    <GradientStop Color="#00000000" Offset="0"/>
    <GradientStop Color="#FF000000" Offset="0.4"/>
    <GradientStop Color="#FF000000" Offset="0.6"/>
    <GradientStop Color="#00000000" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="ProgressBarTopHighlight" Color="#80FFFFFF" />
<!-- progress bar style -->
<Style x:Key="FlatProgressBar" TargetType="{x:Type ProgressBar}">
    <Setter Property="Foreground" Value="#01D328"/>
    <Setter Property="Background" Value="#C7C7C7"/>
    <Setter Property="BorderBrush" Value="#B2B2B2"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ProgressBar}">
                <Grid x:Name="Background" SnapsToDevicePixels="true">
                    <Rectangle Fill="{TemplateBinding Background}" RadiusY="2" RadiusX="2"/>
                    <Border Background="{x:Null}" CornerRadius="2" Margin="1"/>
                    <Border BorderBrush="#80FFFFFF" BorderThickness="1,0,1,1" Background="{StaticResource ProgressBarTopHighlight}" Margin="1"/>
                    <Rectangle x:Name="PART_Track" Margin="1"/>
                    <Decorator x:Name="PART_Indicator" HorizontalAlignment="Left" Margin="1">
                        <Grid x:Name="Foreground">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition MaxWidth="15"/>
                                <ColumnDefinition Width="0.1*"/>
                                <ColumnDefinition MaxWidth="15"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <Rectangle x:Name="Indicator" Grid.ColumnSpan="3" Fill="{TemplateBinding Foreground}" Grid.RowSpan="2"/>
                            <Rectangle x:Name="Animation" Grid.ColumnSpan="3" Fill="{TemplateBinding Foreground}" Grid.RowSpan="2">
                                <Rectangle.OpacityMask>
                                    <MultiBinding>
                                        <MultiBinding.Converter>
                                            <Themes:ProgressBarHighlightConverter/>
                                        </MultiBinding.Converter>
                                        <Binding Source="{StaticResource ProgressBarIndicatorAnimatedFill}"/>
                                        <Binding ElementName="Background" Path="ActualWidth"/>
                                        <Binding ElementName="Background" Path="ActualHeight"/>
                                    </MultiBinding>
                                </Rectangle.OpacityMask>
                            </Rectangle>
                        </Grid>
                    </Decorator>
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="Orientation" Value="Vertical">
                        <Setter Property="LayoutTransform" TargetName="Background">
                            <Setter.Value>
                                <RotateTransform Angle="-90"/>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="LayoutTransform" TargetName="PART_Track">
                            <Setter.Value>
                                <RotateTransform Angle="90"/>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="LayoutTransform" TargetName="PART_Indicator">
                            <Setter.Value>
                                <RotateTransform Angle="90"/>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="LayoutTransform" TargetName="Foreground">
                            <Setter.Value>
                                <RotateTransform Angle="-90"/>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="IsIndeterminate" Value="true">
                        <Setter Property="Visibility" TargetName="Indicator" Value="Collapsed"/>
                    </Trigger>
                    <Trigger Property="IsIndeterminate" Value="false">
                        <Setter Property="Fill" TargetName="Animation" Value="#80B5FFA9"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

将此样式应用于您的ProgressBar,您就可以开始工作了:

代码语言:javascript
运行
AI代码解释
复制
<ProgressBar Style="{StaticResource FlatProgressBar}" Value="50" />

以下是最终结果:

票数 20
EN

Stack Overflow用户

发布于 2013-11-01 23:36:02

Nasreddine answers非常好,但如果你想要更简单的东西,你可以使用下面的

代码语言:javascript
运行
AI代码解释
复制
    <Style TargetType="{x:Type ProgressBar}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ProgressBar">
                    <Border BorderBrush="#D9DCE1" BorderThickness="1" Background="#E8E8E8" CornerRadius="0" Padding="0">
                        <Grid x:Name="PART_Track">
                            <Rectangle x:Name="PART_Indicator" HorizontalAlignment="Left" Fill="#FF49A3E1" />
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
票数 20
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/12871978

复制
相关文章
a标签href的功用
a标签在html内使用最多的就是超链接,在href属性中加入url链接即可。当然,他还有其他的一些功用,下面来看一下
OECOM
2021/02/04
3K0
jquery获取a标签中href值为空的连接,并提示信息
在未上线的项目中,尤其前端开发过程中,挺频繁使用超链接,但是超链接点击之后会跳转当前的首页!(很烦心).
十月梦想
2018/08/29
6.9K0
Html<a>标签href的困惑记载
近日,在工作中遇到一个小问题(给手游平台做些网页活动,其中牵涉到一个按钮链接,就习以为常的用了<a>标签,Click响应之后走一段js代码逻辑-弹出一个分享微信弹框。Chrome和Android平台都没问题,测试阶段发现Ios平台出现了点问题~弹框闪现一下之后,页面被重新渲染了,自然弹框又被消隐掉了。),经历一番查证,个中缘由原来如此。 出现问题后,立马走了段代码逻辑,发现并没任何逻辑问题。并且Chrome和Android平台又都OK的,只是Ios平台有此问题。经验不够丰富情形之下,只能在Ios手机上先Al
晚晴幽草轩轩主
2018/03/27
3.5K0
javascript和jQuery修改a标签的href属性
a 标签的 href 属性值如何修改,下面分享一下使用 javascript 或 jQuery 的实现方法。  JavaScript: document.getElementById("myId").setAttribute("href","www.xxx.com");  document.getElementById("myId").href = "www.xxx.com"; jQuery: $("#myId").attr("href","www.xxx.com");
德顺
2019/11/13
4.7K0
获取HTML网页中option标签元素的值
在进行表单元素的操作时,难免会遇到对option元素的挑选,下面的示例代码能够很好的获取到你option元素选择的值,如果要传递给后端,可通过ajax或者其他方式传递即可。 示例代码
呆呆
2021/10/09
8K0
WordPress 如何获取分类/标签的ID
鼠标移动到编辑处,看到浏览器底部出现链接,其中的tag_ID=5中这个5就是分类的ID,标签同理。
可定
2020/04/20
6.1K0
WordPress 如何获取分类/标签的ID
js如何用正则获取a标签的内容
<script type="text/javascript"> function pp(){ var re=/<a[^>]*href=['"]([^"]*)['"][^>]*>
試毅-思伟
2018/09/06
15.2K0
【HTML】HTML 标签总结 ★★★ ( 标签类型 | 排版标签 | 文本格式化标签 | 标签属性 | 图像标签 | 链接标签 | 注释标签 | 锚点定位 | 预格式化文本标签 | 特殊符号 )
HTML 英文全称 " HyperText Mark-up Language " , 中文名称是 " 超文本标记语言 " ;
韩曙亮
2023/03/30
7.2K0
【HTML】HTML 标签总结 ★★★ ( 标签类型 | 排版标签 | 文本格式化标签 | 标签属性 | 图像标签 | 链接标签 | 注释标签 | 锚点定位 | 预格式化文本标签 | 特殊符号 )
Python绘制带有中文标签和图例的图
本文属于科学计算与可视化范畴,要点在于扩展库numpy、pylab、matplotlib的用法。 import numpy as np import pylab as pl import matplotlib.font_manager as fm #设置字体 myfont = fm.FontProperties(fname=r'C:\Windows\Fonts\STKAITI.ttf') #自变量取值范围 t = np.arange(0.0, 2.0*np.pi, 0.01) #计算正弦函数值 s = n
Python小屋屋主
2018/04/16
5K0
Python绘制带有中文标签和图例的图
HTML5 常用 标签 锚 列表 用法
指的是因为一个页面过长导致拖动滚动条不方便浏览的时候,有一种方法,点击某个超链接立即跳转到该部分。
Designer 小郑
2023/08/01
3170
【HTML】HTML 标签 ⑤ ( 锚点定位 | base 标签 | 预格式化文本标签 | HTML 特殊符号 )
base 标签 的 作用是 为 HTML 页面中 所有的链接 添加 打开状态 , 该标签必须 写在 <head></head> 标签之间 ;
韩曙亮
2023/03/30
2.3K0
【HTML】HTML 标签 ⑤ ( 锚点定位 | base 标签 | 预格式化文本标签 | HTML 特殊符号 )
小程序image标签mode属性
值 说明 scaleToFill 缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 aspectFit 缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。 aspectFill 缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。 widthFix 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变 top 裁剪模式,不缩放图片,只显示图片的顶部区域 bo
薛定喵君
2019/11/06
1.6K0
如何实现EMLOG获取固定数量的网站标签
标签功能是WEB发展的产物,EMLOG当然也具备文章添加标签的功能。而且在EMLOG的侧边栏组件中,用户也可以手动增加该模块。
用户8099761
2023/05/10
6650
详析获取标签
在前几期的文章当中,我们学习了JS的基础语法,它是我们学习其它知识点的重要前提。小编也与大家分享了JS逻辑与DOM的相结合,并带着大家去实现了一些简单的页面交互效果,涉及了获取标签—>绑定事件—>操作标签样式。而今天的文章主要带着大家来分析其它获取标签的方法,这样才能更灵活的去获取网页中的标签。 本文内容概要: 1 回顾通过ID名获取标签的方法 2 获取标签的其它方法 3 课程小结 4 课后作业 1 回顾通过ID名获取标签的方法 ID名获取标签需要给标签起一个ID名,然后通过getElementById()
HTML5学堂
2018/03/13
2.2K0
详析获取标签
jQuery和js获取页面中所有a链接的href值
利用JavaScript和jQuery获取页面中的a链接: jQuery方法: //$('a') 获取了所有的a标签,然后循环获取 $('a').each(function(){     var href = $(this).attr('href');     console.log(href); }); JavaScript方法: 可以封装成一个函数 function getHref(){     var hrefArr = document.getElementsByTagName('a'); //获
德顺
2019/11/13
15K0
使用h5 <a>标签 href='url' download 下载踩过的坑
如果url指向第三方资源,download会失效,表现和不使用download时一致——浏览器能打开的文件,浏览器会直接打开,不能打开的文件,会直接下载。浏览器打开的文件,可以手动下载。
小蔚
2019/09/11
6.4K0
asp.net mvc razor布局页中a标签的href的跳转问题
笔者做了一个文件上传系统,文件上传后,保存在wwwroot目录的file文件夹中,并把该文件的路径保存到数据库中, 如这样的一个路径保存在数据库: file/b775f487-0127-41e0-9df8-2a5f1624cd87.jpg 上传成功后,当在home控制器的index页面中的a标签中,直接这样编写 <a href="@filePath">下载</a> 页面生成后,链接是 http://localhost:53953/file/b775f487-0127-41e0
码农阿宇
2018/04/18
2.6K0
input的属性值_input标签常用的属性
大家好,又见面了,我是你们的朋友全栈君。 <input name=”txtPwd” type=”password” maxlength=”20″ id=”txtPwd” class=”lg_input” οnpaste=”return false;” οncοntextmenu=”return false;” οncοpy=”return false;” oncut=”return false;”>
全栈程序员站长
2022/09/21
4.6K0
标签制作软件如何制作1行多列的标签
在使用标签制作软件制作标签时,我们需要根据标签纸的实际尺寸在标签软件中进行设置。因为只有将标签纸的实际尺寸跟标签软件中的纸张尺寸设置成一致的,才能打印到相应的纸张上。例如常见的一行多列的标签该怎么设置呢?接下来就带大家学习下在标签制作软件中设置1行多列标签的方法:
用户5746110
2019/09/18
2.9K0
点击加载更多

相似问题

从锚点(a)标签获取本地href值

65

Jquery -将标签的文本值嵌入锚href属性

10

带有WatiN的"a href“标签

31

标签锚点和href的问题,只有HTML

10

如何转到带有隐藏属性值的标签上的href?

231
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档