WPF实现三星手机充电界面

之前看公司web前端做了个 圆形的水波纹 进度条，就想用wpf 做一个，奈何自己太菜 一直做不出来，在看过 “普通的地球人” 的 “

wpf实现三星手机充电界面 博客之后 我也来照葫芦画个瓢。

废话不多说 先贴一下效果图

虽然样子 low 了些 但是基本满足我的需求了，下面是代码

前端

<usercontrol x:class="waveprogress.usercontrol.waveprogresscontrol"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:waveprogress.usercontrol"
             mc:ignorable="d" 
             height="150" width="150" x:name="wave_control">
    <usercontrol.resources>
        <storyboard x:key="waterstoryboard">
            <pointanimation storyboard.targetname="bs_water" desiredframerate="20" storyboard.targetproperty="point1" from="90,60" to="90,90" duration="00:00:2" autoreverse="true" repeatbehavior="forever"></pointanimation>
            <pointanimation storyboard.targetname="bs_water" desiredframerate="20" storyboard.targetproperty="point2" from="100,110" to="100,95" duration="00:00:1.8" autoreverse="true" repeatbehavior="forever"></pointanimation>
        </storyboard>
    </usercontrol.resources>
    <grid width="{binding elementname=wave_control,path=width}" height="{binding elementname=wave_control,path=height}" 
          background="{binding waveprogressbackground,mode=twoway,updatesourcetrigger=propertychanged}">
        <grid.clip>
            <ellipsegeometry center="75,75" radiusx="75" radiusy="75" ></ellipsegeometry>
        </grid.clip>
        <stackpanel width="150" verticalalignment="bottom">
            <path fill="{binding waveporgressbarcolor,mode=twoway,updatesourcetrigger=propertychanged}" >
                <path.data>
                    <pathgeometry fillrule="evenodd" >
                        <pathfigure startpoint="0,90" >
                            <beziersegment x:name="bs_water" point1="90,60" point2="100,110" point3="150,90"></beziersegment>
                            <polylinesegment points="150,100 0,100"></polylinesegment>
                        </pathfigure>
                    </pathgeometry>
                </path.data>
                <path.triggers>
                    <eventtrigger routedevent="path.loaded">
                        <beginstoryboard storyboard="{staticresource waterstoryboard}"></beginstoryboard>
                    </eventtrigger>
                </path.triggers>
            </path>
            <rectangle height="{binding waveprogressheight,updatesourcetrigger=propertychanged}" fill="{binding waveporgressbarcolor,mode=twoway,updatesourcetrigger=propertychanged}"/>
        </stackpanel>
        <ellipse verticalalignment="bottom" width="150" height="150" stroke="{binding waveborderbrush,mode=twoway,updatesourcetrigger=propertychanged}" fill="transparent" 
                 strokethickness="{binding waveborderthickness,mode=twoway,updatesourcetrigger=propertychanged}"/>
        <textblock verticalalignment="center" horizontalalignment="center" fontsize="22" foreground="{binding textcolor,mode=twoway,updatesourcetrigger=propertychanged}">
            <run text="{binding displayvalue,updatesourcetrigger=propertychanged}"></run>
            <run text="%"></run>
        </textblock>
    </grid>
</usercontrol>

后台

using system.globalization;
using system.windows;
using system.windows.media;

namespace waveprogress.usercontrol
{
    /// <summary>
    /// waveprogresscontrol.xaml 的交互逻辑
    /// </summary>
    public partial class waveprogresscontrol : system.windows.controls.usercontrol
    {
        public waveprogresscontrol()
        {
            initializecomponent();
            this.datacontext = this;
        }

        public static readonly dependencyproperty waveprogressbackgroundproperty = dependencyproperty.register(
            "waveprogressbackground", typeof(solidcolorbrush), typeof(waveprogresscontrol), new propertymetadata(brushes.white));

        /// <summary>
        /// 进度条背景色
        /// </summary>
        public solidcolorbrush waveprogressbackground
        {
            get { return (solidcolorbrush) getvalue(waveprogressbackgroundproperty); }
            set { setvalue(waveprogressbackgroundproperty, value); }
        }

