程式師世界 >> 編程語言 >> .NET網頁編程 >> 關於.NET >> Windows 8 Store Apps學習(3) 內容控件

Windows 8 Store Apps學習(3) 內容控件

編輯：關於.NET

ToolTip, Frame, AppBar, ContentControl

介紹

重新想象 Windows 8 Store Apps 之內容控件

ToolTip - 提示框控件

Frame - 框架控件，用於導航內容

AppBar - 應用程序欄控件

ContentControl ContentPresenter - ContentPresenter 用來呈現 ContentControl 的 Content

重新想象 Windows 8 Store Apps 之容器控件

Border - 邊框控件

Viewbox - 控制子元素如何拉伸的容器控件

Popup - 彈出框控件

示例

1、ToolTip 的 Demo

ToolTipDemo.xaml

<Page   
    x:Class="XamlDemo.Controls.ToolTipDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">   
       
    <Grid Background="Transparent">   
        <StackPanel Name="root" Margin="120 0 0 0">   
                   
            <TextBlock Text="TextBlock" ToolTipService.ToolTip="ToolTipService.ToolTip" ToolTipService.Placement="Bottom" FontSize="14.667" />   
       
            <!--   
                ToolTip - 提示框控件   
                    Content - 提示內容   
                    Placement - 提示框的顯示位置（Bottom, Right, Mouse, Left, Top）   
                    IsOpen - 提示框是否可見   
                    Closed - 提示框關閉後所觸發的事件   
                    Opened - 提示框打開後所觸發的事件   
            -->   
            <TextBlock Text="TextBlock" FontSize="14.667" Margin="0 100 0 0">   
                <ToolTipService.ToolTip>   
                   <ToolTip Name="toolTip" Content="ToolTipService.ToolTip" Placement="Bottom" />   
                </ToolTipService.ToolTip>   
            </TextBlock>   
                 
        </StackPanel>   
    </Grid>   
</Page>

2、Frame 的 Demo

Frame/Demo.xaml

<Page   
    x:Class="XamlDemo.Controls.Frame.Demo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Controls.Frame"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">   
       
    <Grid Background="Transparent">   
        <StackPanel Margin="120 0 0 0" Orientation="Horizontal">   
       
            <StackPanel Width="400">   
                <Button Name="btnGotoFrame1" Content="導航至 Frame1" Click="btnGotoFrame1_Click_1" />   
       
                <Button Name="btnGotoFrame2" Content="導航至 Frame2" Click="btnGotoFrame2_Click_1" Margin="0 10 0 0" />   
       
                <Button Name="btnBack" Content="後退" Click="btnBack_Click_1" Margin="0 10 0 0" />   
       
                <Button Name="btnForward" Content="前進" Click="btnForward_Click_1" Margin="0 10 0 0" />   
       
                <TextBlock Name="lblMsg" FontSize="14.667" TextWrapping="Wrap" Margin="0 10 0 0" />   
            </StackPanel>   
       
            <Frame Name="frame" VerticalAlignment="Top" Margin="10 0 0 0"  />   
                   
        </StackPanel>   
    </Grid>   
</Page>

Frame/Demo.xaml.cs

