<wp7>另类弹窗,coding4Fun插件提供的弹窗

原创 2012年03月22日 20:27:59

从我的网易博客移过来的。。


先提供效果图吧。

 

 

 这个是coding4Fun提供的MessagePrompt弹窗。还提供了ToastPrompt:土司弹出框,类似于土司推送通知。

AboutPrompt:说明弹出框,特点是弹出框会在屏幕中间,其他的弹出框是在屏幕的上方(其他可以通过Margin调整文位置)。

PasswordInputPrompt:密码输入弹出框。

InputPrompt:输入弹出框,用于弹出输入框输入其他的信息。

这些都不讨论了。需要的可以到官网文档:http://coding4fun.codeplex.com/wikipage?title=MessagePrompt&referringTitle=Documentation

或者到:http://coding4fun.codeplex.com/wikipage?title=MessagePrompt&referringTitle=Documentation了解。

今天讨论用MessagePrompt自定义自己的弹窗。弹窗可以带输入框等内容。

先新建一个window phone User Control。命名为BodyUserControl。这个主要是设计弹窗的内容。

添加代码:

 

       

 <Border BorderBrush="YellowGreen" BorderThickness="2">
            <StackPanel x:Name="LayoutRoot1" Background="{StaticResource PhoneChromeBrush}"  Margin="0,0,0,10">
                <TextBlock Text="Body declared in UserControl XAML" HorizontalAlignment="Center"/>
                <Image Source="/RoundBtnDemo;component/images/MB_0010_radio.png" Height="80" Width="80" HorizontalAlignment="Center"/>
                <TextBox x:Name="msg" />
                <Border Background="YellowGreen" Height="100" Width="400">
                    <TextBlock x:Name="tx" Text="This is the first text in the Body section. Another Body content here" TextWrapping="Wrap" VerticalAlignment="Center"/>
                </Border>
            </StackPanel>
        </Border>



效果图为:


在主界面里面的需要弹窗的onclick事件或者其他里面添加代码:

 MessagePrompt msgPrompt = new MessagePrompt();
            msgPrompt.Title = "UserControl test";
            msgPrompt.Body = new BodyUserControl();
            msgPrompt.IsAppBarVisible = false;
            msgPrompt.Completed += new EventHandler<PopUpEventArgs<string, PopUpResult>>(msgPrompt_Completed);
            msgPrompt.Show();



 最重要的来了:怎么获取弹窗上的TextBox 的内容呢?

其实是在那个Completed事件可以获取:

 

 void msgPrompt_Completed(object sender, PopUpEventArgs<string, PopUpResult> e)
        {
            if (e.PopUpResult == PopUpResult.Ok)//先判断是否是点击那个勾,也就是确定
            {
                var msgPrompt = sender as MessagePrompt;//把sender转为MessagePrompt对象
                var bodyControl = msgPrompt.Body as BodyUserControl;//取出BodyUserControl对象
  //取出BodyUserControl中Name为msg,也就是那个TextBox。
  //这里的Showmsg是一个TextBlock,这样,就能取到弹窗上的控件的值
                ShowMsg.Text = bodyControl.msg.Text;
            }
            
        }



推荐两款好的js弹窗插件

两款不错的js插件:layer jBox
  • u013212233
  • u013212233
  • 2015年01月14日 15:34
  • 3656

js弹窗插件

html 添加项目× 项目名称 ...
  • sheng_li
  • sheng_li
  • 2017年11月21日 15:33
  • 137

JS弹窗插件(强烈推荐)

强烈建议使用4.1.4版,其它版本不建议使用!!!(虽然插件的作者推荐4.1.5,但在IE6下对该插件的CLOSE方法有BUG,5.0更不要用了,有些方法和功能都去掉了) artDialog是一个精...
  • luoyeyu1989
  • luoyeyu1989
  • 2012年04月18日 19:59
  • 6594

推荐firefox组件:广告弹窗阻止插件

推荐一个插件,可以阻止广告弹窗:https://addons.mozilla.org/en-us/firefox/addon/adblock-plus/ 烦人的广告,把访客当成了弱智一样。虽...
  • default7
  • default7
  • 2013年01月17日 14:47
  • 7869

jQuery弹窗插件

对自定义插件感兴趣的童鞋可以看看!
  • qq_34095828
  • qq_34095828
  • 2017年05月05日 08:32
  • 273

轻量级jQuery拖拽插件和弹窗插件

[5/13更新]1,增加对bootstrap的支持,(仅仅是用了bootstrap的样式,行为还是由本插件接管) 2,添加了bootstrap的示例页面 现在这种东西网上一抓一大把,而且也都...
  • dyllove98
  • dyllove98
  • 2013年05月26日 16:47
  • 4127

弹出窗的插件,非常好用,简单明了。

http://sentsin.com/jquery/layer/ ,官网下载,看一下使用教程就会了,效果如下:
  • logic_lai
  • logic_lai
  • 2017年11月07日 10:02
  • 139

jQuery一款轻量级可自定义的弹窗插件

插件名称: ColorBox 官网地址: http://www.jacklmoore.com/colorbox 演示地址(ColorBox Demonstration)...
  • xxd851116
  • xxd851116
  • 2012年04月08日 12:46
  • 2502

万能弹窗代码,能突破大部分弹窗拦截插件

废话不多说,亲测可用,js代码如下: var authcode = ''; var paypopupURL = 'http://www.xxxx.com/' + authcode;...
  • lizhengnanhua
  • lizhengnanhua
  • 2016年07月10日 00:55
  • 1557

jQuery 移动端HTML5 弹出窗插件 box.js

本文主要描述一个移动端的弹窗组件,支持多种模式切换,基于jQuery,函数本身封装在jQuery全局变量中,方便使用。 本组件不许单独引用css文件,支持外部修改默认的图标集,提供多种弹出方式,另外支...
  • X19900618
  • X19900618
  • 2017年05月10日 11:24
  • 1333
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:<wp7>另类弹窗,coding4Fun插件提供的弹窗
举报原因:
原因补充:

(最多只允许输入30个字)