How to show user control on button click in wpf?

Question

I have created a user control in wpf. I have also create a mainwindow. Now, what i want is that, when i click on a button (which is in mainWindow), a user control is shown like a dialog box. suppose i have a button named i-e create new user. Now, what i want is to show the control (that i have created for new user) on button click whithout calling it in mainWindow.

Answer 1

In the WPF demo application Family Show, user controls are created in the main window (MainWindow.xaml)

<!-- New User Control -->
<local:NewUserControl x:Name="NewUserControl" 
HorizontalAlignment="Center" VerticalAlignment="Center"
AddButtonClick="NewUserControl_AddButtonClick"/>

Then in the code behind (MainWindow.xaml.cs), the different user controls are hidden or shown as a result of click actions from the button.

/// <summary>
/// Hides the New User Control.
/// </summary>
private void HideNewUserControl()
{
     NewUserControl.Visibility = Visibility.Hidden;
     DiagramControl.Visibility = Visibility.Visible;
     enableButtons();

     if (family.Current != null)
        DetailsControl.DataContext = family.Current;
}

/// <summary>
/// Shows the New User Control.
/// </summary>
private void ShowNewUserControl()
{
        HideFamilyDataControl();
        HideDetailsPane();
        DiagramControl.Visibility = Visibility.Collapsed;
        WelcomeUserControl.Visibility = Visibility.Collapsed;

        if (PersonInfoControl.Visibility == Visibility.Visible)
            ((Storyboard)this.Resources["HidePersonInfo"]).Begin(this);

        NewUserControl.Visibility = Visibility.Visible;
        NewUserControl.ClearInputFields();
        NewUserControl.SetDefaultFocus();

        ... //Removed for brevity
    }

I encourage you to download the Family Show app to look at the source code, or to browse it at least on-line.

You could put it in a separate window like Johannes Hofmeister suggested with his answer.

The main advantage of a User Control is that this user interface block might be used at multiple points in an application. (eg. a graph control user control with scroll, zoom and screenshot buttons would appear next to every graph, making it an ideal candidate for a user control).

Answer 2

You can easily add another window with the your usercontrol on it!

First, create another window (right click in the solution explorer, add new item, Window). Second, drag you usercontrol onto the window:

<Window x:Class="MyWpfApplication.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:DeleteMeTest="clr-namespace:DeleteMeTest"
        Title="Window1" Height="300" Width="300">
    <Grid>
        <MyWpfApplication:UserControl1 />
    </Grid>
</Window>

Then you must setup the button click handler to show the window:

MainWindow.xaml:

<Window x:Class="MyWpfApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Button Content="Click Me" Click="Button_Click"/>
    </Grid>
</Window>

The Button_Click Handler in MainWindow.xaml.cs:

private void Button_Click(object sender, RoutedEventArgs e)
{
    new Window1().ShowDialog();
}

The ShowDialog() Method opens a dialog, which means that the window comes on top and must be interacted with (Closed) before you can return to interacting with your main window.

You can also use the Show Method, to have a non blocking window.