/*   
 * Frame - 框架控件，用於導航內容   
 *     BackStackDepth - 返回堆棧內的條目數   
 *     CanGoBack - 可否向後導航   
 *     CanGoForward - 可否向前導航   
 *     GoBack() - 向後導航   
 *     GoForward() - 向前導航   
 *     Navigate() - 導航到指定的 Type，可以傳遞一個 object 類型的參數   
 *     SourcePageType - 獲取或設置 Frame 當前內容的 Type   
 *    
 *     CacheSize - 所支持的最大緩存頁數，默認值 10   
 *         CacheSize 與被導航的頁的 Page.NavigationCacheMode 屬性相關（詳見 Frame1.xaml.cs 和 

Frame2.xaml.cs 的示例代碼）   
 *             NavigationCacheMode.Disabled - 每次導航到頁時，都重新實例化此頁，默認值

（CacheSize 無效）   
 *             NavigationCacheMode.Enabled - 每次導航到頁時，首先緩存此頁，此時如果已緩存的頁數

大於 CacheSize，則按先進先出的原則丟棄最早的緩存頁（CacheSize 有效）   
 *             NavigationCacheMode.Required - 每次導航到頁時，都緩存此頁（CacheSize 無效）   
 *    
 *     Navigating - 導航開始時觸發的事件   
 *     Navigated - 導航完成後觸發的事件   
 *     NavigationFailed - 導航失敗時觸發的事件   
 *     NavigationStopped - 導航過程中，又請求了一個新的導航時觸發的事件   
 *        
 *     GetNavigationState() - 獲取 Frame 當前的導航狀態，返回字符串類型的數據，僅當導航無參數傳

遞或只傳遞簡單參數（int, char, string, guid, bool 等）時有效   
 *     SetNavigationState(string navigationState) - 將 Frame 還原到指定的導航狀態   
 *        
 *    
 *    
 * NavigationEventArgs - 導航的事件參數   
 *     NavigationMode - 導航方式，只讀（Windows.UI.Xaml.Navigation.NavigationMode 枚舉）   
 *         New, Back, Forward, Refresh   
 *     Parameter - 傳遞給導航目標頁的參數，只讀   
 *     SourcePageType - 導航的目標頁的類型，只讀   
 */
       
using System;   
using Windows.UI.Xaml;   
using Windows.UI.Xaml.Controls;   
using Windows.UI.Xaml.Navigation;   
       
namespace XamlDemo.Controls.Frame   
{   
    public sealed partial class Demo : Page   
    {   
        public Demo()   
        {   
            this.InitializeComponent();   
        }   
       
        protected override void OnNavigatedTo(NavigationEventArgs e)   
        {   
            frame.Navigated += frame_Navigated;   
        }   
       
        void frame_Navigated(object sender, NavigationEventArgs e)   
        {   
            lblMsg.Text = "CacheSize: " + frame.CacheSize;   
            lblMsg.Text += Environment.NewLine;   
            lblMsg.Text += "BackStackDepth: " + frame.BackStackDepth;   
            lblMsg.Text += Environment.NewLine;   
            lblMsg.Text += "CanGoBack: " + frame.CanGoBack;   
            lblMsg.Text += Environment.NewLine;   
            lblMsg.Text += "CanGoForward: " + frame.CanGoForward;   
            lblMsg.Text += Environment.NewLine;   
            lblMsg.Text += "CurrentSourcePageType: " + frame.CurrentSourcePageType;   
            lblMsg.Text += Environment.NewLine;   
       
            // 顯示 frame 的當前的導航狀態，記錄此值後，可以在需要的時候通過 SetNavigationState() 將 frame 還原到指定的導航狀態   
            lblMsg.Text += "NavigationState: " + frame.GetNavigationState();    
        }   
       
        private void btnGotoFrame1_Click_1(object sender, RoutedEventArgs e)   
        {   
            frame.Navigate(typeof(Frame1), "param1");   
        }   
       
        private void btnGotoFrame2_Click_1(object sender, RoutedEventArgs e)   
        {   
            frame.SourcePageType = typeof(Frame2);   
        }   
       
        private void btnBack_Click_1(object sender, RoutedEventArgs e)   
        {   
            if (frame.CanGoBack)   
                frame.GoBack();   
        }   
       
        private void btnForward_Click_1(object sender, RoutedEventArgs e)   
        {   
            if (frame.CanGoForward)   
                frame.GoForward();   
        }   
    }   
}

Frame/Frame1.xaml.cs

using System;   
using Windows.UI.Xaml.Controls;   
using Windows.UI.Xaml.Navigation;   
       
namespace XamlDemo.Controls.Frame   
{   
    public sealed partial class Frame1 : Page   
    {   
        public Frame1()   
        {   
            this.InitializeComponent();   
       
            /*   
             * Page.NavigationCacheMode - 使用 Frame 導航到此頁面時，頁面的緩存模式   
             *     Disabled - 每次導航到頁時，都重新實例化此頁，默認值（Frame.CacheSize 無效）   
             *     Enabled - 每次導航到頁時，首先緩存此頁，此時如果已緩存的頁數大於 Frame.CacheSize，則按先進先出的原則丟棄最早的緩存頁（Frame.CacheSize 有效）   
             *     Required - 每次導航到頁時，都緩存此頁（Frame.CacheSize 無效）   
             */
            this.NavigationCacheMode = Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled;   
       
            this.Loaded += Frame1_Loaded;   
        }   
       
