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 / 2));
            }
        }

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

转载于:https://www.cnblogs.com/yanxh/p/9994555.html