新时尚Windows8开发（17）：自己也来做一做弹出对话框

2024-03-20 01:08
文章标签 开发 17 弹出 对话框 windows8 新时尚

本文主要是介绍新时尚Windows8开发（17）：自己也来做一做弹出对话框，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Windows Store应用程序有点像Web页面，一般而言，我们只有一个窗口，不会像传统的桌面应用程序那样，使用多个子窗体。

前面我们也讨论过MessageDialog类用来弹出对话框，但是，它只能显示文本信息，如果一些复杂的内容，就不能满足我们的要求了。本来考虑Windows.UI.Core命名空间下的CoreWindowDialog类，但，后来发现这个类貌似一个空壳子，反正我是不知道这个类是怎么用的，那么，咋办呢，有没有其它方法呢？

其实所谓的弹出层，说白了，其本质就是一个控件，这个控件我们如果玩过WPF，会觉得灰常熟悉，谁呢？就是这位帅哥——Popup（位于Windows.UI.Xaml.Controls.Primitives下），怎么样，似曾相识吧？

 

我们总结，每个弹出层，无论其内容是什么，都有以下共同特点：

1、有一个半透明的层覆盖在现有UI上，以阻止用户操作弹出对话框下的UI元素。

2、除了内容不同，弹出层的大小位置以及背景都是一个样的。

 

这样的话，我们不妨自己来写一个控件，这个控件具有内容模型，这样，在弹出框中需要什么内容，我们只需设置其Content就行了。

 

下面，我们就实地演练一下吧。

1、用动VS，新建一个空白页面项目。

2、在“解决方案资源管理器”上右击，从菜单中选择“添加”-“新建项”。

 

在接下来的窗口中选择“模板化控件”，输入控件名字，确定。

 

让后你会看到下面这个。

 

3、打开Generic.xaml，先为控件定义好模板。

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1">
<Style TargetType="local:PopControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:PopControl">
<Grid>
<Rectangle Canvas.ZIndex="0" Fill="Black" Opacity="0.4"/>
<ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" ContentTemplate="{TemplateBinding ContentTemplate}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>


模板一点也不复杂，接下来是核心部分，就是控件的逻辑代码。

using System;
using System.Collections.Generic;
using System.Linq;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Documents;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Media.Animation;
namespace App1
{
public class PopControl : ContentControl
{
Popup m_pop = null;
public PopControl()
{
this.DefaultStyleKey = typeof(PopControl);
// 弹出层的宽度等于窗口的宽度
this.Width = Window.Current.Bounds.Width;
// 弹出层的高度等于窗口的高度
this.Height = Window.Current.Bounds.Height;
this.HorizontalContentAlignment = Windows.UI.Xaml.HorizontalAlignment.Stretch;
this.m_pop = new Popup();
// 将当前控件作为Popup的Child
this.m_pop.Child = this;
}
/// <summary>
/// 获取Popup的ChildTransitions集合
/// </summary>
public TransitionCollection PopTransitions
{
get
{
if (m_pop.ChildTransitions == null)
{
m_pop.ChildTransitions = new TransitionCollection();
}
return m_pop.ChildTransitions;
}
}
/// <summary>
/// 显示弹出层
/// </summary>
public virtual void ShowPop()
{
if (this.m_pop != null)
{
this.m_pop.IsOpen = true;
}
}
/// <summary>
/// 隐藏弹出层
/// </summary>
public virtual void HidePop()
{
if (this.m_pop != null)
{
this.m_pop.IsOpen = false;
}
}
}
}


大至原理是这样的，把控件的大小设置和当前窗口的大小相等，这样确保弹出层可以完全覆盖在UI上。接着把当前控件作为Popup控件的Child元素，而控件的显示与隐藏，其实就是设置Popup的IsOpen属性。

为了方便派生类扩展，ShowPop和HidePop方法都用了virtual关键字。

 

4、接下来，新增一个用户控件，它作为弹出层的内容。

【XAML】

<UserControl
x:Class="App1.ucReg"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="700"
d:DesignWidth="900">
<UserControl.Resources>
<Style x:Key="t" TargetType="TextBlock">
<Setter Property="FontSize" Value="20"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Margin" Value="6,0,21,0"/>
</Style>
<Style x:Key="w" TargetType="FrameworkElement">
<Setter Property="Margin" Value="5,7,0,5"/>
</Style>
</UserControl.Resources>
<Grid VerticalAlignment="Center" Background="Green">
<Grid Margin="0,50,0,32" Width="560">
<StackPanel>
<TextBlock Text="用户注册" Margin="0,0,0,34" Style="{StaticResource PageHeaderTextStyle}"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Style="{StaticResource t}" Grid.Row="0" Grid.Column="0" Text="姓名："/>
<TextBox Grid.Row="0" Grid.Column="1" Style="{StaticResource w}"/>
<TextBlock Grid.Row="1" Grid.Column="0" Text="性别：" Style="{StaticResource t}"/>
<ComboBox Grid.Row="1" Grid.Column="1" Style="{StaticResource w}">
<ComboBoxItem Content="男" IsSelected="True"/>
<ComboBoxItem Content="女" />
</ComboBox>
<TextBlock Style="{StaticResource t}" Text="电邮：" Grid.Row="2" Grid.Column="0"/>
<TextBox Style="{StaticResource w}" Grid.Row="2" Grid.Column="1"/>
<TextBlock Style="{StaticResource t}" Text="手机：" Grid.Row="3" Grid.Column="0"/>
<TextBox Grid.Column="1" Grid.Row="3" Style="{StaticResource w}"/>
<TextBlock Text="地址：" Style="{StaticResource t}" Grid.Row="4" Grid.Column="0"/>
<TextBox Style="{StaticResource w}" Grid.Row="4" Grid.Column="1"/>
</Grid>
<StackPanel Orientation="Horizontal" Margin="0,15,0,7" HorizontalAlignment="Center">
<Button Content="确定" Padding="45,5" Click="onClick"/>
<Button Content="取消" Padding="45,5" Margin="22,0,0,0" Click="onClick"/>
</StackPanel>
</StackPanel>
</Grid>
</Grid>
</UserControl>


