Janela x Página x UserControl para navegação no WPF?

192

No momento, estou escrevendo um aplicativo de desktop, mas não consigo entender o que usar ao redirecionar alguém para uma nova seção do aplicativo.

Minhas opções parecem ser

  • Janela
  • Página
  • UserControl

mas não entendo qual é a diferença entre eles e quando devo usar cada um.

Alguém poderia explicar as diferenças para mim e dar um exemplo de quais situações / aplicativos você pode usar cada um?

Steve
fonte

Respostas:

337

Um objeto Window é exatamente o que parece: é um novo Windowpara o seu aplicativo. Você deve usá-lo quando desejar abrir uma janela totalmente nova. Geralmente não uso mais de um Windowno WPF porque prefiro colocar conteúdo dinâmico na minha janela principal que muda com base na ação do usuário.

Uma página é uma página dentro da sua janela. É usado principalmente para sistemas baseados na Web como um XBAP, onde você tem uma única janela do navegador e páginas diferentes podem ser hospedadas nessa janela. Também pode ser usado em aplicativos de navegação, como o sellmeadog disse .

Um UserControl é um controle reutilizável criado pelo usuário que você pode adicionar à sua interface do usuário da mesma maneira que adicionaria qualquer outro controle. Geralmente, eu crio um UserControlquando quero criar alguma funcionalidade personalizada (por exemplo, a CalendarControl) ou quando tenho uma grande quantidade de código XAML relacionado, como um Viewao usar o padrão de design MVVM.

Ao navegar entre janelas, você pode simplesmente criar um novo Windowobjeto e mostrá-lo

var NewWindow = new MyWindow();
newWindow.Show();

mas como eu disse no começo desta resposta, prefiro não gerenciar várias janelas, se possível.

Meu método preferido de navegação é criar uma área de conteúdo dinâmico usando a ContentControle preenchê-la com uma que UserControlcontenha a visualização atual.

<Window x:Class="MyNamespace.MainWindow" ...>
    <DockPanel>
        <ContentControl x:Name="ContentArea" />
    </DockPanel>
</Window>

e no seu evento de navegação, você pode simplesmente configurá-lo usando

ContentArea.Content = new MyUserControl();

Mas se você estiver trabalhando com o WPF, recomendo o padrão de design do MVVM. Eu tenho um exemplo muito básico no meu blog que ilustra como você navegaria usando o MVVM, usando este padrão:

<Window x:Class="SimpleMVVMExample.ApplicationView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:SimpleMVVMExample"
        Title="Simple MVVM Example" Height="350" Width="525">

   <Window.Resources>
      <DataTemplate DataType="{x:Type local:HomeViewModel}">
         <local:HomeView /> <!-- This is a UserControl -->
      </DataTemplate>
      <DataTemplate DataType="{x:Type local:ProductsViewModel}">
         <local:ProductsView /> <!-- This is a UserControl -->
      </DataTemplate>
   </Window.Resources>

   <DockPanel>
      <!-- Navigation Buttons -->
      <Border DockPanel.Dock="Left" BorderBrush="Black"
                                    BorderThickness="0,0,1,0">
         <ItemsControl ItemsSource="{Binding PageViewModels}">
            <ItemsControl.ItemTemplate>
               <DataTemplate>
                  <Button Content="{Binding Name}"
                          Command="{Binding DataContext.ChangePageCommand,
                             RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
                          CommandParameter="{Binding }"
                          Margin="2,5"/>
               </DataTemplate>
            </ItemsControl.ItemTemplate>
         </ItemsControl>
      </Border>

      <!-- Content Area -->
      <ContentControl Content="{Binding CurrentPageViewModel}" />
   </DockPanel>
</Window>

Captura de tela1 Captura de tela2

