Fenster vs Seite vs UserControl für die WPF-Navigation?

192

Ich schreibe gerade eine Desktop-Anwendung, aber ich kann mir anscheinend nicht vorstellen, was ich verwenden soll, wenn ich jemanden in einen neuen Abschnitt der Anwendung umleitung.

Meine Optionen scheinen zu sein

  • Fenster
  • Seite
  • Nutzerkontrolle

aber ich verstehe nicht, was der Unterschied zwischen ihnen ist und wann ich jeden verwenden sollte.

Könnte mir jemand die Unterschiede erklären und ein Beispiel geben, für welche Situationen / Anwendungen Sie die einzelnen verwenden können?

Steve
quelle

Antworten:

337

Ein Window- Objekt ist genau das, wonach es sich anhört: Es ist neu Windowfür Ihre Anwendung. Sie sollten es verwenden, wenn Sie ein völlig neues Fenster öffnen möchten. Ich benutze nicht oft mehr als eineWindow in WPF da ich lieber dynamischen Inhalt in mein Hauptfenster einfügen , der sich aufgrund von Benutzeraktionen ändert.

Eine Seite ist eine Seite in Ihrem Fenster. Es wird hauptsächlich für webbasierte Systeme wie XBAP verwendet, bei denen Sie über ein einziges Browserfenster verfügen und in diesem Fenster verschiedene Seiten gehostet werden können. Es kann auch in Navigationsanwendungen verwendet werden, wie Sellmeadog sagte .

Ein UserControl ist ein wiederverwendbares, vom Benutzer erstelltes Steuerelement, das Sie Ihrer Benutzeroberfläche genauso hinzufügen können wie jedes andere Steuerelement. Normalerweise erstelle ich eine, UserControlwenn ich einige benutzerdefinierte Funktionen einbauen möchte (z. B. a CalendarControl) oder wenn ich eine große Menge verwandten XAML-Codes habe, z. B. wenn ich Viewdas MVVM-Entwurfsmuster verwende.

Beim Navigieren zwischen Fenstern können Sie einfach ein neues WindowObjekt erstellen und anzeigen

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

Aber wie ich zu Beginn dieser Antwort sagte, ziehe ich es vor, wenn möglich nicht mehrere Fenster zu verwalten.

Meine bevorzugte Navigationsmethode besteht darin, einen dynamischen Inhaltsbereich mit a zu erstellen ContentControlund diesen mit a zu füllenUserControl füllen, der die aktuelle Ansicht enthält.

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

und in Ihrem Navigationsereignis können Sie es einfach mit einstellen

ContentArea.Content = new MyUserControl();

Wenn Sie jedoch mit WPF arbeiten, kann ich das MVVM-Entwurfsmuster nur empfehlen. Ich habe ein sehr einfaches Beispiel in meinem Blog , das zeigt, wie Sie mit MVVM mithilfe dieses Musters navigieren würden:

<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>

Screenshot1 Screenshot2

Rachel
quelle
Ich habe eine Frage, MVVM von dem, was ich sagen kann, scheint gut mit Datensätzen zu funktionieren, aber was ist mit statischen Formularen wie zum Beispiel einem Eingabeformular für ein Audit. Sollte ich eine Seite oder eine Benutzersteuerung für statische Seiten verwenden?
Herrozerro
2
@Herrozerro Wenn ich ein Audit-Formular mit MVVM erstellen wollte, hätte ich ein AuditViewModelFormular, das alle Daten und Funktionen für das Formular enthält, und ich würde es entweder mit einem AuditViewUserControl oder nur mit einemDataTemplate
Rachel
1
Vielen Dank! Nachdem ich Ihren Blog und einige andere Websites durchgesehen habe, habe ich ein besseres Verständnis dafür, wie MVVM funktioniert.
Herrozerro
1
@Herrozerro Das ViewModelwird normalerweise für das erstellt View, während das Modelsdie Datenobjekte und Klassen ("Bausteine") sind, die von Ihrer Anwendung ( ViewModels) verwendet werden
Rachel
1
@ GTS13 Ja das mache ich oft. Ich binde das TabControl.ItemsSourcean eine Sammlung von Objekten und verwende DataTemplates, um WPF mitzuteilen, wie jeder Objekttyp auf jeder Registerkarte gezeichnet werden soll. Regel etwas wie diese
Rachel
13
  • Fenster ist wie Windows.Forms.Form, also nur ein neues Fenster
  • Seite ist laut Online-Dokumentation :

    Verkapselt eine Seite mit Inhalten, die von Windows Internet Explorer, NavigationWindow und Frame navigiert und gehostet werden können.

    Sie verwenden dies also grundsätzlich, wenn Sie HTML-Inhalte visualisieren

  • UserControl ist für Fälle gedacht, in denen Sie eine wiederverwendbare Komponente (aber keine eigenständige) erstellen möchten, um sie in mehreren verschiedenen Komponenten zu verwendenWindows

