Jun 29 2008

ModalPopup Dialog in WPF Browser Applications (XBAP)

Category: WPF Browser ApplicationsBil@l @ 15:12

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:

Jun 24 2008

My First Book on ASP.NET - Professional ASP.NET 3.5 Security, Membership and Role Management with C# and VB

Category:Bil@l @ 21:24

Few months ago I was contacted by Wiley Publishing to write an ASP.NET book. The book that I was asked to work on was the Professional ASP.NET 2.0 Security, Membership and Role Management written by Stefan Schackow.

The idea was to upgrade the book into ASP.NET 3.5, IIS 7.0 and provide both C# and VB.NET code for all the chapters.

To make the story short, I started working on this book that now has the following title:

Professional ASP.NET 3.5 Security, Membership and Role Management with C# and VB

This week I finally finished the first draft of all the chapters. Expect the book to be in the market sometime end of this summer!

It was a great experience working on authoring a book after I have worked for several years on writing articles online or for printed magazines.

More to come on the book  :)

 

Thanks 

Tags:

Jun 11 2008

Microsoft Blend and Visual Source Safe, When?

Category:Bil@l @ 20:08

I have started lately working on WPF and developing an application by going through the complete life-cycle. Starting with the UI design in Microsoft Blend going to VS 2008 to implement the functionality of the application.

I noticed that Microsoft Blend misses the integration with Visual Source Safe. Does any one know if VSS will be integrated into Microsoft Blend?

Microsoft always talks about integration, I believe  integrating VSS into Microsoft Blend is something required very much!

 

Regards 

Tags:

Jun 7 2008

Bartek Marnane is blogging!!

Category:Bil@l @ 12:52

I would like to invite you to check my friend Bartek Marnane's new blog at: http://blog.evonet.com.au/default.aspx.

Bartek has so many nice and helpful posts that I am sure you will like them and benefit from!

Good luck Bartek!!

 

Regards

Tags:

Jun 6 2008

LINQed &amp; LAYERED

Category:Bil@l @ 18:37

My article, LINQed & LAYERED: Implement CRUD Operations with LINQ in Three-tier ASP.NET Applications, is now published on www.aspnetpro.com June 2008 issue as the COVER STORY of the issue!

It was a great honor for me to have my first article to www.aspnetpro.com published as a cover story.

I hope you enjoy reading it and if you have any comments please do contact me! You can download the June 2008 issue as PDF following this link: http://www.aspnetpro.com/PDF/Issues/aspJUNE2008.pdf

 

Regards 

Tags:

Jun 6 2008

Photos from the lovely Lebanon

Category:Bil@l @ 06:05

A friend of mine passed this link for lovely photos of Lebanon. Thought of sharing it with you!

http://www.lovelylebanon.com/

 

Hope you will like my country!
Regards

Tags:

Jun 4 2008

AJAX Control Toolkit Tutorials

Category:Bil@l @ 13:23

I found a new page on www.asp.net website that contains a set of tutorials on AJAX Control Toolkit.


Hope you enjoy reading them!
Regards

Tags: