win8開發（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，先爲控件定義好模板。

幻影組，如果您要查看本帖隱藏內容請回覆

模板一點也不復雜，接下來是核心部分，就是控件的邏輯代碼。

幻影組，如果您要查看本帖隱藏內容請回覆

大至原理是這樣的，把控件的大小設置和當前窗口的大小相等，這樣確保彈出層可以完全覆蓋在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#】

幻影組，如果您要查看本帖隱藏內容請回覆

爲了方便控制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();
        }
    }
}


好了，現在可以運行，效果就像下圖所示，還不錯吧
 

2012-11-12 11:01 上傳

下載附件 (45.52 KB)