Tigran
quelle
Vielen Dank für Ihre Antwort. Wenn Sie beispielsweise eine App mit Schaltflächen auf der linken Seite erstellen, aber den Inhalt dieser Schaltflächen auf der rechten Seite anzeigen möchten, würden Sie ein Benutzersteuerelement verwenden.
Steve
@Steve: Verwenden UserControlSie diese Option, wenn Sie der Meinung sind, dass die gleichen Steuerelemente, die Sie in diesem Fenster verwenden werden, auch in einem anderen Fenster verwendet werden. Erstellen Sie also anstelle von Doppelcode einfach ein UserControlSteuerelement, aber wenn nicht, setzen Sie einfach Steuerelemente zur Visualisierung von Ihre Daten befinden sich auf der Windowrechten Seite der Schaltflächen, die Sie eingegeben haben.
Tigran
6
Es gibt noch einen weiteren Punkt, der meiner Meinung nach hinzugefügt werden sollte : DataTemplates. Diese werden verwendet, wenn Sie WPF mitteilen möchten, wie ein Element innerhalb eines bestimmten Bereichs gezeichnet werden soll. Wenn Sie beispielsweise Ihre Buttonsrunden Kreise zeichnen möchten , können Sie einfach a DataTemplateanstelle von a verwenden UserControl. Ich verwende es normalerweise, UserControlswenn ich ein neues Steuerelement mit eigener Funktionalität möchte oder wenn ich viel XAML für eine einzelne Komponente habe, z. B. für a View. Für kleinere XAML-Bits, für die keine besonderen Funktionen erforderlich sind, sollten Sie eine verwenden, DataTemplateanstatt eine zu erstellenUserControl
Rachel
3
Im Allgemeinen ist der Inhalt von a Pagenicht HTML, sondern XAML. A Pageist jedoch in das Navigationsframework eingebunden, das konzeptionell der Navigation in einem Webbrowser ähnelt. (Und Seiten können sogar in einem Browser gehostet werden, wenn die Anwendung eine XBAP-Anwendung ist.)
Martin Liversage
6

Alles hängt von der App ab, die Sie erstellen möchten. Verwenden Sie Windows, wenn Sie eine dialogbasierte App erstellen. Verwenden Sie Pages, wenn Sie eine navigationsbasierte App erstellen .UserControls ist unabhängig von der Richtung, in die Sie gehen, nützlich, da Sie sie sowohl in Windows als auch in Pages verwenden können.

Ein guter Ort, um mit der Erkundung zu beginnen, ist hier: http://windowsclient.net/learn

sellmeadog
quelle
5

Normalerweise verwenden wir One Main Windowfür die Anwendung, und andere Fenster können in Situationen verwendet werden, in denen Sie Popups benötigen, da wir anstelle von Popup-Steuerelementen in XAML, die nicht sichtbar sind, ein Fenster verwenden können, das zur Entwurfszeit sichtbar ist, damit dies einfach ist arbeiten mit

Auf der anderen Seite verwenden wir viele Seiten, um von einem Bildschirm zum anderen zu navigieren, z. B. den Benutzerverwaltungsbildschirm zum Bestellbildschirm usw. Im Hauptfenster können wir die FrameSteuerung für die Navigation wie unter XAML verwenden

    <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");
        }
    }

Dies ist eine Möglichkeit. Wir können auch ein Tab-Steuerelement anstelle von Fram verwenden und Seiten mithilfe eines Wörterbuchs hinzufügen, während Sie eine neue Seite hinzufügen. Überprüfen Sie, ob das Steuerelement bereits vorhanden ist, und navigieren Sie nur, wenn Sie es hinzufügen und navigieren. Ich hoffe das hilft jemandem

dnxit
quelle