Windows Phone 7 自定義彈出視窗

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

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

　　先看一下demo的結構。

　　

　　Generic.xaml

<ResourceDictionary

    xmlns:local="clr-namespace:MessageControl;assembly=MessageControl"

    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

                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"

    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>

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中定義為全局彈窗

    public partial class App : Application

        ……

        public MyMessage myMessage = new MyMessage { MessageContent = new WindowsPhoneControl1() };

MainPage.xaml.cs

　　單擊事件

using MessageControl;

    public partial class MainPage : PhoneApplicationPage

        public MainPage()

        private void button1_Click(object sender, RoutedEventArgs e)

            (App.Current as App).myMessage.Show();

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

本文轉自 wws5201985 51CTO部落格，原文連結：http://blog.51cto.com/wws5201985/820117，如需轉載請自行聯系原作者