        void Frame1_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)   
        {   
            lblMsg.Text += Environment.NewLine;   
            lblMsg.Text += "Loaded: " + DateTime.Now.ToString();   
        }   
       
        protected override void OnNavigatedTo(NavigationEventArgs e)   
        {   
            lblMsg.Text += Environment.NewLine;   
            lblMsg.Text += "OnNavigatedTo: " + DateTime.Now.ToString();   
        }   
    }   
}

Frame/Frame2.xaml.cs

using System;   
using Windows.UI.Xaml.Controls;   
using Windows.UI.Xaml.Navigation;   
       
namespace XamlDemo.Controls.Frame   
{   
    public sealed partial class Frame2 : Page   
    {   
        public Frame2()   
        {   
            this.InitializeComponent();   
       
            /*   
             * Page.NavigationCacheMode - 使用 Frame 導航到此頁面時，頁面的緩存模式   
             *     Disabled - 每次導航到頁時，都重新實例化此頁，默認值（Frame.CacheSize 無效）   
             *     Enabled - 每次導航到頁時，首先緩存此頁，此時如果已緩存的頁數大於 

Frame.CacheSize，則按先進先出的原則丟棄最早的緩存頁（Frame.CacheSize 有效）   
             *     Required - 每次導航到頁時，都緩存此頁（Frame.CacheSize 無效）   
             */
            this.NavigationCacheMode = Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled;   
       
            this.Loaded += Frame2_Loaded;   
        }   
       
        void Frame2_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)   
        {   
            lblMsg.Text += Environment.NewLine;   
            lblMsg.Text += "Loaded: " + DateTime.Now.ToString();   
        }   
       
        protected override void OnNavigatedTo(NavigationEventArgs e)   
        {   
            lblMsg.Text += Environment.NewLine;   
            lblMsg.Text += "OnNavigatedTo: " + DateTime.Now.ToString();   
        }   
    }   
}

3、AppBar 的 Demo

AppBarDemo.xaml

<Page   
    x:Class="XamlDemo.Controls.AppBarDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">   
       
    <Grid Background="Transparent">   
        <StackPanel Margin="120 0 0 0">   
       
            <CheckBox Name="chkIsSticky" Content="IsSticky" IsChecked="False" Checked="chkIsSticky_Checked_1" Unchecked="chkIsSticky_Unchecked_1" />   
                   
            <Button Name="btnOpen" Content="打開 AppBar" Click="btnOpen_Click_1" Margin="0 10 0 0" />   
                   
            <Button Name="btnClose" Content="關閉 AppBar" Click="btnClose_Click_1" Margin="0 10 0 0" />   
                   
        </StackPanel>   
    </Grid>   
       
    <!--   
        AppBar - 應用程序欄控件   
           
        Page.BottomAppBar - 定義頂部的 AppBar   
        Page.TopAppBar - 定義底部的 AppBar   
           
        AppBar 內的按鈕的樣式定義參考 Common/AppBarButtonStyle.xaml   
    -->   
    <Page.BottomAppBar>   
        <AppBar x:Name="appBar" Padding="10,0">   
            <Grid>   
                <Grid.ColumnDefinitions>   
                    <ColumnDefinition Width="50*"/>   
                    <ColumnDefinition Width="50*"/>   
                </Grid.ColumnDefinitions>   
                <StackPanel x:Name="LeftPanel" Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left">   
                    <Button x:Name="Edit" Style="{StaticResource AppBarButtonStyle}" Content="&#xE104;" AutomationProperties.Name="編輯" />   
                    <Button x:Name="Save" Style="{StaticResource SaveAppBarButtonStyle}" AutomationProperties.Name="保存" />   
                    <Button x:Name="Delete" Style="{StaticResource DeleteAppBarButtonStyle}" AutomationProperties.Name="刪除" />   
                </StackPanel>   
                <StackPanel x:Name="RightPanel" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">   
                    <Button x:Name="Refresh" Style="{StaticResource RefreshAppBarButtonStyle}" AutomationProperties.Name="刷新" />   
                    <Button x:Name="Help" Style="{StaticResource HelpAppBarButtonStyle}" AutomationProperties.Name="幫助" />   
                </StackPanel>   
            </Grid>   
        </AppBar>   
    </Page.BottomAppBar>   
           
    <!--   
        全局 AppBar 的實現方法：   
        在父頁面中定義 AppBar，然後父頁面通過 Frame 展示具體頁，從而實現全局 AppBar 的功能，如果子頁面也有 AppBar 則其會替代父頁面的 AppBar   
    -->   
</Page>

AppBarDemo.xaml.cs

/*   
 * AppBar - 應用程序欄控件   
 *     IsOpen - 是否打開 AppBar   
 *     IsSticky - 是否 Sticky   
 *         false - 顯示 AppBar 後，如果用戶觸摸了非 AppBar 區域則 AppBar 會自動隱藏，默認值   
 *         true - 顯示 AppBar 後，即使用戶觸摸了非 AppBar 區域，AppBar 也不會自動隱藏，需要通過

底部邊緣手勢或者右鍵或者win+z或者api使其隱藏   
 *     Opened - AppBar 打開後所觸發的事件   
 *     Closed - AppBar 關閉後所觸發的事件   
 */
       
using Windows.UI.Xaml;   
using Windows.UI.Xaml.Controls;   
using Windows.UI.Xaml.Navigation;   
       
namespace XamlDemo.Controls   
{   
    public sealed partial class AppBarDemo : Page   
    {   
        public AppBarDemo()   
        {   
            this.InitializeComponent();   
        }   
       
        private void chkIsSticky_Checked_1(object sender, RoutedEventArgs e)   
        {   
            appBar.IsSticky = true;   
        }   
       
        private void chkIsSticky_Unchecked_1(object sender, RoutedEventArgs e)   
        {   
            appBar.IsSticky = false;   
        }   
       
        private void btnOpen_Click_1(object sender, RoutedEventArgs e)   
        {   
            appBar.IsOpen = true;   
        }   
       
        private void btnClose_Click_1(object sender, RoutedEventArgs e)   
        {   
            appBar.IsOpen = false;   
        }   
    }   
}

4、ContentControl, ContentPresenter 的 Demo

ContentPresenterDemo.xaml

<Page   
    x:Class="XamlDemo.Controls.ContentPresenterDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">   
       
    <Grid Background="Transparent">   
        <StackPanel Margin="120 0 0 0">   
       
            <!--   
                演示 ContentControl 和 ContentPresenter 的應用（ContentPresenter 用來呈現 ContentControl 的 Content）   
            -->   
            <ContentControl Width="200" Margin="5" Content="我是 ContentControl" HorizontalAlignment="Left">   
                <ContentControl.Template>   
                    <ControlTemplate>   
                        <Border BorderBrush="Red" BorderThickness="1">   
                            <Grid Background="Yellow">   
                                <!--   
                                    通過 ContentPresenter 來呈現 ContentControl 的 Content   
                                -->   
                                <ContentPresenter HorizontalAlignment="Right" Foreground="Black" FontSize="14.667" />   
                            </Grid>   
                        </Border>   
                    </ControlTemplate>   
                </ContentControl.Template>   
            </ContentControl>   
       
        </StackPanel>   
    </Grid>   
</Page>

5、Border 的 Demo

BorderDemo.xaml

<Page   
    x:Class="XamlDemo.Controls.BorderDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">   
       
    <Grid Background="Transparent">   
        <StackPanel Margin="120 0 0 0">   
  
       
            <!--   
                Border - 邊框控件   
                    Child - 邊框裡的內容   
                    BorderThickness - 邊框的寬度（像素值：上下左右；左右,上下；左,上,右,下）   
                    BorderBrush - 邊框的畫筆   
                    Background - 邊框裡內容的背景畫筆   
                    CornerRadius - 邊框角的半徑   
                    ChildTransitions - 邊框裡的內容的主題過渡，以後再詳說   
            -->   
            <Border BorderThickness="1,10,20,30" BorderBrush="Red" Background="Blue" CornerRadius="10" Width="400" Height="100">   
                <Border.Child>   
                    <TextBlock Text="我是 Border 裡的內容" TextAlignment="Center" />   
                </Border.Child>   
            </Border>   
                   
            <Border BorderThickness="20" Width="400" Height="100" Margin="0 10 0 0">   
                <Border.BorderBrush>   
                    <ImageBrush ImageSource="/Assets/Logo.png" />   
                </Border.BorderBrush>   
                <TextBlock Text="我是 Border 裡的內容" />   
                <!--進入頁面的時候，此 Border 裡的內容會有 EntranceThemeTransition 的主題過渡效果-->   
                <Border.ChildTransitions>   
                    <TransitionCollection>   
                        <EntranceThemeTransition />   
                    </TransitionCollection>   
                </Border.ChildTransitions>   
            </Border>   
       
        </StackPanel>   
    </Grid>   
</Page>

6、Viewbox 的 Demo

ViewboxDemo.xaml

<Page   
    x:Class="XamlDemo.Controls.ViewboxDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">   
       
    <Grid Background="Transparent">   
        <StackPanel Margin="120 0 0 0">   
                   
            <!--   
                Viewbox - 控制子元素如何拉伸的容器控件   
                    Stretch - 拉伸方式（Windows.UI.Xaml.Media.Stretch 枚舉）   
                        Fill - 充滿容器，不保留長寬比   
                        None - 不做任何處理，如果內容比容器大，則多出的部分被剪裁   
                        Uniform - 等比縮放到容器（默認值）   
                        UniformToFill - 充滿容器，且保留長寬比，多出的部分被剪裁   
                   
                    StretchDirection - 如何決定是否放大或縮小   
                        UpOnly - 需要的時候執行放大操作，永遠不會執行縮小操作   
                        DownOnly - 需要的時候執行縮小操作，永遠不會執行放大操作   
                        Both - 需要的時候即可執行放大操作，又可執行縮小操作（默認值）   
            -->   
                   
            <Border BorderBrush="Red" BorderThickness="1" Width="100" Height="100">   
                <Viewbox Width="100" Height="100" Stretch="Fill">   
                    <StackPanel>   
                        <TextBlock Text="webabcd" />   
                    </StackPanel>   
                </Viewbox>   
            </Border>   
       
            <Border BorderBrush="Red" BorderThickness="1" Width="100" Height="100" Margin="0 20 0 0">   
                <Viewbox Width="100" Height="100" Stretch="None" >   
                    <StackPanel>   
                        <TextBlock Text="webabcd" />   
                    </StackPanel>   
                </Viewbox>   
            </Border>   
       
            <Border BorderBrush="Red" BorderThickness="1" Width="100" Height="100" Margin="0 20 0 0">   
                <Viewbox Width="100" Height="100" Stretch="Uniform" >   
                    <StackPanel>   
                        <TextBlock Text="webabcd" />   
                    </StackPanel>   
                </Viewbox>   
            </Border>   
                   
            <Border BorderBrush="Red" BorderThickness="1" Width="100" Height="100" Margin="0 20 0 0">   
                <Viewbox Width="100" Height="100" Stretch="UniformToFill" >   
                    <StackPanel>   
                        <TextBlock Text="webabcd" />   
                    </StackPanel>   
                </Viewbox>   
            </Border>   
                   
        </StackPanel>   
    </Grid>   
</Page>

7、Popup 的 Demo

PopupDemo.xaml

