Windows 8 Store Apps學習(21) 動畫: ThemeTransition（過渡效果）

介紹

重新想象 Windows 8 Store Apps 之 動畫

ThemeTransition 的概述

EntranceThemeTransition - 頁面間跳轉時的過渡效果

ContentThemeTransition - 內容改變時的過渡效果

RepositionThemeTransition - 位置改變時的過渡效果

PopupThemeTransition - 彈出時的過渡效果

AddDeleteThemeTransition - 添加項或刪除項時的過渡效果

ReorderThemeTransition - 對集合中的元素重新排序時的過渡效果

PaneThemeTransition - 基於邊緣的較大 UI 滑入和滑出時的過渡效果

EdgeUIThemeTransition - 基於邊緣的較小 UI 滑入和滑出時的過渡效果

示例

1、過渡效果的概述

Animation/ThemeTransition/Summary.xaml

<Page
    x:Class="XamlDemo.Animation.ThemeTransition.Summary"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Animation.ThemeTransition"
    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">
    
            <TextBlock Text="請參見本 xaml 中的注釋" FontSize="14.667" />
    
            <!--
                UIElement.Transitions - 指定 UIElement 的過渡動畫
                
                <Rectangle>
                    <Rectangle.Transitions>
                        <TransitionCollection>
                            <EntranceThemeTransition/>
                        </TransitionCollection>
                    </Rectangle.Transitions>
                </Rectangle>
            -->
    
    
            <!--
                Panel.ChildrenTransitions - 指定 Panel 的子元素們的過渡動畫
                
                <WrapGrid>
                    <WrapGrid.ChildrenTransitions>
                        <TransitionCollection>
                            <EntranceThemeTransition/>
                        </TransitionCollection>
                    </WrapGrid.ChildrenTransitions>
                </WrapGrid>
            -->
    
    
            <!--
                ItemsControl.ItemContainerTransitions - 指定 ItemsControl 的項容器的過渡動畫
                
                <ItemsControl>
                    <ItemsControl.ItemContainerTransitions>
                        <TransitionCollection>
                            <EntranceThemeTransition/>
                        </TransitionCollection>
                    </ItemsControl.ItemContainerTransitions>
                </ItemsControl>
            -->
    
    
            <!--
                ContentControl.ContentTransitions - 指定 ContentControl 的過渡動畫
                
                <ContentControl>
                    <ContentControl.ContentTransitions>
                        <TransitionCollection>
                            <EntranceThemeTransition/>
                        </TransitionCollection>
                    </ContentControl.ContentTransitions>
                </ContentControl>
            -->
                
        </StackPanel>
    </Grid>
</Page>

2、演示 EntranceThemeTransition

Animation/ThemeTransition/Entrance.xaml

<Page
    x:Class="XamlDemo.Animation.ThemeTransition.Entrance"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Animation.ThemeTransition"
    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">
                
            <!--
                EntranceThemeTransition - 頁面間跳轉時的過渡效果
                    FromHorizontalOffset - 初始位置的水平偏移量
                    FromVerticalOffset - 初始位置的垂直偏移量
                    IsStaggeringEnabled - 當包含多個子元素時，是否需要錯開呈現它們
            -->
            <Frame Name="frame" Width="400" Height="100" HorizontalAlignment="Left" VerticalAlignment="Top">
                <Frame.ContentTransitions>
                    <TransitionCollection>
                        <EntranceThemeTransition IsStaggeringEnabled="False" />
                    </TransitionCollection>
                </Frame.ContentTransitions>
            </Frame>
    
            <Button Name="btnGotoFrame1" Content="導航至 Frame1" Click="btnGotoFrame1_Click_1" Margin="0 10 0 0" />
            <Button Name="btnGotoFrame2" Content="導航至 Frame2" Click="btnGotoFrame2_Click_1" Margin="0 10 0 0" />
    
            <ItemsControl x:Name="itemsControl" Margin="0 10 0 0">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapGrid>
                            <WrapGrid.ChildrenTransitions>
                                <TransitionCollection>
                                    <EntranceThemeTransition IsStaggeringEnabled="True" />
                                </TransitionCollection>
                            </WrapGrid.ChildrenTransitions>
                        </WrapGrid>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.Items>
                    <Rectangle Width="100" Height="100" Fill="Red" />
                    <Rectangle Width="100" Height="100" Fill="Green" />
                    <Rectangle Width="100" Height="100" Fill="Blue" />
                </ItemsControl.Items>
                <ItemsControl.Template>
                    <ControlTemplate>
                        <Border BorderBrush="Orange" BorderThickness="1">
                            <ItemsPresenter Margin="10" VerticalAlignment="Center" HorizontalAlignment="Center" />
                        </Border>
                    </ControlTemplate>
                </ItemsControl.Template>
            </ItemsControl>
                
        </StackPanel>
    </Grid>
