WPF UserControls as a Modal-like Dialog.

Introduction

This article is in direct response to feedback from the WPF Popup Controls series.  What if you needed a User Control to “popup” as a Windows Dialog, have all the properties of a Windows Dialog, but behave as a Popup Control.

Creating a UserControl…plus a little something extra.

Create a WPF User Control as you would normally, but you will want to make certain you put at least one button on the UserControl.

<Button x:Name="CancelButton" Content="Cancel" Click="CancelButton_Click" Width="120" Height="50"/>

Now include a RoutedEvent using the Bubble RoutingStrategy for the button you just created.  This will allow any Page or Window that implements this control to intercept the ClickEvent.Place a couple of Methods that will Show and Hide the user control.  You could also create Dependency Properties at this point to pass Properties between the Parent and the UserControl, not shown here though.

namespace TestCase.UserControls
{
    public partial class TestControl : UserControl
    {
        #region Events

        private void CancelButton_Click(object sender, RoutedEventArgs e)
        {
            RaiseEvent(new RoutedEventArgs(CancelButtonClickEvent));
        }

        #endregion

        #region RoutedEvents

        public static readonly RoutedEvent CancelButtonClickEvent = EventManager.RegisterRoutedEvent(
            "CancelButtonClick", RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(TestControl));
        public event RoutedEventHandler CancelButtonClick
        {
            add { AddHandler(CancelButtonClickEvent, value); }
            remove { RemoveHandler(CancelButtonClickEvent, value); }
        }
      
        #endregion

        public TestControl()
        {
            InitializeComponent();
        }

        public void Show()
        {
            Visibility = Visibility.Visible;
        }

        public void Hide()
        {
            Visibility = Visibility.Collapsed;
        }
    }
}

Using the UserControl.

You will now need to declare the user control on a Window or Page.  This means the Page or Window Header needs to declare the namespace for your UserControl.

xmlns:UserControls="clr-namespace:TestCase.UserControls"

Now finally we are ready to declare our user control.

<UserControls:TestControl HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch"
                          Width="Auto" Height="Auto" Visibility="Collapsed"
                          x:Name="TestUserControl"
                          CancelButtonClick="TestUserControl_CancelButtonClick" />

Notice the control Visiblilty property is set to Collapsed.  We now need to write the code behind, our main focus will be to display and hide the user control.

private void TestUserControl_CancelButtonClick(object sender, RoutedEventArgs e)
{
    HideTestUserControl();
}

private void ShowTestUserControl()
{
    TestUserControl.Show();
}

private void HideTestUserControl()
{
    TestUserControl.Hide();
}

On the main parent Page or Window, simply wire up a Button click or some other user Event and call ShowTestUserControl().

Making it look Pretty.

You will most likely want to make the background control grey out to indicate focus is now on your User Control as well as steal focus from the Parent Window while the user control is active.  This can easily be accomplished using a rectangle.

Add the following code to your AppStyles.xaml

  <Style x:Key="UserControlOverlayRectangleStyle" TargetType="{x:Type Rectangle}">
    <Setter Property="Fill" Value="#FF151515"/>
    <Setter Property="Opacity" Value="0.61"/>
  </Style>

Also add the following code to your UserControl.

<Grid Opacity="1" Width="Auto" Height="Auto" Background="{x:Null}">
     <Rectangle Name="MainRectangle" Margin="0,0,0,0" Style="{DynamicResource UserControlOverlayRectangleStyle}"/>
     <!-- Everything Else -->
</Grid>

Conclusion

We now have a simple way to add declare user controls on a Page or Window and have them behave as Dialog Windows. 

Please feel free to leave suggestions or comments.  I look forward to your feedback.