How to dynamically load a form when menuitem is clicked in WPF?

Question

I'm learning to create a wpf application with menuitems and when on clicking the menu item a new form / a group of textbox and button, should appear below.

Mainwindow.xaml: This is the window where menuitems to be placed

<TabItem   Header="IB Review Information">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition  Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <uc:IBReview  />
        </Grid>
    </TabItem>

usercontrol.xaml(uc:IBReview): This is the menuitem usercontrol which has menu data. This usercontrol will be place under the mainwindow.xaml

<Grid>
<DockPanel>
    <Menu DockPanel.Dock="Top">
        <MenuItem Header="_File">
            <MenuItem Header="_Exit" />
        </MenuItem>
        <MenuItem Header="_Tools">
            <MenuItem Header="_Manage users">
            </MenuItem>
            <MenuItem Header="_Show groups" IsCheckable="True" IsChecked="True" />
        </MenuItem>
    </Menu>
</DockPanel>

    <Grid>

Now i have constructed window with menuitem. After this I dont know how to construct a form like application under each menuitem. I don't know whether to use page, window or usercontrol.

I tried to constuct a form using usercontrol but when i tried to load into the mainwindow but it's not working correctly

   <Grid>
        <Grid.RowDefinitions>
            <RowDefinition  Height="*"/>
                <RowDefinition  Height="*"/>
            </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
               <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
    <TextBlock Grid.Row="0" Text="claimid" />
    <TextBox Grid.Row="1" Grid.Column="2"  Width="50" TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" Height="50" Text="ram"/>
    <TextBox Grid.Column="2"  Width="50" TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" Height="50" Text="ram"/>
    <TextBlock Grid.Row="0" Text="claimdata" />
</Grid>

1) what is the correct approach whether to use a new window,page or usercontrol on menu item click?

2) I'm trying to achieve this in mvvm, any link or simple example is highly appreciated. I'm completely clueless on how to achieve this.

Mateus Avelar Mateus Avelar · Accepted Answer · 2019-11-25T20:34:52

There's some ways to achieve your goal, If I understood, you need to change the main window content when something happen, like when a user select something in the menu....

You can use the RegionManager from Prism Library that will provide all support for navigation, share parameters between views and ViewModels, navigation history and so on.

You can use the ContentTemplateSelector to change a the ContentControl's content the way you want using one class that has a method to return the instance of the right View depending on the c# code. This one is the simplest, for the beginning I'd recommend go for it and later you can refactor your code to implement the Prism Library.

Or, you can even, use DataTemplate and the DatType property, like this sample I've made. This is even more simple...that sample has also the template selector implemented, if you need to apply some c# code to decision that one could be better.

The Prism Library is a complete framework for implement the MVVM, if you don't know it yet take a look here

I've created two simple examples about that three approaches, it is a app that when user change the menu, so the cat picture will change, each picture is in different view/viewmodel.

TemplateSelector/DataTemplate.DataType

RegionManager+Prism Implementation

How to dynamically load a form when menuitem is clicked in WPF?

1 Answers