Open a second usercontrol from the first user control wpf MVVM

Question

I have a WPF application with MVVM pattern. I have a Main window with a few tabs. On clicking different buttons in the main window, it's user control will show up. I have that working fine. However, I need to open a user control when a button is clicked in one of the usercontrols. Not from the Main Window. How do I do this? This is what I have so far:

MainWindow.XAML : I am creating data templates for each user control

<DataTemplate DataType="{x:Type homeViewModel:HomeWindowViewModel}">
    <homeViewModel:HomeWindow></homeViewModel:HomeWindow>
</DataTemplate>
<DataTemplate DataType="{x:Type viewModel:PauseViewModel}">
    <viewModel:Pause></viewModel:Pause>
</DataTemplate>
<DataTemplate DataType="{x:Type logoffVM:LogOffViewModel}">
    <logoffVM:LogOff></logoffVM:LogOff>
</DataTemplate>
<DataTemplate DataType="{x:Type viewModel:ReportViewModel}">
    <viewModel:Report></viewModel:Report>
</DataTemplate>

And have the usercontrols showing up inside ItemsControl:

<Grid x:Name="UserControlGrid"  Width="Auto" Height="auto" Margin="100,40,0,0">
    <ItemsControl ItemsSource="{Binding ViewsToShow}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Grid IsItemsHost="True" Width="auto" Height="auto"></Grid>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
</Grid>

I have the buttons bound to a Command in the MainWindow ViewModel class.

In the MainWindowViewModel:

public ObservableCollection<ObservableObject> ViewsToShow
{
    get
    {
        return viewsToShow;
    }
    set
    {
        viewsToShow = value;
        OnPropertyChanged("ViewsToShow");
    }
}

The Commands :

public ICommand GetNextCommand
{
    get { return new RelayCommand(() => GetNext()); }
}

public ICommand GetOrderCommand
{
    get { return new RelayCommand(() => GetOrder()); }
}

And the Methods that load usercontrols:

public void GetNext()
{
    Order orders = new Order();
    ViewsToShow.Clear();
    ViewsToShow.Add(new OrderDisplayViewModel("GetNext", orders, new WindowFactory()));
}

public void GetOrder()
{
    ViewsToShow.Clear();
    ViewsToShow.Add(new GetOrderViewModel());
}

All this is working fine from the MainWindow. But how do I open the GetOrder user control from the GetNext user control?

Any ideas?

mm8 mm8 · Accepted Answer · 2019-03-01T15:09:18

You could bind to a property of the parent window's DataContext from a UserControl using a RelativeSource;

<Button Command="{Binding DataContext.GetOrderCommand, RelativeSource={RelativeSource AncestorType=Window}}" />

Open a second usercontrol from the first user control wpf MVVM

1 Answers