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实现进度条

先看效果图：

思路：

前台代码：

后台关键代码：

最新文章

热门文章