</Page>

Animation/ThemeTransition/Entrance.xaml.cs

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
    
namespace XamlDemo.Animation.ThemeTransition
{
    public sealed partial class Entrance : Page
    {
        public Entrance()
        {
            this.InitializeComponent();
        }
    
        private void btnGotoFrame1_Click_1(object sender, RoutedEventArgs e)
        {
            frame.Navigate(typeof(XamlDemo.Controls.Frame.Frame1));
        }
    
        private void btnGotoFrame2_Click_1(object sender, RoutedEventArgs e)
        {
            frame.Navigate(typeof(XamlDemo.Controls.Frame.Frame2));
        }
    }
}

3、演示 ContentThemeTransition

Animation/ThemeTransition/Content.xaml

<Page
    x:Class="XamlDemo.Animation.ThemeTransition.Content"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Animation.ThemeTransition"
    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">
    
            <!--
                ContentThemeTransition - 內容改變時的過渡效果
                    FromHorizontalOffset - 初始位置的水平偏移量
                    FromVerticalOffset - 初始位置的垂直偏移量
            -->
            <ContentControl Name="contentControl" PointerPressed="contentControl_PointerPressed_1">
                <ContentControl.ContentTransitions>
                    <TransitionCollection>
                        <ContentThemeTransition />
                    </TransitionCollection>
                </ContentControl.ContentTransitions>
                <ContentControl.Content>
                    <Rectangle Height="200" Width="200" Fill="Orange" />
                </ContentControl.Content>
            </ContentControl>
    
    
            <!--
                如果要在 ScrollViewer 或其他繼承了 ContentControl 的控件中應用 ContentThemeTransition 的話，應該用如下方式
            -->
            <ScrollViewer Name="scrollViewer" Margin="0 10 0 0" PointerPressed="scrollViewer_PointerPressed_1">
                <ContentControl Content="{Binding}">
                    <ContentControl.ContentTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Vertical">
                                <Rectangle Height="200" Width="200" Fill="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content}" />
                            </StackPanel>
                        </DataTemplate>
                    </ContentControl.ContentTemplate>
                    <ContentControl.ContentTransitions>
                        <TransitionCollection>
                            <ContentThemeTransition/>
                        </TransitionCollection>
                    </ContentControl.ContentTransitions>
                </ContentControl>
            </ScrollViewer>
                
        </StackPanel>
    </Grid>
</Page>

Animation/ThemeTransition/Content.xaml.cs

using System;
using Windows.UI;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Shapes;
    
namespace XamlDemo.Animation.ThemeTransition
{
    public sealed partial class Content : Page
    {
        public Content()
        {
            this.InitializeComponent();
        }
    
        // 改變 ContentControl 的內容
        private void contentControl_PointerPressed_1(object sender, PointerRoutedEventArgs e)
        {
            Rectangle rectangle = new Rectangle();
            Random random = new Random();
    
            rectangle.Height = 200;
            rectangle.Width = 200;
            rectangle.Fill = new SolidColorBrush(Color.FromArgb(255, (byte)random.Next(0, 255), 

(byte)random.Next(0, 255), (byte)random.Next(0, 255)));
    
            contentControl.Content = rectangle;
        }
    
