原文: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. 利用Qt自带工具发布程序

    Qt官方开发环境生成的exe发布方式--使用windeployqt 从开始菜单-->Qt 5.4.0-->5.4-->MinGW 4.9 (32-bit)-->Qt 5.4 f ...

  2. CSS中position和header和overflow和background

    <!DOCTYPE html> <!--CSS中position属性--> <html lang="en"> <head> < ...

  3. JS 过滤HTML标签,取得纯文本

    一.过滤掉所有HTML标签如下: str.innerHTML.replace(/<.*?>/g,"") 二.过滤掉带属性的某一个标签,如<span class=' ...

  4. Wamp Apache 启动失败检测方法

    一般情况下,看错误日志就可以解决.如果遇到错误日志看不到的情况,不放试试下面的方法 //无错误日志解决办法cmd命令行切换到C:\wamp\bin\apache\apache2.4.9\bin目录 输 ...

  5. Prime Ring Problem HDU - 1016 (dfs)

    Prime Ring Problem HDU - 1016 A ring is compose of n circles as shown in diagram. Put natural number ...

  6. 从页面获取form表单提交的数据

    1 使用HttpServletRequest,方便灵活 页面代码,使用action提交一个表单,里边有球的id,球的主人,球的颜色,所在省份,区域 <form action="ball ...

  7. netbeans调试webapp 只能用localhost访问

    etbeans 我的电脑是192.168.0.2,用这个地址访问 网上有人说,分两种情况 此问题分两种情况: 1. 可以用127.0.0.1访问 2. 不能用127.0.0.1访问 针对第一种情况,我 ...

  8. 微信网页授权demo1

    要授权首先要网页域名授权 然后就index.php代码如下 <?php require_once("./function.php"); $url = 'http://'.$_ ...

  9. 使用Data Lake Analytics + OSS分析CSV格式的TPC-H数据集

    0. Data Lake Analytics(DLA)简介 关于Data Lake的概念,更多阅读可以参考:https://en.wikipedia.org/wiki/Data_lake 以及AWS和 ...

  10. Chrome进行多分辨率测试

    在Web开发中,经常需要在不同的浏览器分辨率下进行测试,以确认页面是否可以适应不同的分辨率. 下载Resolution Test扩展程序 下载地址:http://pan.baidu.com/s/1gf ...