Windows Phone 7 自定義彈出窗口

    Windows Phone內置的MessageBox彈出窗口局限性太大，不能滿足各種個性化的彈出窗口的需求，即使使用第三方的控件庫也會有一些局限性，又或者封裝的東西太多了，那么這時候就需要自己去根據自己的需求去自定義一個彈出窗口了。

     大概的原理就是使用Popup控件來實現彈出窗的效果，Popup控件可以把包含在其中的控件顯示在最外面，從而可以把當前頁面的控件都給蓋住了，再加點半透明的效果，若隱若現的，一個彈窗就出來了。好吧，下面來看一下Demo。

     先看一下demo的結構。

Generic.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:MessageControl;assembly=MessageControl"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"   
    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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    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();
        }
    }
}

 

好了，來看一下運行的效果吧。

 

歡迎購買我的書籍《深入淺出Windows Phone 7應用開發》 感謝大家的支持！！

http://product.dangdang.com/product.aspx?product_id=22624989