        // 綁定最新的數據到 ScrollViewer
        private void scrollViewer_PointerPressed_1(object sender, PointerRoutedEventArgs e)
        {
            Random random = new Random();
            scrollViewer.DataContext = new SolidColorBrush(Color.FromArgb(255, (byte)

random.Next(0, 255), (byte)random.Next(0, 255), (byte)random.Next(0, 255)));
        }
    }
}

4、演示 RepositionThemeTransition

Animation/ThemeTransition/Reposition.xaml

<Page
    x:Class="XamlDemo.Animation.ThemeTransition.Reposition"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Animation.ThemeTransition"
    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">
    
            <Button Name="btnMove" Content="移動 rectangle" Click="btnMove_Click_1" Margin="0 0 0 10" />
    
            <!--
                RepositionThemeTransition - 位置改變時的過渡效果
            -->
            <Rectangle Name="rectangle" Width="400" Height="100" Fill="Orange" HorizontalAlignment="Left">
                <Rectangle.Transitions>
                    <TransitionCollection>
                        <RepositionThemeTransition />
                    </TransitionCollection>
                </Rectangle.Transitions>
            </Rectangle>
    
        </StackPanel>
    </Grid>
</Page>

Animation/ThemeTransition/Reposition.xaml.cs

using 

Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
    
namespace XamlDemo.Animation.ThemeTransition
{
    public sealed partial class Reposition : Page
    {
        public Reposition()
        {
            this.InitializeComponent();
        }
    
        // 改變矩形的位置
        private void btnMove_Click_1(object sender, RoutedEventArgs e)
        {
            if (rectangle.Margin == new Thickness(0))
                rectangle.Margin = new Thickness(100);
            else
                rectangle.Margin = new Thickness(0);
        }
    }
}

5、演示 PopupThemeTransition

Animation/ThemeTransition/Popup.xaml

<Page
    x:Class="XamlDemo.Animation.ThemeTransition.Popup"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Animation.ThemeTransition"
    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">
    
            <!--
                PopupThemeTransition - 彈出時的過渡效果
                    FromHorizontalOffset - 初始位置的水平偏移量
                    FromVerticalOffset - 初始位置的垂直偏移量
            -->
            <Popup Name="popup" HorizontalOffset="200" VerticalOffset="10" IsLightDismissEnabled="True">
                <Popup.Child>
                    <Border BorderBrush="Red" BorderThickness="1" Background="Blue" Width="200" Height="200">
                        <TextBlock Text="我是 Popup" FontSize="24.667" HorizontalAlignment="Center" />
                    </Border>
                </Popup.Child>
                <Popup.ChildTransitions>
                    <TransitionCollection>
                        <PopupThemeTransition />
                    </TransitionCollection>
                </Popup.ChildTransitions>
            </Popup>
    
            <Button Name="btnPopup" Content="彈出 Popup" Click="btnPopup_Click_1" Margin="0 10 0 0" />
    
        </StackPanel>
    </Grid>
</Page>

Animation/ThemeTransition/Popup.xaml.cs

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
    
namespace XamlDemo.Animation.ThemeTransition
{
    public sealed partial class Popup : Page
    {
        public Popup()
        {
            this.InitializeComponent();
        }
    
        // 顯示 Popup
        private void btnPopup_Click_1(object sender, RoutedEventArgs e)
        {
            if (!popup.IsOpen)
                popup.IsOpen = true;
        }
    }
}

6、演示 AddDeleteThemeTransition

Animation/ThemeTransition/AddDelete.xaml

<Page
    x:Class="XamlDemo.Animation.ThemeTransition.AddDelete"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Animation.ThemeTransition"
    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">
    
            <Button x:Name="btnAddItem" Content="Add Item" Click="btnAddItem_Click_1"/>
            <Button x:Name="btnDeleteItem" Content="Delete Item" Click="btnDeleteItem_Click_1" Margin="0 10 0 0" />
    
            <!--
                AddDeleteThemeTransition - 添加項或刪除項時的過渡效果
            -->
            <ItemsControl x:Name="itemsControl" Margin="0 10 0 0">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapGrid>
                            <WrapGrid.ChildrenTransitions>
                                <TransitionCollection>
                                    <AddDeleteThemeTransition />
                                </TransitionCollection>
                            </WrapGrid.ChildrenTransitions>
                        </WrapGrid>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.Items>
                    <Rectangle Width="100" Height="100" Fill="Red" />
                    <Rectangle Width="100" Height="100" Fill="Green" />
                    <Rectangle Width="100" Height="100" Fill="Blue" />
                </ItemsControl.Items>
                <ItemsControl.Template>
                    <ControlTemplate>
                        <Border BorderBrush="Orange" BorderThickness="1">
                            <ItemsPresenter Margin="10" VerticalAlignment="Center" HorizontalAlignment="Center" />
                        </Border>
                    </ControlTemplate>
                </ItemsControl.Template>
            </ItemsControl>
    
        </StackPanel>
    </Grid>
</Page>

Animation/ThemeTransition/AddDelete.xaml.cs

using System;
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Shapes;
    
namespace XamlDemo.Animation.ThemeTransition
{
    public sealed partial class AddDelete : Page
    {
        public AddDelete()
        {
            this.InitializeComponent();
        }
    
        // 添加項
        private void btnAddItem_Click_1(object sender, RoutedEventArgs e)
        {
            Rectangle rectangle = new Rectangle();
            Random random = new Random();
    
            rectangle.Height = 100;
            rectangle.Width = 100;
            rectangle.Fill = new SolidColorBrush(Color.FromArgb(255, (byte)random.Next(0, 255), (byte)random.Next(0, 255), (byte)random.Next(0, 255)));
    
            itemsControl.Items.Add(rectangle);
        }
    
        // 刪除項
        private void btnDeleteItem_Click_1(object sender, RoutedEventArgs e)
        {
            if (itemsControl.Items.Count > 0)
                itemsControl.Items.RemoveAt(itemsControl.Items.Count - 1);
        }
    }
}

7、演示 ReorderThemeTransition

Animation/ThemeTransition/Reorder.xaml

<Page
    x:Class="XamlDemo.Animation.ThemeTransition.Reorder"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Animation.ThemeTransition"
    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">
    
            <Button x:Name="btnAddItem" Content="Add Item" Click="btnAddItem_Click_1" />
    
            <!--
                ReorderThemeTransition - 對集合中的元素重新排序時的過渡效果
            -->
            <ItemsControl x:Name="itemsControl" Margin="0 10 0 0">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapGrid>
                            <WrapGrid.ChildrenTransitions>
                                <TransitionCollection>
                                    <ReorderThemeTransition />
                                </TransitionCollection>
                            </WrapGrid.ChildrenTransitions>
                        </WrapGrid>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.Items>
                    <Rectangle Width="100" Height="100" Fill="Red" />
                    <Rectangle Width="100" Height="100" Fill="Green" />
                    <Rectangle Width="100" Height="100" Fill="Blue" />
                </ItemsControl.Items>
                <ItemsControl.Template>
                    <ControlTemplate>
                        <Border BorderBrush="Orange" BorderThickness="1">
                            <ItemsPresenter Margin="10" VerticalAlignment="Center" HorizontalAlignment="Center" />
                        </Border>
                    </ControlTemplate>
                </ItemsControl.Template>
            </ItemsControl>
    
        </StackPanel>
    </Grid>
</Page>

Animation/ThemeTransition/Reorder.xaml.cs

using System;
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Shapes;
    
namespace XamlDemo.Animation.ThemeTransition
{
    public sealed partial class Reorder : Page
    {
        public Reorder()
        {
            this.InitializeComponent();
        }
    
        // 在集合的位置 2 處添加新的元素，以達到重新排序的效果
        private void btnAddItem_Click_1(object sender, RoutedEventArgs e)
        {
            Rectangle rectangle = new Rectangle();
            Random random = new Random();
    
            rectangle.Height = 100;
            rectangle.Width = 100;
            rectangle.Fill = new SolidColorBrush(Color.FromArgb(255, (byte)random.Next(0, 255), 

(byte)random.Next(0, 255), (byte)random.Next(0, 255)));
    
            itemsControl.Items.Insert(2, rectangle);
        }
    }
}

8、演示 PaneThemeTransition

Animation/ThemeTransition/Pane.xaml

<Page
    x:Class="XamlDemo.Animation.ThemeTransition.Pane"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Animation.ThemeTransition"
    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">
    
            <!--
                PaneThemeTransition - 基於邊緣的較大 UI 滑入和滑出時的過渡效果
                    Edge - 邊緣（Left, Top, Right, Bottom）
            -->
            <Popup Name="popup" HorizontalOffset="-120" VerticalOffset="-140" IsLightDismissEnabled="True">
                <Popup.Child>
                    <Border BorderBrush="Red" BorderThickness="1" Background="Blue" Width="800" Height="200">
                        <TextBlock Text="我是 Popup" FontSize="24.667" HorizontalAlignment="Center" />
                    </Border>
                </Popup.Child>
                <Popup.ChildTransitions>
                    <TransitionCollection>
                        <PaneThemeTransition Edge="Top" />
                    </TransitionCollection>
                </Popup.ChildTransitions>
            </Popup>
    
            <Button Name="btnShowPane" Content="顯示 Pane" Click="btnShowPane_Click_1" Margin="0 10 0 0" />
                
        </StackPanel>
    </Grid>
</Page>

Animation/ThemeTransition/Pane.xaml.cs

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
    
namespace XamlDemo.Animation.ThemeTransition
{
    public sealed partial class Pane : Page
    {
        public Pane()
        {
            this.InitializeComponent();
        }
    
        // 顯示 Pane
        private void btnShowPane_Click_1(object sender, RoutedEventArgs e)
        {
            if (!popup.IsOpen)
                popup.IsOpen = true;
        }
    }
}

9、演示 EdgeUIThemeTransition

Animation/ThemeTransition/EdgeUI.xaml

<Page
    x:Class="XamlDemo.Animation.ThemeTransition.EdgeUI"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Animation.ThemeTransition"
    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">
    
            <!--
                EdgeUIThemeTransition - 基於邊緣的較小 UI 滑入和滑出時的過渡效果
                    Edge - 邊緣（Left, Top, Right, Bottom）
            -->
            <Popup Name="popup" HorizontalOffset="-120" VerticalOffset="-140" IsLightDismissEnabled="True">
                <Popup.Child>
                    <Border BorderBrush="Red" BorderThickness="1" Background="Blue" Width="200" Height="50">
                        <TextBlock Text="我是 Popup" FontSize="24.667" HorizontalAlignment="Center" />
                    </Border>
                </Popup.Child>
                <Popup.ChildTransitions>
                    <TransitionCollection>
                        <EdgeUIThemeTransition Edge="Top" />
                    </TransitionCollection>
                </Popup.ChildTransitions>
            </Popup>
    
            <Button Name="btnShowEdgeUI" Content="顯示 EdgeUI" Click="btnShowEdgeUI_Click_1" Margin="0 10 0 0" />
    
        </StackPanel>
    </Grid>
</Page>

Animation/ThemeTransition/EdgeUI.xaml.cs

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
    
namespace XamlDemo.Animation.ThemeTransition
{
    public sealed partial class EdgeUI : Page
    {
        public EdgeUI()
        {
            this.InitializeComponent();
        }
    
        // 顯示 EdgeUI
        private void btnShowEdgeUI_Click_1(object sender, RoutedEventArgs e)
        {
            if (!popup.IsOpen)
                popup.IsOpen = true;
        }
    }
}

OK

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