WPF - Use one main window for other windows

Question

I am new to WPF and I would like to have one main window and a few other windows ( Settings, Forms etc.) Normally if the user clicks the Settings button, it opens Setting windows, if the user clicks other buttons than windows opens new windows what user selected.

BUT I want to show only one window to the user for all other windows. when he click Settings on the menu, Settings windows will be loaded to Main Windows. If the user selects any other windows than that windows will be loaded to the main windows.

similar to www.wpftutorial.net this website.

Is it possible ?

Possible duplicate of [WPF MVVM: How to load views "on demand" without using plug-in architecture?](https://stackoverflow.com/questions/6810799/wpf-mvvm-how-to-load-views-on-demand-without-using-plug-in-architecture) — Dean Kuga, Jan 21 '19 at 16:13

Alex Edwin Velez · Accepted Answer · 2019-01-21T15:26:52.240

1

Consider the following approach

Inside your Main window put a Grid:

 <Window Name="mainWindow"
        x:Class="Example"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >

        <Grid Name="grControls" />

   </Window>

then create your screens as UserControls and when the user clicks on your menu or navigation bar, you can add an user control inside Main Window grid as a child.

var userControl= new UserControl();
mainWindow.grControls.Children.Add(userControl);

This can be done using MVVM pattern

edited Jan 21 '19 at 15:26

answered Jan 21 '19 at 15:14

Alex Edwin Velez

90
6

Is the name of the grid inside MainWindow, i updated my answer – Alex Edwin Velez Jan 21 '19 at 15:27
Thanks a lot Alex. I fixed it with your help. – AliAzra Jan 21 '19 at 15:41
inside the Main windows yo need to have a more complex structure. Maybe you need to add a Panel (Dock Panel, Stack Panel) and inside put two grids ( or the quantity that you need) one for the menu and one for the controls and clear only the grid with the user control – Alex Edwin Velez Jan 21 '19 at 15:44

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

It sounds like a TabControl would give you what you want. Specifically, the property TabStripPlacement="Left" .

Example:

<Window x:Class="WpfTutorialSamples.Misc_controls.TabStripPlacementSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TabStripPlacementSample" Height="200" Width="250">
    <Grid>
        <TabControl TabStripPlacement="Left">
            <TabItem Header="General">
                <Label Content="Content goes here..." />
            </TabItem>
            <TabItem Header="Security" />
            <TabItem Header="Details" />
        </TabControl>
    </Grid>
</Window>

User Controls as View Content

If you change your child content pages from Windows to UserControls and refer to those user controls that should keep your codebase relatively clean.

Example : Your user control with the "view" content. (Yes mvvvm databinding should work fine for this)

View

The view you would want render as a TabItem

<!-- Your SecurityView.xaml; -->
<UserControl
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    <StackPanel>
        <TextBox Text="Security View" />        
    </StackPanel>
</UserControl>

MainWindow The "main" window used to hold all of your tabs.

<!-- Your MainWindow -->
<Window x:Class="WpfTutorialSamples.Misc_controls.TabStripPlacementSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:MyApp"
        Title="TabStripPlacementSample" Height="200" Width="250">
    <Grid>
        <TabControl TabStripPlacement="Left">
            <TabItem Header="General">
                <Label Content="Content goes here..." />
            </TabItem>
            <TabItem Header="Security" >
                <local:SecurityView />
            </TabItem>
        </TabControl>
    </Grid>
</Window>

Source code and picture from :

https://www.wpf-tutorial.com/tabcontrol/tab-positions/

For more examples:

Different views/usercontrols on each tab of a TabControl

Diff between UserControl and Window

Window vs Page vs UserControl for WPF navigation?

For more on TabControl:

(https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.tabcontrol?view=netframework-4.7.2)

Thank you, Terrance, for the answer but with tab control, i have to write all codes in same cs file rather than individual files. — AliAzra, Jan 21 '19 at 15:28
You can make the different pages that you want to have ```UserControls``` instead of Windows and reference to them in Xaml — Terrance, Jan 21 '19 at 15:30

WPF - Use one main window for other windows

2 Answers2

User Controls as View Content

View

MainWindow The "main" window used to hold all of your tabs.