Best way to have a wpf window switching between views?

Question

I'm trying to make a WPF MVVM application where there is one main window that has a sidebar with a button for each MVVM view and the rest of said window displays one view at a time.

Something like:

(ignore that in this example the sidebar is at the top, this is just for illustrative purposes)

My goal is to be able to click a button and have the yellow part change to the view that corresponds with the button.

I can do it just fine hardcoded-ly like so:

<Button Command={Binding ChangeView} CommandParameter={Binding CalculatorView}/>

public FrameworkElement CurrentControlView { get; set; }

public ICommand ChangeViewCommand { get; }

// command initialization

void ChangeView(string viewName)
{
    Type viewType = Type.GetType($"Program.Views.{viewName}");
    CurrentControlView = (FrameworkElement)Activator.CreateInstance(viewType);
}

And bind what view is being shown via the CurrentControlView property.

However I'm trying to make it build itself. What I mean is, I'd like to write code that will look for all MVVM-convention views (XAML files with codebehinds) in a certain namespace and create a button that, when clicked, would fire code that would show its corresponding view.

So far I thought about using some sort of reflection code to gather the views, put them in a collection and have an ItemsControl bind to that collection something like so:

(again keep in mind in the picture the buttons are at the top but I want them at the left side)

    <ItemsControl ItemsSource="{Binding ViewsCollection}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Button Content="??" Command="{Binding ChangeViewCommand}" CommandParameter="??" HorizontalAlignment="Center" VerticalAlignment="Center" Height="40"/>
                </StackPanel>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

However here I'm not sure what to put for Content as I want the button to display the name of the view. So if I have "CalculatorView.xaml" I'd trim the "View" part and the button would be like in the picture with content "Calculator".

Also I don't know how to pass the view name for each separate button for the "CommandParameter". Even passing the button content would suffice, as I can handle it from there.

How can I achieve this?

Answer 1

My answer is based on this answer which already shows the recommended pattern to display dynamic views. I only modified the MainViewModel logic to handle a collection of button items NavigationItem as source collection for a ListBox in the view that dynamically shows the actual navigational buttons.
The mapping will be by the index of the page model items - but it can be any other identifier.

The pattern is simple: create a model, add it to the view by binding it to a ListBox (NavigationItem model collection) and ContentControl (selected IPage or object model) and let WPF render the appropriate view using a matching implicit DataTemplate.

Replace the MainViewModel.cs and the MainWindow.xaml of the linked answer with this ones.

MainViewModel.cs
The part that dynamically adds new pages and a their corresponding navigation button is showed simplified in the AddPage() method. Basically the pattern is to define a NavigationItem and the corresponding IPage implementation. The mapping is NavigationItem.PageIndex to the corresponding item at this index of the Pages collection:

IPage nextPageModel = Pages[NavigationItem.PageIndex];

You would have to define a new DataTemplate for each added page model type to define the actual content of the page.

class MainViewModel
{
  public ICommand SelectPageCommand => new RelayCommand(SelectPage); 
  public ObservableCollection<NavigationItem> NavigationItems { get; }   
  private Dictionary<int, IPage> Pages { get; }

  private IPage selectedPage;   
  public IPage SelectedPage
  {
    get => this.selectedPage;
    set 
    { 
      this.selectedPage = value; 
      OnPropertyChanged();
    }
  }

  public MainViewModel()
  {
    this.NavigationItems = new ObservableCollection<NavigationItem>
    {
      new NavigationItem("Home", 0, this.SelectPageCommand),
      new NavigationItem("Login", 1, this.SelectPageCommand)
    };
     
    this.Pages = new Dictionary<int, IPage>
    {
      { 0, new WelcomePageViewModel() },
      { 1, new LoginPageViewModel() }
    };

    this.SelectedPage = this.Pages.First().Value;
  }

  public void SelectPage(object param)
  {
    if (param is int pageIndex 
      && this.Pages.TryGetValue(pageIndex, out IPage selectedPage))
    {
      this.SelectedPage = selectedPage;
    }
  }

  public void AddPage()
  {
    int newPageIndex = this.Pages.Count;

    IPage calculatorPageModel = new CalculatotPageViewModel();
    this.Pages.Add(newPageIndex, calculatorPageModel);

    var navigationItem = new NavigationItem("Calculator", newPageIndex, this.SelectPageCommand);
    this.NavigationItems.Add(navigationItem);
  }