【C#】

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
namespace App1
{
public sealed partial class ucReg : UserControl
{
PopControl _pc;
public ucReg(PopControl c)
{
this.InitializeComponent();
_pc = c;
}
private void onClick(object sender, RoutedEventArgs e)
{
if (_pc != null)
{
_pc.HidePop();
}
}
}
}


为了方便控制PopControl，在用户控件中声明一个PopControl，在用户控件类的构造函数中传递。

 

5、最后，我们在MainPage.xaml中测试这个弹出框。

【XAML】

<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Button Content="弹出对话框" Click="onPop"/>
</Grid>
</Page>


【C#】

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
namespace App1
{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
private void onPop(object sender, RoutedEventArgs e)
{
PopControl pc = new PopControl();
ucReg uc = new ucReg(pc);
pc.Content = uc;
pc.ShowPop();
}
}
}


 

好了，现在可以运行，效果就像下图所示，还不错吧。

 

 

这篇关于新时尚Windows8开发（17）：自己也来做一做弹出对话框的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/827797。

相关文章

这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
Hadoop企业开发案例调优场景

Hadoop企业开发案例调优场景

需求 （1）需求：从1G数据中，统计每个单词出现次数。服务器3台，每台配置4G内存，4核CPU，4线程。 （2）需求分析： 1G / 128m = 8个MapTask；1个ReduceTask；1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务（4    3    3） HDFS参数调优 （1）修改：hadoop-env.sh export HDFS_NAMENOD
阅读更多...
嵌入式QT开发：构建高效智能的嵌入式系统

嵌入式QT开发：构建高效智能的嵌入式系统

摘要： 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发，详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程，包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发，涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用，以及嵌入式 QT 与硬件设备的交互，包括输入输出设
阅读更多...
OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息，即可快速实现设备配网，是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递，利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力，实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后，即可发送相关配网数据。同时还支持与常规Sof
阅读更多...
活用c4d官方开发文档查询代码

活用c4d官方开发文档查询代码

当你问AI助手比如豆包，如何用python禁止掉xpresso标签时候，它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来
阅读更多...
Linux_kernel驱动开发11

Linux_kernel驱动开发11

一、改回nfs方式挂载根文件系统         在产品将要上线之前，需要制作不同类型格式的根文件系统         在产品研发阶段，我们还是需要使用nfs的方式挂载根文件系统         优点：可以直接在上位机中修改文件系统内容，延长EMMC的寿命         【1】重启上位机nfs服务         sudo service nfs-kernel-server resta
阅读更多...
【区块链 + 人才服务】区块链集成开发平台 | FISCO BCOS应用案例

【区块链 + 人才服务】区块链集成开发平台 | FISCO BCOS应用案例

随着区块链技术的快速发展，越来越多的企业开始将其应用于实际业务中。然而，区块链技术的专业性使得其集成开发成为一项挑战。针对此，广东中创智慧科技有限公司基于国产开源联盟链 FISCO BCOS 推出了区块链集成开发平台。该平台基于区块链技术，提供一套全面的区块链开发工具和开发环境，支持开发者快速开发和部署区块链应用。此外，该平台还可以提供一套全面的区块链开发教程和文档，帮助开发者快速上手区块链开发。
阅读更多...
Vue3项目开发——新闻发布管理系统（六）

Vue3项目开发——新闻发布管理系统（六）

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后，系统就进入了首页。接下来，也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分，左侧为系统的菜单栏，右侧
阅读更多...
v0.dev快速开发

v0.dev快速开发

探索v0.dev：次世代开发者之利器 今之技艺日新月异，开发者之工具亦随之进步不辍。v0.dev者，新兴之开发者利器也，迅速引起众多开发者之瞩目。本文将引汝探究v0.dev之基本功能与优势，助汝速速上手，提升开发之效率。 何谓v0.dev？ v0.dev者，现代化之开发者工具也，旨在简化并加速软件开发之过程。其集多种功能于一体，助开发者高效编写、测试及部署代码。无论汝为前端开发者、后端开发者
阅读更多...
pico2 开发环境搭建-基于ubuntu

pico2 开发环境搭建-基于ubuntu

pico2 开发环境搭建-基于ubuntu 安装编译工具链下载sdk 和example编译example 安装编译工具链 sudo apt install cmake gcc-arm-none-eabi libnewlib-arm-none-eabi libstdc++-arm-none-eabi-newlib 注意cmake的版本，需要在3.17 以上 下载sdk 和ex
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2