Rachel
fonte
Eu tenho uma pergunta, o MVVM, pelo que posso dizer, parece funcionar bem com os conjuntos de dados, mas o que dizer de formulários estáticos como, por exemplo, um formulário de entrada para uma auditoria. Devo usar uma página ou controle de usuário para páginas estáticas?
Herrozerro 12/06
2
@Herrozerro Se eu quisesse fazer um formulário de Auditoria usando MVVM, eu tenho um AuditViewModelcontendo todos os dados e funcionalidade para a forma, e eu desenhá-lo usando um AuditViewUserControl, ou apenas umDataTemplate
Rachel
1
Obrigado! Na verdade, depois de percorrer seu blog e alguns outros sites, entendo melhor como o MVVM funciona.
23813 Herrozerro
1
@Herrozerro A ViewModelé normalmente construído para o View, enquanto o Modelssão os objetos de dados e classes ( "blocos de construção") utilizados pelo seu aplicativo ( ViewModels)
Rachel
1
@ GTS13 Sim, faço isso com frequência. Vinculo o TabControl.ItemsSourcea uma coleção de objetos e uso DataTemplates para informar ao WPF como desenhar cada tipo de objeto em cada guia. Geralmente algo parecido com isto
Rachel
13
  • Janela é como Windows.Forms.Form, então apenas uma nova janela
  • A página é, de acordo com a documentação online :

    Encapsula uma página de conteúdo que pode ser navegada e hospedada no Windows Internet Explorer, NavigationWindow e Frame.

    Então você basicamente usa isso se visualizar algum conteúdo HTML

  • O UserControl é para casos em que você deseja criar algum componente reutilizável (mas não autônomo) para usá-lo em váriosWindows

Tigran
fonte
Obrigado pela sua resposta. Por exemplo, se você estivesse criando um aplicativo com botões à esquerda, mas desejasse ver o conteúdo desses botões no lado direito, usaria um controle de usuário?
Steve
@Steve: use UserControlno caso de você achar que o mesmo conjunto de controles que você usará nesta janela, você também usará em outro, então, em vez de escrever código duplo, basta criar um UserControl, mas se não, basta colocar controles para visualização de seus dados por Windowsi só, no lado direito dos botões que você mencionou.
Tigran
6
Há mais um item que eu acho que deve ser adicionado: DataTemplates. Eles são usados ​​quando você deseja informar ao WPF como desenhar um item dentro de um escopo específico. Por exemplo, se você quiser desenhar Buttonscírculos redondos, basta usar a em DataTemplatevez de a UserControl. Geralmente uso UserControlsquando quero um novo controle com sua própria funcionalidade ou quando tenho muito XAML para um único componente, como para a View. Para pedaços menores de XAML que não exigem qualquer funcionalidade especial, você deve usar uma DataTemplatevez de criar umUserControl
Rachel
3
Em geral, o conteúdo de a Pagenão é HTML, mas XAML. No entanto, a Pageestá vinculado à estrutura de navegação que é conceitualmente semelhante à maneira como a navegação é feita em um navegador da web. (E as páginas podem até ser hospedadas em um navegador se o aplicativo for um aplicativo XBAP).
Martin Liversage 31/08/2012
6

Tudo depende do aplicativo que você está tentando criar. Use Windows se você estiver criando um aplicativo baseado em diálogo. Use Pages se você estiver criando um aplicativo baseado em navegação . UserControls será útil independentemente da direção que você seguir, pois poderá usá-los no Windows e no Pages.

Um bom lugar para começar a explorar é aqui: http://windowsclient.net/learn

sellmeadog
fonte
5

Geralmente usamos o One Main Windowpara o aplicativo e outras janelas podem ser usadas em situações como quando você precisa de pop-ups porque, em vez de usar controles pop-up em XAML que não são visíveis, podemos usar uma janela que é visível no tempo de design, para que seja fácil trabalhar com

por outro lado, usamos muitas páginas para navegar de uma tela para outra, como a tela de gerenciamento de usuários, para a tela de pedidos, etc. Na janela principal, podemos usar o Framecontrole da navegação, como abaixo de XAML

    <Frame Name="mainWinFrame" NavigationUIVisibility="Hidden"  ButtonBase.Click="mainWinFrame_Click">
    </Frame>

C #

     private void mainWinFrame_Click(object sender, RoutedEventArgs e)
    {
        try
        {
            if (e.OriginalSource is Button)
            {
                Button btn = (Button)e.OriginalSource;

                if ((btn.CommandParameter != null) && (btn.CommandParameter.Equals("Order")))
                {

                    mainWinFrame.Navigate(OrderPage);
                }
            }
        }
        catch (Exception ex)
        {
            MessageBox.Show(ex.Message, "Error");
        }
    }

Essa é uma maneira de fazer isso Também podemos usar um controle Tab em vez de Fram e adicionar páginas a ele usando um dicionário enquanto adicionamos uma nova verificação de página, se o controle já existir, apenas navegue, caso contrário, adicione e navegue. Espero que ajude alguém

dnxit
fonte