碼上歡樂
相關內容    簡體    繁體

在WPF頁面中用Popup模擬模態對話框 .

本文轉載自   查看原文   2012-01-07 14:24   5783    WPF/Silverlight

    在WPF的頁面中我們肯定會遇到這樣的需求：彈出一個對話框讓用戶進行一些選擇和輸入，當用戶在該對話框上的操作結束並關閉對話框后再返回到主頁面進行其他操作。這其實就是一個很典型的模態對話框的應用。在WPF的Window中我們可以創建一個Window並調用它的ShowDialog()方法來滿足上面的需求。可是這樣的方法在WPF頁面上卻行不通。原因是：用ShowDialog()方法彈出的對話框跟瀏覽器是相互獨立的。由於彈出的對話框跟瀏覽器分別在兩個不同的窗口中，所以並不能達到模態對話框的需求。
    下面給大家介紹一種用Popup來模擬模態對話框的方法。彈出的對話框是覆蓋在WPF頁面的上面。用戶只有在關閉了對話框之后才能返回原來的頁面。
    比如現在有下面一個簡單的WPF頁面。

    該頁面的xaml文件也很簡單：

 

view plain copy to clipboard print ?
  1. <Page x:Class="WpfModalDialog.MainPage"  
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.     Title="MainPage">  
  5.     <StackPanel x:Name="MainPanel">  
  6.         <Grid>  
  7.             <Button Height="28" Margin="0,30,0,0" Name="BtnShowDlg" VerticalAlignment="Top" HorizontalAlignment="Center">Show Modal Dialog</Button>  
  8.             <Label Height="28" Margin="0,68,0,0" Width="360" Name="labelString" VerticalAlignment="Top" HorizontalAlignment="Center" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" BorderThickness="1" BorderBrush="DarkBlue">Click the above button</Label>  
  9.         </Grid>  
  10.     </StackPanel>  
  11. </Page>  
 

 

    現在要實現這樣的功能：點擊按鈕彈出一個模態對話框讓用戶輸入一個字符串，然后在頁面的文本框里面顯示剛才用戶輸入的字符串。
    下面是具體的截圖：

   為了實現上面的功能，首先在xaml文件里面加上一個Popup： 

view plain copy to clipboard print ?
  1. <Popup Name="ModalDialog" StaysOpen="True" Placement="Center">  
  2.     <Border BorderThickness="2" BorderBrush="SteelBlue" Width="400" Height="130">  
  3.         <Grid Background="White">  
  4.             <DockPanel Height="28" VerticalAlignment="Top" Background="SteelBlue">  
  5.                 <TextBox Height="26" Name="TxtBoxTitle" Width="120" Background="SteelBlue" BorderThickness="0" HorizontalAlignment="Left" VerticalAlignment="Center" Foreground="White" FontSize="16" Focusable="False" IsHitTestVisible="False" IsTabStop="False" VerticalContentAlignment="Center">WPF Modal Dialog</TextBox>  
  6.                 <Button Height="26" Name="BtnClose" Width="26" HorizontalAlignment="Right" VerticalAlignment="Center" FontSize="16" Background="SteelBlue" Click="Dlg_BtnClose_Click">X</Button>  
  7.             </DockPanel>  
  8.   
  9.             <Grid Margin="0,30,0,0">  
  10.                 <Label Margin="15,0,0,0" Height="28" VerticalAlignment="Top" HorizontalAlignment="Left" VerticalContentAlignment="Center" >Input a string: </Label>  
  11.                 <TextBox Height="28" Name="TxtBoxInput" Width="360" HorizontalAlignment="Center" VerticalContentAlignment="Center"/>  
  12.                 <Button Margin="0,60,100,0" Height="22" Width="68" HorizontalAlignment="Right" Click="Dlg_BtnOK_Click">OK</Button>  
  13.                 <Button Margin="0,60,15,0" Height="22" Width="68" HorizontalAlignment="Right" Click="Dlg_BtnClose_Click">Cancel</Button>  
  14.             </Grid>  
  15.         </Grid>  
  16.     </Border>  
  17. </Popup>  
 

 

    在Popup里面的布局跟普通的WPF的Window和Page用的是一樣的方法。你就把Popup當成一個容器就行了。然后給BtnShowDlog加上一個Click事件。完整的xaml代碼是下面這樣的：

 

