1

Uma janela com um grid, e com duas áreas de conteúdo, "ContentArea" e "ContentMenu".

O "ContentArea" inicia em branco, o "ContentMenu" inicia com os botões de Navegação, que fazem o "ContentArea" mudar seu conteúdo.
Em cada um desses "ContentXXXX" está alocando um UserControl.

Exemplo, inicia "ContentArea" chamando o UserControl homePage.xaml, e o "ContentMenu" chamando o UserControl menuPage.xaml, que tem um botão que troca o "ContentArea" de homePage.xaml para listaUsuarios.xaml.

Qual seria o código correto para fazer essa troca?

2
  • Existem várias formas de fazer isso. Está a usar o padrão MVVM? Usa algum framework que ajude a implementá-lo?
    – ramaral
    13/12/2016 às 15:16
  • Tentei implementar o padrão MVVM mas não achei nenhum tutorial fácil.. estou começando a pouco com essa linguagem, tive dificuldades para entender. Se souber de algum tutorial mais simples me avise.. kkkk 15/12/2016 às 16:33

2 Respostas 2

4

Como já tem uma resposta utilizando code-behind, vou dá uma solução utilizando MVVM.

A propriedade que você quer preencher se chama "content". Devemos conecta-la a uma propriedade da ViewModel que vai representar o UserControl. Primeiro vamos criar uma 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);
    }
}

Agora nos criamos nossa 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;
    }
}

E agora é só ligar os Bindings:

Na sua classe MainWindow:

public partial class MainWindow : Window
{

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

E o xaml:

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

Note que aqui é o botão do menu que vai preencher o ContentControl

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

Aqui é um exemplo bem simplista onde os botões já são predefinidos no menu, mas alterar este código para os dois lados do grid mudar de acordo com o contexto é bem simples. Segue a mesma mecânica. Se você está na duvida de como implementar a classe command, dê uma olhada nesse link:

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

1
3

Uma forma simples de resolver sem MVVM, é através da utilização de delegate e 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());
    }
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .