How do I change the content of a Usercontrol using a button in another Usercontrol?

Question

A window with a grid, and with two content areas, "Contentarea" and "Contentmenu".

"Contentarea" starts blank, "Contentmenu" starts with the Navigation buttons, which make "Contentarea" change its content.
In each of these "Contentxxxx" is allocating one Usercontrol.

Example, start "Contentarea" by calling the Usercontrol homepage.xaml, and the "Contentmenu" calling the Usercontrol menuPage.xaml, that has a button that changes the "Contentarea" of homepage.xaml for listUsuarios.xaml.

What would be the correct code to make this exchange?

Answer 1

Since you already have an answer using code-Behind, I will give a solution using MVVM.

The property you want to fill is called "content". We must connect it to a Viewmodel property that will represent Usercontrol. First let’s create a Viewmodel:

public class ViewModel : INotifyPropertyChanged
{
    //Implementacao do INotifyPropertyChanged 
    public event PropertyChangedEventHandler PropertyChanged;

    private UserControl controle;
    public UserControl Controle
    {
       get { return controle; }
       set
       {
          controle = value;
          OnPropertyChanged("Controle");
       }
    }

    public List<UserControlModel> Controle { get; set; } //Lista dos UserControls

    public Command<string> MudarControle { get; set; } 

    public ViewModel()
    {
        Controles = new List<UserControlModel>();
        //Preencher lista aqui;
        MudarControle = new Command<string>(Alterar);            
    }

    protected void Alterar(string UserControl)
    {
        //Simplifiquei, mas aqui vai uns testes para saber se o controle existe mesmo na lista
        Controle = Controles.FirstOrDefault(c => c.Nome == UserControl);
    }
}

Now we create our model:

public class UserControlModel
{
    public string Nome { get; set; }
    public UserControl Controle { get; set; }

    public UserControlModel() { }

    public UserControlModel(string nome, UserControl user)
    {
        Nome = nome;
        Controle = user;
    }
}

And now just turn on the bindings:

In your Mainwindow class:

public partial class MainWindow : Window
{

    public MainWindow()
    {
        InitializeComponent();
        DataContext = new ViewModel();
    }
}

And the shampoo:

<ContentControl Content="{Binding Controle.Controle}"/>

Note that here is the menu button that will fill Contentcontrol

<Button Content="Item1" Height="50" Width="100" Command="{Binding MudarControle}" CommandParameter="Item1"/>

Here is a very simplistic example where the buttons are already preset in the menu, but changing this code for both sides of the grid to change according to the context is quite simple. It follows the same mechanics. If you are in doubt about how to implement the command class, take a look at this link:

https://guiadosprogramadores.wordpress.com/2016/12/21/mvvm-e-seus-commands/

Answer 2

A simple way to solve without MVVM is by using delegate and event.

Mainwindow.xaml

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="100" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <local:Menu Grid.Row="0" OnUserControlAlterado="Menu_OnUserControlAlterado" />

    <ContentControl x:Name="ContentArea" Grid.Row="1">
        <local:HomePage />
    </ContentControl>
</Grid>

Mainwindow.Cs

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void Menu_OnUserControlAlterado(UserControl control)
    {
        ContentArea.Content = control;
    }
}

Menu.xaml

 <StackPanel Orientation="Horizontal">
    <Button x:Name="BotaoHome" Content="Home" Height="50" Width="100" Click="BotaoHome_Click" />
    <Button x:Name="BotaoListaUsuarios" Content="Lista Usuários" Height="50" Width="100" Click="BotaoListaUsuarios_Click"/>
 </StackPanel>

Menu.Cs

public partial class Menu : UserControl
{
    public Menu()
    {
        InitializeComponent();
    }

    public delegate void UserControlAlterado(UserControl control);
    public event UserControlAlterado OnUserControlAlterado;

    private void BotaoHome_Click(object sender, RoutedEventArgs e)
    {
        OnUserControlAlterado?.Invoke(new HomePage());
    }

    private void BotaoListaUsuarios_Click(object sender, RoutedEventArgs e)
    {
        OnUserControlAlterado?.Invoke(new ListaUsuarios());
    }
}