view plain copy to clipboard print ?
  1. <Page x:Class="WpfModalDialog.MainPage"  
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.     Title="MainPage">  
  5.     <StackPanel x:Name="MainPanel">  
  6.         <Grid>  
  7.             <Button Height="28" Margin="0,30,0,0" Name="BtnShowDlg" VerticalAlignment="Top" HorizontalAlignment="Center" Click="BtnShowDlg_Click">Show Modal Dialog</Button>  
  8.             <Label Height="28" Margin="0,68,0,0" Width="360" Name="labelString" VerticalAlignment="Top" HorizontalAlignment="Center" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" BorderThickness="1" BorderBrush="DarkBlue">Click the above button</Label>  
  9.         </Grid>  
  10.           
  11.         <Popup Name="ModalDialog" StaysOpen="True" Placement="Center">  
  12.             <Border BorderThickness="2" BorderBrush="SteelBlue" Width="400" Height="130">  
  13.                 <Grid Background="White">  
  14.                     <DockPanel Height="28" VerticalAlignment="Top" Background="SteelBlue">  
  15.                         <TextBox Height="26" Name="TxtBoxTitle" Width="120" Background="SteelBlue" BorderThickness="0" HorizontalAlignment="Left" VerticalAlignment="Center" Foreground="White" FontSize="16" Focusable="False" IsHitTestVisible="False" IsTabStop="False" VerticalContentAlignment="Center">WPF Modal Dialog</TextBox>  
  16.                         <Button Height="26" Name="BtnClose" Width="26" HorizontalAlignment="Right" VerticalAlignment="Center" FontSize="16" Background="SteelBlue" Click="Dlg_BtnClose_Click">X</Button>  
  17.                     </DockPanel>  
  18.        
  19.                     <Grid Margin="0,30,0,0">  
  20.                         <Label Margin="15,0,0,0" Height="28" VerticalAlignment="Top" HorizontalAlignment="Left" VerticalContentAlignment="Center" >Input a string: </Label>  
  21.                         <TextBox Height="28" Name="TxtBoxInput" Width="360" HorizontalAlignment="Center" VerticalContentAlignment="Center"/>  
  22.                         <Button Margin="0,60,100,0" Height="22" Width="68" HorizontalAlignment="Right" Click="Dlg_BtnOK_Click">OK</Button>  
  23.                         <Button Margin="0,60,15,0" Height="22" Width="68" HorizontalAlignment="Right" Click="Dlg_BtnClose_Click">Cancel</Button>  
  24.                     </Grid>  
  25.                 </Grid>  
  26.             </Border>  
  27.         </Popup>  
  28.     </StackPanel>  
  29. </Page>  

 

    最后，就是在cs文件里面添加代碼：
    1. 添加一個顯示和關閉對話框的方法

view plain copy to clipboard print ?
  1. private void ShowModalDialog(bool bShow)  
  2. {  
  3.     this.ModalDialog.IsOpen = bShow;  
  4.     this.MainPanel.IsEnabled = !bShow;  
  5. }  

 

    代碼非常簡單，就是顯示對話框的時候使原來的頁面不可用；關閉對話框的時候使原來的網頁恢復為可用狀態。
    2. 為主頁面上的“Show Modal Dialog”按鈕添加Click事件

 

view plain copy to clipboard print ?
  1. private void BtnShowDlg_Click(object sender, RoutedEventArgs e)  
  2. {  
  3.     ShowModalDialog(true);  
  4. }  

 

    調用ShowModalDialog方法來顯示對話框
    3. 為對話框的Cancel按鈕和Close按鈕添加Click事件

 

view plain copy to clipboard print ?
  1. private void Dlg_BtnClose_Click(object sender, RoutedEventArgs e)  
  2. {  
  3.     ShowModalDialog(false);  
  4. }  

 

    調用ShowModalDialog方法使對話框不可見。
    4. 為對話框的OK按鈕添加Click事件

 

view plain copy to clipboard print ?
  1. private void Dlg_BtnOK_Click(object sender, RoutedEventArgs e)  
  2. {  
  3.     ShowModalDialog(false);  
  4.   
  5.     labelString.Content = "The string is: " + TxtBoxInput.Text;  
  6. }  

 

    首先使對話框不可見，然后修改根據用戶在對話框上的輸入來修改主頁面上的Label的文本內容。
    通過上面的方法，就可以讓對話框跟主頁面顯示在同一個瀏覽器里，並且使用戶在關閉對話框之前不能做任何操作。也就是說，實現了一個模態對話框的所有機制。

    PS：剛開始接觸WPF，通過搜索和學習，覺得這是用WPF實現模態對話框的一個好方法。也許還有更好的方法，我知道了之后會共享給大家。同時如果你知道更好的方法，希望你能告訴我。


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 模態對話框和非模態對話框 MFC模態與非模態對話框 C# WPF遮罩對話框（Popup Message Overlay/ Dialog Host） Qt對話框之二：模態、非模態、半模態對話框 “模態”對話框和“后退”按鈕 ModalDialog模態對話框的刷新 MFC 點擊按鈕，彈出另一個對話框（模態及非模態對話框） 關閉模態對話框 &關閉非模態對話框 VC++模態對話框和非模態對話框 qt5--模態對話框和非模態對話框
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM