重新想象 Windows 8 Store Apps (3) - 控件之内容控件: ToolTip, Frame, AppBar, ContentControl, ContentPresenter; 容器控件: Border, Viewbox, Popup

[源码下载]

重新想象 Windows 8 Store Apps (3) - 控件之内容控件: ToolTip, Frame, AppBar, ContentControl, ContentPresenter; 容器控件: Border, Viewbox, Popup

作者：webabcd


介绍
重新想象 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
ContentControlDemo.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;
        }
    }
}

OK
[源码下载]