  public event PropertyChangedEventHandler PropertyChanged;
  protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null) 
    => this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

NavigationItem.cs

class NavigationItem
{
  public string PageTitle { get; }  
  public string PageIndex { get; }
  public string NavigateCommand { get; }


  public NavigationItem(string pageTitle, int pageIndex, ICommand navigateCommand)
  {
    this.PageTitle = pageTitle;
    this.PageIndex = pageIndex;
    this.NavigateCommand = navigateCommand;
  }
}

MainWindow.xaml

<Window>
  <Window.DataContext>
    <MainViewModel />
  </Window.DataContext>

  <Window.Resources>
    <DataTemplate DataType="{x:Type WelcomePageviewModel}">
      <WelcomPage />
    </DataTemplate>

    <DataTemplate DataType="{x:Type LoginPageviewModel}">
      <LoginPage />
    </DataTemplate>

    <DataTemplate DataType="{x:Type CalculatorPageviewModel}">
      <CalculatorPage />
    </DataTemplate>
  </Window.Resources>

  <StackPanel>

    <!-- Page navigation -->
    <ListBox ItemsSource="{Binding NavigationItems}">
      <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
          <VirtualizingStackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
      </ListBox.ItemsPanel>

      <ListBox.ItemTemplate> 
        <DataTemplate> 
          <Button Content="{Binding PageTitle}" 
                  Command="{Binding NavigateCommand}" 
                  CommandParameter="{Binding PageIndex}" />
        </DataTemplate> 
      </ListBox.ItemTemplate> 
    </ListBox>

    <!-- 
      Host of SelectedPage. 
      Automatically displays the DataTemplate that matches the current data type 
    -->
    <ContentControl Content="{Binding SelectedPage}" />
  <StackPanel>
</Window>

Answer 2

I think this is what you are after..

public class MainVM : INotifyPropertyChanged
{
    public List<ButtonViewModel> Navigation { get; private set; }

    private object _selectedView;

    public object SelectedView
    {
        get { return _selectedView; }
        set
        {
            _selectedView = value;
            OnPropertyChanged();
        }
    }

    public ICommand ChangeViewCommand { get; }


    public MainVM()
    {
        Navigation = new List<ButtonViewModel>
        {
            new ButtonViewModel
            {
                Content = "Button 1",
                CommandParameter = new VM1()
            },
            new ButtonViewModel
            {
                Content = "Button 2",
                CommandParameter = new VM2()
            }
        };

        ChangeViewCommand = new RelayCommand(param => ChangeView(param));
    }

    void ChangeView(object param)
    {
        SelectedView = param;
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string name = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
    }
}

public class VM1
{

}
public class VM2
{

}

public class ButtonViewModel
{
    public string Content { get; set; }
    public object CommandParameter { get; set; }
}
public class RelayCommand : ICommand
{
    private Action<object> execute;
    private Func<object, bool> canExecute;

    public event EventHandler CanExecuteChanged
    {
        add { CommandManager.RequerySuggested += value; }
        remove { CommandManager.RequerySuggested -= value; }
    }

    public RelayCommand(Action<object> execute, Func<object, bool> canExecute = null)
    {
        this.execute = execute;
        this.canExecute = canExecute;
    }

    public bool CanExecute(object parameter)
    {
        return this.canExecute == null || this.canExecute(parameter);
    }

    public void Execute(object parameter)
    {
        this.execute(parameter);
    }
}

Main Window

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>

    <ItemsControl ItemsSource="{Binding Navigation}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Button Content="{Binding Content}" Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=DataContext.ChangeViewCommand}"  CommandParameter="{Binding CommandParameter}" HorizontalAlignment="Center" VerticalAlignment="Center" Height="40"/>
                </StackPanel>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

    <ContentPresenter Content="{Binding SelectedView}" Grid.Column="1" />
    
</Grid>

VM1View

<Grid>
    <TextBlock Text="I am VM1" />
</Grid>

VM2View

<Grid>
    <TextBlock Text="I am VM2" />
</Grid>

App.xaml

<Application x:Class="WpfApp.App"...>
    <Application.Resources>
        <DataTemplate DataType="{x:Type local:VM1}">
            <local:VM1View />
        </DataTemplate>

        <DataTemplate DataType="{x:Type local:VM2}">
            <local:VM2View />
        </DataTemplate>
    </Application.Resources>
</Application>

Demo