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

本文涉及的产品
容器服务 Serverless 版 ACK Serverless,952元额度 多规格
容器服务 Serverless 版 ACK Serverless,317元额度 多规格
容器镜像服务 ACR,镜像仓库100个 不限时长
简介: 原文:重新想象 Windows 8 Store Apps (3) - 控件之内容控件: ToolTip, Frame, AppBar, ContentControl, ContentPresenter; 容器控件: Border, Viewbox, Popup[源码下载] 重新想象 Window...
原文: 重新想象 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
[源码下载]

目录
相关文章
|
3月前
|
Linux C++ Windows
【Azure 应用服务】Azure App Service(Windows)环境中如何让.NET应用调用SAP NetWeaver RFC函数
【Azure 应用服务】Azure App Service(Windows)环境中如何让.NET应用调用SAP NetWeaver RFC函数
【Azure 应用服务】Azure App Service(Windows)环境中如何让.NET应用调用SAP NetWeaver RFC函数
|
9天前
|
C# Windows
【Azure App Service】在App Service for Windows上验证能占用的内存最大值
根据以上测验,当使用App Service内存没有达到预期的值,且应用异常日志出现OutOfMemory时,就需要检查Platform的设置是否位64bit。
32 11
|
3月前
|
Java 应用服务中间件 开发工具
[App Service for Windows]通过 KUDU 查看 Tomcat 配置信息
[App Service for Windows]通过 KUDU 查看 Tomcat 配置信息
|
3月前
|
Java 应用服务中间件 Windows
【App Service for Windows】为 App Service 配置自定义 Tomcat 环境
【App Service for Windows】为 App Service 配置自定义 Tomcat 环境
|
3月前
|
PHP Windows
【Azure App Service for Windows】 PHP应用出现500 : The page cannot be displayed because an internal server error has occurred. 错误
【Azure App Service for Windows】 PHP应用出现500 : The page cannot be displayed because an internal server error has occurred. 错误
|
3月前
|
PHP 开发工具 git
【Azure 应用服务】在 App Service for Windows 中自定义 PHP 版本的方法
【Azure 应用服务】在 App Service for Windows 中自定义 PHP 版本的方法
|
3月前
|
网络安全 API 数据安全/隐私保护
【Azure App Service】.NET代码实验App Service应用中获取TLS/SSL 证书 (App Service Windows)
【Azure App Service】.NET代码实验App Service应用中获取TLS/SSL 证书 (App Service Windows)
|
3月前
|
Shell PHP Windows
【Azure App Service】Web Job 报错 UNC paths are not supported. Defaulting to Windows directory.
【Azure App Service】Web Job 报错 UNC paths are not supported. Defaulting to Windows directory.
|
3月前
|
存储 Linux Windows
【应用服务 App Service】App Service For Windows 如何挂载Storage Account File Share 示例
【应用服务 App Service】App Service For Windows 如何挂载Storage Account File Share 示例
|
3月前
|
应用服务中间件 nginx Windows
【Azure 应用服务】在App Service for Windows中实现反向代理
【Azure 应用服务】在App Service for Windows中实现反向代理