How many people have experienced the modal pop up in desktop applications? They are commonly used across a wide variety of applications, one could say, too commonly used. While not appropriate for all situations, sometimes you need to use a pop up.

In XBAP applications the ability to open a pop-up is very limited; in many cases you will use navigation and multiple pages instead of separate windows. In most cases this is sufficient, but sometimes you really need to use a pop-up, and when you do a simple work around is to use the Popup control offered by WPF.

First, you define the Popup in the markup, making sure to set its StaysOpen property to true so it will remain open until you close it. (There’s no point in using the PopupAnimation or AllowsTransparency properties, because they won’t have any effect in a web page.) Include suitable buttons, such as OK and Cancel, and set the Placement property to Center so the popup will appear in the middle of the browser window.

Code sample:

<Popup Name="dialogPopUp" StaysOpen="True" Placement="Center" MaxWidth="200">

    <Border>

        <Border.Background>

            <LinearGradientBrush>

                <GradientStop Color="AliceBlue" Offset="1"></GradientStop>

                <GradientStop Color="LightBlue" Offset="0"></GradientStop>

            </LinearGradientBrush>

        </Border.Background>

        <StackPanel Margin="5" Background="White">

            <TextBlock Margin="10" TextWrapping="Wrap">Please enter your name.

            </TextBlock>

            <TextBox Name="txtName" Margin="10"></TextBox>

            <StackPanel Orientation="Horizontal" Margin="10">

                <Button Click="dialog_boxOK_Click" Padding="3" Margin="0,0,5,0">OK</Button>

                <Button Click="dialog_boxCancel_Click" Padding="3">Cancel</Button>

            </StackPanel>

        </StackPanel>

    </Border>

</Popup>

At the appropriate time (for example, when a button is clicked), disable the rest of your user interface and show the Popup. To disable your user interface, you can set the IsEnabled property of some top-level container, such as a StackPanel or a Grid, to false. (You can also set the Background property of the page to gray, which will draw the user’s attention to Popup.) To show the Popup, simply set its IsVisible property to true.

Here’s an event handler that shows the previously defined Popup:

private void popupTriggerButton_Click(object sender, RoutedEventArgs e)

{

    DisableMainPage();

}

private void DisableMainPage()

{

    mainPage.IsEnabled = false;

    this.Background = Brushes.LightGray;

    dialogPopUp.IsOpen = true;

}

When the user clicks the OK or Cancel button, close the Popup by setting its IsVisible property to false, and re-enable the rest of the user interface:

private void dialog_boxOK_Click(object sender, RoutedEventArgs e)

{

    // Copy name from the Popup into the main page.

    lblName.Content = "You entered: " + txtName.Text;

    EnableMainPage();

} 

private void dialog_boxCancel_Click(object sender, RoutedEventArgs e)

{

    EnableMainPage();

}

private void EnableMainPage()

{

    mainPage.IsEnabled = true;

    this.Background = null;

    dialogPopUp.IsOpen = false;

}

Using the Popup control to create this workaround has one significant limitation. To ensure that the Popup control can’t be used to spoof legitimate system dialog boxes, the Popup window is constrained to the size of the browser window. If you have a large Popup window and a small browser window, this could chop off some of your content. One solution is to wrap the full content of the Popup control in a ScrollViewer with the VerticalScrollBarVisibility property set to Auto.

If a Popup isn’t suitable for you, you can try another more “interesting” approach for showing a dialog box. Using the Windows Form library from .NET 2.0 you can safely create and host any WinForm control in your WPF application. In this case, you can create and show an instance of the System.Windows.Forms.Form class (or any custom form that derives from Form), because it doesn’t require unmanaged code permission. In fact, you can even show the form modelessly, so the page remains responsive. The only drawback is that a security balloon automatically appears superimposed over the form and remains until the user clicks the warning message. You’re also limited in what you can show in the form. Windows Forms controls are acceptable, but WPF content isn’t allowed.

Labels: .NET, c#, code sample, popup, WPF, XBAP

# posted by Romeo Dumitrescu @ 10:36 p.m. 39 comments