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

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

posted @ 2018-11-21 13:42  阿拉丁等等灯  阅读(116)  评论(0编辑  收藏