        public static readonly dependencyproperty waveborderbrushproperty = dependencyproperty.register(
            "waveborderbrush", typeof(solidcolorbrush), typeof(waveprogresscontrol), new propertymetadata(brushes.blue));
        /// <summary>
        /// 边框颜色
        /// </summary>
        public solidcolorbrush waveborderbrush
        {
            get { return (solidcolorbrush) getvalue(waveborderbrushproperty); }
            set { setvalue(waveborderbrushproperty, value); }
        }

        public static readonly dependencyproperty waveborderthicknessproperty = dependencyproperty.register(
            "waveborderthickness", typeof(double), typeof(waveprogresscontrol), new propertymetadata(2.0));

        /// <summary>
        /// 边框粗细
        /// </summary>
        public double waveborderthickness
        {
            get { return (double) getvalue(waveborderthicknessproperty); }
            set { setvalue(waveborderthicknessproperty, value); }
        }

     
        public static readonly dependencyproperty waveporgressbarcolorproperty = dependencyproperty.register(
            "waveporgressbarcolor", typeof(solidcolorbrush), typeof(waveprogresscontrol), new propertymetadata(brushes.red));
        /// <summary>
        /// 进度条颜色
        /// </summary>
        public solidcolorbrush waveporgressbarcolor
        {
            get { return (solidcolorbrush) getvalue(waveporgressbarcolorproperty); }
            set { setvalue(waveporgressbarcolorproperty, value); }
        }

        public static readonly dependencyproperty textcolorproperty = dependencyproperty.register(
            "textcolor", typeof(solidcolorbrush), typeof(waveprogresscontrol), new propertymetadata(brushes.black));
        /// <summary>
        /// 文字颜色
        /// </summary>
        public solidcolorbrush textcolor
        {
            get { return (solidcolorbrush) getvalue(textcolorproperty); }
            set { setvalue(textcolorproperty, value); }
        }

        public static readonly dependencyproperty valueproperty = dependencyproperty.register(
            "value", typeof(double), typeof(waveprogresscontrol), new propertymetadata(default(double)));

        /// <summary>
        /// 当前进度
        /// </summary>
        public double value
        {
            get { return (double) getvalue(valueproperty); }
            set { setvalue(valueproperty, value); }
        }

        public static readonly dependencyproperty maxvalueproperty = dependencyproperty.register(
            "maxvalue", typeof(double), typeof(waveprogresscontrol), new propertymetadata(default(double)));

        public double maxvalue
        {
            get { return (double) getvalue(maxvalueproperty); }
            set { setvalue(maxvalueproperty, value); }
        }

        public static readonly dependencyproperty displayvalueproperty = dependencyproperty.register(
            "displayvalue", typeof(string), typeof(waveprogresscontrol), new propertymetadata("0"));

        public string displayvalue
        {
            get { return (string) getvalue(displayvalueproperty); }
            set { setvalue(displayvalueproperty, value); }
        }

        public static readonly dependencyproperty waveprogressheightproperty = dependencyproperty.register(
            "waveprogressheight", typeof(double), typeof(waveprogresscontrol), new propertymetadata(default(double)));

        /// <summary>
        /// 次属性不要手动设置
        /// </summary>
        public double waveprogressheight
        {
            get { return (double) getvalue(waveprogressheightproperty); }
            set { setvalue(waveprogressheightproperty, value); }
        }

        protected override void onpropertychanged(dependencypropertychangedeventargs e)
        {
            base.onpropertychanged(e);
            if (e.property == valueproperty)
            {
                double bl = value / maxvalue;
                waveprogressheight = 140 * bl;
                displayvalue = (bl * 100).tostring(cultureinfo.invariantculture);
            }
        }
    }

}

 

美中不足的是：

1、大小是我写死了的，因为里面那个水波是用path 写的 是个固定的

2、仔细看 中间有条白色的线（等有时间在解决吧）

 

学习到的知识：

1、学会用贝塞尔曲线，和它的动画

2、学会了clip剪裁

3、看大佬的文章果然受益匪浅