WPF change the UserControl from inside another

Ionut Daniel Bejenariu 21 Reputation points
2021-04-02T02:49:23.403+00:00

Hello. I am new to WPF. So I have the MainWindow in witch I am showing content from some UserControls. I can make at a button click in the UserControl content to change to another UserControl or the MainWindow?

Details about how it is made by now:

  1. I created a static menu with some buttons
  2. On click on any button it changes the content by binding to another usercontrol defined as template
  3. On click on a button inside userControl View I can't do that by changing data context
  4. The content showing is bind to DataContext
Windows Presentation Foundation
Windows Presentation Foundation
A part of the .NET Framework that provides a unified programming model for building line-of-business desktop applications on Windows.
2,823 questions
{count} votes

Accepted answer
  1. Peter Fleischer (former MVP) 19,331 Reputation points
    2021-04-02T05:11:44.807+00:00

    Hi,
    for Command button in UserControl you can use the same ViewModel instance. Try following demo:

    XAML:

    <Window x:Class="Window086"  
            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"  
            xmlns:local="clr-namespace:WpfApp1.WpfApp086"  
            mc:Ignorable="d"  
            Title="Switch UserControls" Height="450" Width="800">  
      <Window.DataContext>  
        <local:ViewModel/>  
      </Window.DataContext>  
      <Grid>  
        <Menu>  
          <MenuItem Header="UC1" Command="{Binding}" CommandParameter="UC1"/>  
          <MenuItem Header="UC2" Command="{Binding}" CommandParameter="UC2"/>  
        </Menu>  
        <ContentControl Content="{Binding UC}" Margin="0 20 0 0"/>  
        </Grid>  
    </Window>  
    

    ViewModel:

    Imports System.ComponentModel  
    Imports System.Runtime.CompilerServices  
      
    Namespace WpfApp086  
      Public Class ViewModel  
        Implements ICommand, INotifyPropertyChanged  
      
        Public Property UC As UserControl  
      
        Public Sub Execute(parameter As Object) Implements ICommand.Execute  
          Select Case parameter.ToString  
            Case "UC1", "ToUC1"  
              UC = New WpfControlLibrary1.Window086UC1  
              UC.Resources.Add("vm", Me)  
            Case "UC2", "ToUC2"  
              UC = New WpfControlLibrary1.Window086UC2  
              UC.Resources.Add("vm", Me)  
          End Select  
          OnPropertyChanged(NameOf(UC))  
        End Sub  
      
        Public Event CanExecuteChanged As EventHandler Implements ICommand.CanExecuteChanged  
        Public Function CanExecute(parameter As Object) As Boolean Implements ICommand.CanExecute  
          Return True  
        End Function  
      
        Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged  
        Private Sub OnPropertyChanged(<CallerMemberName> Optional propName As String = "")  
          RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propName))  
        End Sub  
      End Class  
    End Namespace  
    

    XAML of UserControls:

    <UserControl x:Class="Window086UC1"  
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"   
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"   
                 xmlns:local="clr-namespace:WpfControlLibrary1"  
                 mc:Ignorable="d"   
                 d:DesignHeight="450" d:DesignWidth="800">  
      <StackPanel>  
        <Label Content="UC1" FontSize="20" Foreground="Green"/>  
        <Button Content="Switch to UC2" Command="{Binding}" CommandParameter="ToUC2"/>  
      </StackPanel>  
    </UserControl>  
      
    <UserControl x:Class="Window086UC2"  
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"   
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"   
                 xmlns:local="clr-namespace:WpfControlLibrary1"  
                 mc:Ignorable="d"   
                 d:DesignHeight="450" d:DesignWidth="800">  
      <StackPanel>  
        <Label Content="UC2" FontSize="20" Foreground="Red"/>  
        <Button Content="Switch to UC1" Command="{Binding}" CommandParameter="ToUC1"/>  
      </StackPanel>  
    </UserControl>  
    

    Result:

    83849-x.gif

    0 comments No comments

0 additional answers

Sort by: Most helpful

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.