<Page   
    x:Class="XamlDemo.Controls.PopupDemo"
    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">   
       
    <Grid Background="Transparent">   
               
        <StackPanel Margin="120 0 0 0">   
                   
            <StackPanel Orientation="Horizontal">   
                <Button Name="btnOpenPopup" Content="彈出 Popup" Click="btnOpenPopup_Click_1" />   
                <CheckBox Name="chkIsLightDismissEnabled" IsChecked="False" Content="IsLightDismissEnabled" Margin="10 0 0 0" />   
            </StackPanel>   
                   
            <!--   
                Popup - 彈出框   
                    Child - 彈出框的內容   
                    ChildTransitions - 顯示彈出框時，其內容的過渡效果   
                    IsLightDismissEnabled - 點擊非 Popup 區域時否關閉 Popup   
                    HorizontalOffset - 水平方向上的偏移量   
                    VerticalOffset - 垂直方向上的偏移量   
            -->   
            <Popup Name="popup" HorizontalOffset="200" VerticalOffset="10" IsLightDismissEnabled="{Binding IsChecked, ElementName=chkIsLightDismissEnabled}">   
                <Popup.Child>   
                    <Border BorderBrush="Red" BorderThickness="1" Background="Blue" Width="200" Height="200">   
                        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">   
                            <TextBlock Text="我是 Popup" FontSize="24.667" HorizontalAlignment="Center" />   
                            <Button Name="btnClosePopup" Content="關閉" HorizontalAlignment="Center" Click="btnClosePopup_Click_1" />   
                        </StackPanel>   
                    </Border>   
                </Popup.Child>   
                <!--為彈出框增加 PopupThemeTransition 效果-->   
                <Popup.ChildTransitions>   
                    <TransitionCollection>   
                        <PopupThemeTransition />   
                    </TransitionCollection>   
                </Popup.ChildTransitions>   
            </Popup>   
       
            <Button Name="btnOpenPopupToast" Content="彈出仿 toast 的 Popup" Click="btnOpenPopupToast_Click_1" Margin="0 10 0 0" />   
       
        </StackPanel>           
    </Grid>   
</Page>

PopupDemo.xaml.cs

/*   
 * Popup - 彈出框   
 *     IsOpen - 彈出框是否是打開的狀態   
 *     Opened - 彈出框打開時所觸發的事件   
 *     Closed - 彈出框關閉時所觸發的事件   
 */
       
using Windows.UI;   
using Windows.UI.Xaml;   
using Windows.UI.Xaml.Controls;   
using Windows.UI.Xaml.Controls.Primitives;   
using Windows.UI.Xaml.Media;   
using Windows.UI.Xaml.Media.Animation;   
using Windows.UI.Xaml.Navigation;   
       
namespace XamlDemo.Controls   
{   
    public sealed partial class PopupDemo : Page   
    {   
        // 仿 toast 的 Popup   
        private Popup _popupToast = new Popup();   
       
        public PopupDemo()   
        {   
            this.InitializeComponent();   
        }   
       
        private void btnOpenPopup_Click_1(object sender, RoutedEventArgs e)   
        {   
            if (!popup.IsOpen)   
                popup.IsOpen = true;   
        }   
       
        private void btnClosePopup_Click_1(object sender, RoutedEventArgs e)   
        {   
            if (popup.IsOpen)   
                popup.IsOpen = false;   
        }   
       
        private void btnOpenPopupToast_Click_1(object sender, RoutedEventArgs e)   
        {   
            if (!_popupToast.IsOpen)   
            {   
                // 設置 Popup 中的內容   
                Border border = new Border();   
                border.BorderBrush = new SolidColorBrush(Colors.Red);   
                border.BorderThickness = new Thickness(1);   
                border.Background = new SolidColorBrush(Colors.Blue);   
                border.Width = 600;   
                border.Height = 100;   
                border.Child = new TextBlock() { Text = "我是 Popup", FontSize = 24.667, HorizontalAlignment = HorizontalAlignment.Center, VerticalAlignment = VerticalAlignment.Center 

};   
       
                // 設置 Popup 的相關屬性   
                _popupToast.IsLightDismissEnabled = true;   
                _popupToast.Child = border;   
                // 通過 HorizontalOffset 和 VerticalOffset 來指定 Popup 的顯示位置（如果不將 Popup 添加到某個容器內，則 Popup 的默認顯示位置在屏幕左上角）   
                _popupToast.VerticalOffset = 100d;   
                _popupToast.ChildTransitions = new TransitionCollection() { new 

PaneThemeTransition() { Edge = EdgeTransitionLocation.Left } };   
                _popupToast.IsOpen = true;   
            }   
        }   
       
        private void btnClosePopupToast_Click_1(object sender, RoutedEventArgs e)   
        {   
            if (_popupToast.IsOpen)   
                _popupToast.IsOpen = false;   
        }   
    }   
}

[源碼下載]：http://files.cnblogs.com/webabcd/Windows8.rar