open child window inside a parent window in wpf using MVVM

Question

I have a window called "DashBoard" window. This window appears after user sucessfully logs in. Now I wanted to open child window called "Memberlist"inside the Dashboard when user select an option from menu item. User should not be able to pullout "Memberlist" window from "Dashboard" window.

DashboardView.xmal (Parent Window)

<Window x:Class="MyProject.DashboardView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="My Project: Dashboard" Height="600" Width="800" WindowState="Maximized"    
    WindowStartupLocation="CenterOwner">
    <Grid>
    <Menu Height="23" HorizontalAlignment="Left" Name="menu1" VerticalAlignment="Top" 
Width="44">
        <MenuItem Header="_File" >
            <MenuItem Header="View Memberlist…" Command="{Binding 
Path=DisplayMemberlistCommand}" />
</MenuItem>
</Menu>
</Grid>
</Window>

MemberlistView.xaml (Child Window)

<Window x:Class="MyProject.MemberlistView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:toolkit="http://schemas.microsoft.com/wpf/2008/toolkit"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="View Memberlist" Height="400" Width="806">
<Grid>
    <Grid Height="383" Width="1179">
     <toolkit:DataGrid x:Name="dgMemberlist" 
                      ItemsSource="{Binding Path=MemberList}"
                      AutoGenerateColumns="False" Margin="21,57,422,106"
                      SelectedItem="{Binding Path=SelectedMemberItem, 
UpdateSourceTrigger=PropertyChanged}">
            <toolkit:DataGrid.Columns> 
                <toolkit:DataGridTextColumn Header="Export ID" Width="100"   
Binding="{Binding MemberfullName}" IsReadOnly="True" />

 </toolkit:DataGrid.Columns>
        </toolkit:DataGrid>

</Grid>
 </Grid>
</Window>

DashboardViewModel.cs

private ICommand _displayMemberlistCommand;
public ICommand DisplayMemberlistCommand
    {
        get
        {
            if (_displayMemberlistCommand == null)
                _displayMemberlistCommand = new RelayCommand(a=>DoDisplayMemberlist(), 
p=>true);
            return _displayMemberlistCommand;
        }
        set
        {
            _displayMemberlistCommand = value;
        }
    }


        private void DoDisplayMemberlist() 
        {
            DashboardView dv = new DashboardView();
            MemberlistView mlWindow = new MemberlistView ();
            mlWindow.Owner = Application.Current.MainWindow;
            mlWindow .Show();
        }

I don't know if I have understand you... do you want a kind of MDI application?? — zapico, Sep 16 '11 at 15:31
I mean let's take microsoft word as an example. You can open multiple document window within the main Microsoft window, but none of these window can be dragged and dropped outsite the main window. I just wanted all my child window to stay inside the main window, and user must not be able to dragged it outside the main window. This behaviour is very common with many Microsoft application. But you would find exactly opposite Behavior if you see in Adobe Photoshop, where you can drag out child window, menu bar all most everything from the main window.... I don't have Adobe style Behavior. — Shai, Sep 19 '11 at 19:51

score 3 · Answer 1 · answered Sep 16 '11 at 20:22

I would recommend not referencing the Views in the ViewModel. Instead, create a MemberListViewModel, and use a DataTemplate to display it.

So your DashBoardViewModel would have a

ViewModelBase CurrentView {get; set;}

property, and on ShowMemberListCommand simply sets

CurrentView = new MemberListViewModel();

Your DashboardView would contain

<ContentControl Content="{Binding CurrentView}">
    <ContentControl.Resources>
        <DataTemplate DataType="{x:Type local:MemberViewModel}">
            <local:MemberView />
        </DataTemplate>
    </ContentControl.Resources>
</ContentControl>

As long as CurrentView is null, the control is never visible. Once you execute the command to show the MemberView, CurrentView gets set to a MemberViewModel and the ContentControl gets populated

score 1 · Accepted Answer · answered Sep 19 '11 at 20:24

1

Since I did not know the technical term, it took me longer to find solution. I was refereeing to MDI (Multiple Document Interface). I found very good example with sample code on this URL http://wpfmdi.codeplex.com/

answered Sep 19 '11 at 20:24

Shai

529
7
20
36

score 0 · Answer 3 · answered Sep 16 '11 at 15:37

0

Make MemberListView a UserControl instead of Window and add it to main window content on menu click.

answered Sep 16 '11 at 15:37

Souvik Basu

3,069
4
28
42

Will I be able to move child window inisde main window, if i use userControl? And I thought UserControl is only for something you can reuse it in other area of your application. In my case I won't be resuing any of these child window no more than once. – Shai Sep 19 '11 at 19:59
You should be able to move usercontrols in a window but it is not straightforward. You will have to use Canvas as panel in Window and add a Drag behavior on UserControl to move it over the canvas. – Souvik Basu Sep 20 '11 at 04:56

open child window inside a parent window in wpf using MVVM

DashboardView.xmal (Parent Window)

MemberlistView.xaml (Child Window)

DashboardViewModel.cs

3 Answers3