You can download the code for the post here.
I have always enjoyed the ModalPopup dialogs provided by ASP.NET AJAX Extensions 1.0. In one way or another they add a very special touch to the Web application in a user-friendly way. You can read more on ModalPopups in AJAX here (http://www.asp.net/AJAX/AjaxControlToolkit/Samples/ModalPopup/ModalPopup.aspx).
Now that I am working on WPF, I thought of having the same feature in WPF Browser Application (XBAP). The WPF Browser Application as you know runs in the Browser (Firefox and IE) with several Security limitations on WPF. WPF provides the Popup class that allowed me to provide such a Modal Popup Dialog Box. Read more on Popup class here (http://msdn.microsoft.com/en-us/library/system.windows.controls.primitives.popup.aspx).
To start with, let us create a new XBAP application by opening up VS 2008, File --> New Project --> WPF Browser Application.
Let us prepare Page1.xaml of this new project piece by piece:
<Page x:Class="ModalPopupDialog.Page1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Modal Popup Dialog">
First of all set the Title of main page.
<StackPanel Name="mainPage" >
<StackPanel Margin="10">
<TextBlock Margin="5" TextWrapping="Wrap">Click the button to show a Modal Popup Dialog Box</TextBlock>
<Button Click="cmdShowModal_Click" HorizontalAlignment="Left" Padding="3" Margin="5">Show Modal</Button>
<Label Name="lblName" Margin="0, 10, 10, 10" FontSize="18" FontFamily="Arial"></Label>
</StackPanel>
Add a new StackPanel that shall be the main container of the entire Page. Then add another StackPanel to hold a TextBlock and a Button. The TextBlock asks the user to press the Button to show the Modal Popup Dialog Box.
<Popup Name="dialogPopUp" StaysOpen="True" Placement="Center" Width="250" Height="200">
<ScrollViewer VerticalScrollBarVisibility="Auto">
<Border BorderThickness="1" Background="#D4D0C8">
<TabControl>
<TabItem Header="Page 1">
<StackPanel Margin="5" Background="White">
<TextBlock Margin="10" TextWrapping="Wrap">
Enter your Full Name:
</TextBlock>
<TextBox Focusable="True" Name="txtName" Margin="10"></TextBox>
<StackPanel Orientation="Horizontal" Margin="10">
<Button Click="cmdOK_Click" Padding="3" Margin="0,0,5,0">OK</Button>
<Button Click="cmdCancel_Click" Padding="3">Cancel</Button>
</StackPanel>
</StackPanel>
</TabItem>
<TabItem Header="Page 2">
<StackPanel Margin="5" Background="White">
<TextBlock Margin="10" TextWrapping="Wrap">
Another TabItem
</TextBlock>
</StackPanel>
</TabItem>
</TabControl>
</Border>
</ScrollViewer>
</Popup>
</StackPanel>
</Page>
The Popup Window contains a ScrollViewer that makes sure the Popup Window will scroll when its content Width or Height goes beyond the preset Width and Height on the Popup Window.
The ScrollViewer contains a TabControl with two defined TabItems. The first contains a TextBlock and TextBox to allow the user to enter her/his Full Name and then either hit the OK or Cancel button. The other TabItem is empty just a way to show you how flexible the Popup Window is.
Before running this application we need to add some code in the code-behind of the Page1.zaml. Mainly, when the *Show Modal* button is clicked we want to disable the main StackPanel so that the user cannot interact with the page, set a light gray color for the background of the page and finally open the Popup control using the *IsOpen* boolean Dependency Property.
When the OK button on the Popup control is clicked, we need to reverse what has been done above, i.e. enable the main StackPanel, remove the light gray color background of the main page and finally close the Popup control. In addition, we will grab the text the user has entered and show it on a label on the main page.
When the Cancel button on the Popup control is clicked the same thing should happen as in the case of the OK button with the exception that there is no need to update the Label in the main page with any entered text.
The code below shows how the above is implemented:
private void cmdShowModal_Click(object sender, RoutedEventArgs e)
{
// Configure the main page to disable the main StackPanel,
// Set the background color to LightGray as if it is dimed
// and finally open the Dialogbox.
this.ConfigureMainPage(
false,
new BrushConverter().ConvertFromString("#8F8F8F") as SolidColorBrush,
true);
}
private void cmdOK_Click(object sender, RoutedEventArgs e)
{
// Configure the main page to enable it, remove the LightGray
// color as the background and finally close the dialogbox.
this.ConfigureMainPage(true, null, false);
// Grab the Full Name entered in the dialogbox.
this.lblName.Content = string.Format("Welcome {0} to my first XBAP application!", this.txtName.Text);
// Clear the Textbox
this.txtName.Text = "";
}
private void cmdCancel_Click(object sender, RoutedEventArgs e)
{
// Configure the main page to enable it, remove the LightGray
// color as the background and finally close the dialogbox.
this.ConfigureMainPage(true, null, false);
// Clear the Textbox
this.txtName.Text = "";
}
/// <summary>
/// Configures the main page by setting the
/// IsEnabled property of the main StackPanel, setting
/// the background of the main StackPanel and finally open/close
/// the dialog box
/// </summary>
private void ConfigureMainPage(
bool mainPageEnabled,
Brush mainPageBackground,
bool IsDialogOpened)
{
this.mainPage.IsEnabled = mainPageEnabled;
this.Background = mainPageBackground;
dialogPopUp.IsOpen = IsDialogOpened;
}
The code is self-explanatory and simply does what I have just explained above.
When we run the application, the main page looks as in Figure 1 below:
Once you click the *Show Modal* button the Popup window shows up as shown in Figure 2 below:
The user can type her/his name then either press OK or Cancel button. Notice how the Popup is popped Window-Centered and you can see the TabControl clearly containing two main tabs. Assume I typed my name and pressed OK, the page looks as in Figure 3 below:
You can see how the page is updated with the text the user has typed in the Textbox that was shown inside the Popup control.
You can download the code for the post here.
Hope you enjoyed reading this post!
Thanks
Tags: WPF Browser Applications