Windows Phone 7 自定义弹出窗口

windows phone内置的messagebox弹出窗口局限性太大，不能满足各种个性化的弹出窗口的需求，即使使用第三方的控件库也会有一些局限性，又或者封装的东西太多了，那么这时候就需要自己去根据自己的需求去自定义一个弹出窗口了。

     大概的原理就是使用popup控件来实现弹出窗的效果，popup控件可以把包含在其中的控件显示在最外面，从而可以把当前页面的控件都给盖住了，再加点半透明的效果，若隐若现的，一个弹窗就出来了。好吧，下面来看一下demo。

     先看一下demo的结构。

  


 

generic.xaml
<resourcedictionary
    xmlns=""
    xmlns:x=""
    xmlns:local="clr-namespace:messagecontrol;assembly=messagecontrol"
    xmlns:d=""
    xmlns:mc=""  
    mc:ignorable="d"
    >
    <style targettype="local:mymessage">
        <setter property="fontfamily" value="{staticresource phonefontfamilynormal}"/>
        <setter property="fontsize" value="{staticresource phonefontsizenormal}"/>
        <setter property="foreground" value="{staticresource phoneforegroundbrush}"/>
        <setter property="background" value="snow"/>
        <setter property="width" value="480" />
        <setter property="height" value="800" />
        <!--定义模板的template-->
        <setter property="template">
            <setter.value>
                <controltemplate targettype="local:mymessage">
                    <grid verticalalignment="stretch">
                        <rectangle x:name="backgroundrect" grid.row="0" fill="black" opacity="0.7"/>
                        <border
                            verticalalignment="top"
                            borderthickness="3"
                            borderbrush="black">
                            <stackpanel margin="0">
                                <contentpresenter x:name="body"/>
                            </stackpanel>
                        </border>
                    </grid>
                </controltemplate>
            </setter.value>
        </setter>
    </style>
</resourcedictionary>

 
using system.windows;
using system.windows.controls;
using system.windows.shapes;
using system.windows.controls.primitives;
using microsoft.phone.controls;

namespace messagecontrol
{
    public class mymessage : contentcontrol
    {
        private system.windows.controls.contentpresenter body;
        private system.windows.shapes.rectangle backgroundrect;
        private object content;

        public mymessage()
        {
            //这将类的stylekey设置为mymessage,这样在模板中的style才能通过targettype="local:mymessage"与之相互绑定
            this.defaultstylekey = typeof(mymessage);
        }
        //重写onapplytemplate()方法获取模板样式的子控件
        public override void onapplytemplate()
        {
            base.onapplytemplate();
            this.body = this.gettemplatechild("body") as contentpresenter;
            this.backgroundrect = this.gettemplatechild("backgroundrect") as rectangle;
            initializemessageprompt();
        }
        //使用popup控件来制作弹窗
        internal popup childwindowpopup
        {
            get;
            private set;
        }
        //获取当前应用程序的ui框架phoneapplicationframe
        private static phoneapplicationframe rootvisual
        {
            get
            {
                return application.current == null ? null : application.current.rootvisual as phoneapplicationframe;
            }
        }
        //弹窗的内容，定义为object，可以赋值为各种各样的控件
        public object messagecontent
        {
            get
            {
                return this.content;
            }
            set
            {
                this.content = value;
            }
        }
        //隐藏弹窗
        public void hide()
        {
            if (this.body != null)
            {
                //关闭popup控件
                this.childwindowpopup.isopen = false;
            }
        }
        //判断弹窗是否打开
        public bool isopen
        {
            get
            {
                return childwindowpopup != null && childwindowpopup.isopen;
            }
        }
        //打开弹窗
        public void show()
        {
            if (this.childwindowpopup == null)
            {
                this.childwindowpopup = new popup();
                this.childwindowpopup.child = this;
            }

            if (this.childwindowpopup != null && application.current.rootvisual != null)
            {
                initializemessageprompt();
                this.childwindowpopup.isopen = true;
            }
        }
        //初始化弹窗
        private void initializemessageprompt()
        {
            if (this.body == null)
                return;
            this.backgroundrect.visibility = system.windows.visibility.visible;
            //把模板中得body控件内容赋值为你传过来的控件
            this.body.content = messagecontent;
            this.height = 800;
        }
    }
}

 
 
简单地创建有一个控件作为弹窗的内容，测试一下弹窗的效果，当然弹窗的控件你可以定义为你想要的各种内容。
windowsphonecontrol1.xaml
<usercontrol x:class="testmessagecontrol.windowsphonecontrol1"
    xmlns=""
    xmlns:x=""
    xmlns:d=""
    xmlns:mc=""
    mc:ignorable="d"
    fontfamily="{staticresource phonefontfamilynormal}"
    fontsize="{staticresource phonefontsizenormal}"
    foreground="{staticresource phoneforegroundbrush}"
    d:designheight="250" d:designwidth="480">
   
    <grid x:name="layoutroot" background="lightblue">
        <button content="是" height="72" horizontalalignment="left" margin="40,169,0,0" name="button1" verticalalignment="top" width="160" />
        <button content="关闭" height="72" horizontalalignment="left" margin="254,169,0,0" name="button2" verticalalignment="top" width="160" click="button2_click" />
        <textblock height="53" horizontalalignment="left" margin="54,72,0,0" name="textblock1" text="《深入浅出windows phone 7应用开发》" verticalalignment="top" width="369" />
    </grid>
</usercontrol>

using system.windows;
using system.windows.controls;

namespace testmessagecontrol
{
    public partial class windowsphonecontrol1 : usercontrol
    {
        public windowsphonecontrol1()
        {
            initializecomponent();
        }

        private void button2_click(object sender, routedeventargs e)
        {
            (app.current as app).mymessage.hide();
        }
    }
}

 
在app.xaml.cs中定义为全局弹窗
namespace testmessagecontrol
{
    public partial class app : application
    {
        ……

        public mymessage mymessage = new mymessage { messagecontent = new windowsphonecontrol1() };
        ……
    }
}

 
mainpage.xaml.cs
单击事件
using microsoft.phone.controls;
using messagecontrol;

namespace testmessagecontrol
{
    public partial class mainpage : phoneapplicationpage
    {

        public mainpage()
        {
            initializecomponent();
        }

        private void button1_click(object sender, routedeventargs e)
        {
            (app.current as app).mymessage.show();
        }
    }
}

 
好了，来看一下运行的效果吧。

  

 


摘自  加菲猫