原文:WPF Canvas实现进度条

先看效果图:

思路:

一个Canvas做背景,一个Canvas用来显示进度,图片放在显示进度的Canvas中,靠右设置为图片本身宽度一半的距离,视觉上实现以图片中轴线为原点

前台代码:

<Window x:Class="ProgressMask.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow">
<Grid>
<Canvas Name="myProgressCanvas" Background="LightGray" Height="50" Width="300">
<Canvas Name="myProgressValue" Canvas.Left="0" Width="10" Background="Red" Height="{Binding ElementName=myProgressCanvas,Path=Height}">
<Image Name="myProgressImg" Width="10" Canvas.Right="-5" Source=".\倒三角.png" Height="{Binding ElementName=myProgressCanvas,Path=Height,Mode=OneWay}"></Image>
</Canvas>
</Canvas>
</Grid>
</Window>

后台关键代码:

        public Double ProgressImgWidth
{
get { return myProgressImg.Width; }
set
{
myProgressImg.Width = value;
Canvas.SetRight(myProgressImg, -(myProgressImg.Width / ));
}
}

目前没有想到如何在不手动设置图片宽度的情况下设置图片的位置,暂时在前台页面中设置图片宽度和位置

WPF Canvas实现进度条的更多相关文章

  1. WPF 绕圈进度条(二)

    一 以前的方案 以前写过一个圆点绕圈的进度条,根据参数圆点个数和参数每次旋转角度,主要是在cs文件中动态添加圆点,通过后台定时器,动态设置角度后用正弦余弦计算(x,y)的位置. 此方案优点:动态添加L ...

  2. WPF自定义控件第一 - 进度条控件

    本文主要针对WPF新手,高手可以直接忽略,更希望高手们能给出一些更好的实现思路. 前期一个小任务需要实现一个类似含步骤进度条的控件.虽然对于XAML的了解还不是足够深入,还是摸索着做了一个.这篇文章介 ...

  3. WPF 实现圆形进度条

    项目中用到圆形进度条,首先就想到使用 ProgressBar 扩展一个,在园子里找到迷途的小榔头给出的思路和部分代码,自己加以实现. 进度小于60显示红色,大于60则显示绿色.效果如下: 基本思路: ...

  4. canvas圆形进度条

    通过定义一个canvas标签, new方法传进ID值,和旋转角度值,即可生成圆形进度条 <!DOCTYPE html> <html lang="en"> & ...

  5. WPF好看的进度条实现浅谈(效果有点类似VS2012安装界面)

    为了界面友好,一般的操作时间较长时,都需要增加进度条提示.由于WPF自带的进度条其实不怎么好看,而且没啥视觉效果.后来,装VS2012时,发现安装过程中进度条效果不错,于是上网查了资料.学习了Mode ...

  6. 使用线程新建WPF窗体(公用进度条窗体)

    使用线程新建窗体 项目中需要一个公用的进度条窗体.大家知道在wpf中,有两个线程,一个是UI线程,另一个是监听线程(一直监听用户的输入).如果我们后台有阻塞UI线程的计算存在,那么界面上的比如进度条什 ...

  7. WPF 绕圈进度条(一)

    在设计界面时,有时会遇到进度条,本次讲解如何设计自定义的绕圈进度条,直接上代码: 1.控件界面 <UserControl x:Class="ProgressBarControl&quo ...

  8. canvas环形进度条

    <style> canvas { border: 1px solid red; margin: 100px; }</style> <canvas id="rin ...

  9. canvas绘制进度条(wepy)

    <template> <canvas canvas-id="canvas" style="width:{{width+10}}px;height:{{w ...

随机推荐

  1. 《2018年云上挖矿态势分析报告》发布,非Web类应用安全风险需重点关注

    近日,阿里云安全团队发布了<2018年云上挖矿分析报告>.该报告以阿里云2018年的攻防数据为基础,对恶意挖矿态势进行了分析,并为个人和企业提出了合理的安全防护建议. 报告指出,尽管加密货 ...

  2. windows 和 mac 文件夹共享问题汇总

    目标:windows上的文件夹,共享给MAC,mac可以将文件复制到windows上来 windows设置共享文件夹,然后在mac上访问 假设win的ip地址是10.10.27.11,则mac上远程方 ...

  3. Web App开发注意事项

    1.首先我们来看看webkit内核中的一些私有的meta标签,这些meta标签在开发webapp时起到非常重要的作用 <meta content=”width=device-width, ini ...

  4. description The request sent by the client was syntactically incorrect.

    shi用url传递参数,其他页面都ojbk的 唯独有一个请求 不应该啊 这明显的已经配置好了啊 因为别的请求我也是这样配置的啊,运行是没问题的啊 运行好好的啊 一时间,感觉无从下手了 经过十几分钟各种 ...

  5. iOS播放器横竖屏切换

    http://www.cocoachina.com/cms/wap.php?action=article&id=20292 http://feihu.me/blog/2015/how-to-h ...

  6. Codeforces 1150E(树、线段树)

    要点 括号序列平衡度即树深度的性质 相当于中序遍历,则两点间最浅的地方即是LCA的性质 线段树维护\(d(a) + d(c) - 2*d(lca(a,c))\),一层层剥,思考维护这个量需要什么,结果 ...

  7. 微服务开源生态报告 No.7

    「微服务开源生态报告」,汇集各个开源项目近期的社区动态,帮助开发者们更高效的了解到各开源项目的最新进展. 社区动态包括,但不限于:版本发布.人员动态.项目动态和规划.培训和活动. 非常欢迎国内其他微服 ...

  8. 【Codeforces Round #430 (Div. 2) D】Vitya and Strange Lesson

    [链接]点击打开链接 [题意] 给出一个数组,每次操作将整个数组亦或一个数x,问得到的数组的结果中的mex.mex表示为自然数中第一个没有出现过的数. [题解] 异或的效果是可以累加的,所以不用每次都 ...

  9. HDU - 1724 Ellipse 自适应辛普森模板

    OJ 题解传送门 //Achen #include<algorithm> #include<iostream> #include<cstring> #include ...

  10. DOM 事件监听 事件冒泡 事件捕获

    addEventListener() 方法 实例: // 当用户点击按钮时触发监听事件: document.getElementById("myBtn").addEventList ...