Window vs Page vs UserControl untuk navigasi WPF?


192

Saat ini saya sedang menulis aplikasi desktop, tetapi sepertinya saya tidak bisa mengerti apa yang harus digunakan ketika mengarahkan seseorang ke bagian baru aplikasi.

Pilihan saya tampaknya

  • Jendela
  • Halaman
  • UserControl

tapi saya tidak mengerti apa perbedaan di antara mereka, dan kapan saya harus menggunakan masing-masing.

Bisakah seseorang menjelaskan perbedaannya untuk saya, dan memberikan contoh situasi / aplikasi apa yang Anda gunakan masing-masing?

Jawaban:


337

Sebuah Jendela objek hanya apa yang terdengar seperti: a nya baru Windowuntuk aplikasi Anda. Anda harus menggunakannya ketika Anda ingin memunculkan jendela yang sama sekali baru. Saya tidak sering menggunakan lebih dari satu Windowdi WPF karena saya lebih suka meletakkan konten dinamis di Window utama saya yang berubah berdasarkan tindakan pengguna.

Sebuah halaman adalah halaman dalam jendela Anda. Itu sebagian besar digunakan untuk sistem berbasis web seperti XBAP, di mana Anda memiliki jendela browser tunggal dan halaman yang berbeda dapat di-host di jendela itu. Itu juga dapat digunakan dalam Aplikasi Navigasi seperti kata sellmeadog .

Sebuah UserControl adalah yang dibuat pengguna kontrol reusable yang dapat Anda tambahkan ke UI Anda dengan cara yang sama Anda akan menambahkan kontrol lainnya. Biasanya saya membuat UserControlketika saya ingin membangun beberapa fungsionalitas khusus (misalnya, a CalendarControl), atau ketika saya memiliki sejumlah besar kode XAML terkait, seperti Viewsaat menggunakan pola desain MVVM.

Saat bernavigasi antar windows, Anda cukup membuat Windowobjek baru dan menunjukkannya

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

tetapi seperti yang saya katakan di awal jawaban ini, saya lebih suka untuk tidak mengelola banyak jendela jika memungkinkan.

Metode navigasi pilihan saya adalah untuk membuat beberapa area konten dinamis menggunakan a ContentControl, dan mengisi itu dengan UserControlberisi apa pun tampilan saat ini.

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

dan dalam acara navigasi Anda, Anda dapat mengaturnya menggunakan

ContentArea.Content = new MyUserControl();

Tetapi jika Anda bekerja dengan WPF, saya sangat merekomendasikan pola desain MVVM. Saya punya yang sangat mendasar di blog saya yang menggambarkan bagaimana Anda menavigasi menggunakan MVVM, menggunakan pola ini:

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

Tangkapan Layar1 Tangkapan layar2


Saya punya pertanyaan, MVVM dari apa yang bisa saya katakan tampaknya berfungsi baik dengan kumpulan data, tetapi bagaimana dengan bentuk statis seperti misalnya formulir entri untuk audit. Haruskah saya menggunakan halaman atau kontrol pengguna untuk halaman statis?
Herrozerro

2
@Herrozerro Jika saya ingin membuat formulir Audit menggunakan MVVM, saya akan memiliki yang AuditViewModelberisi semua data dan fungsionalitas untuk formulir, dan saya akan menariknya menggunakan AuditViewUserControl, atau hanyaDataTemplate
Rachel

1
Terima kasih! Sebenarnya Setelah melalui blog Anda dan beberapa situs lainnya, saya memiliki pemahaman yang lebih baik tentang cara kerja MVVM.
Herrozerro

1
@Herrozerro ViewModelBiasanya dibangun untuk View, sedangkan Modelsobjek data dan kelas ("blok bangunan") digunakan oleh aplikasi Anda ( ViewModels)
Rachel

1
@ GTS13 Ya saya sering melakukannya. Saya mengikat TabControl.ItemsSourceke kumpulan objek, dan menggunakan DataTemplates untuk memberi tahu WPF cara menggambar setiap jenis objek pada setiap tab. Biasanya kira-kira seperti ini
Rachel

13
  • Jendela itu seperti Windows.Forms.Form, jadi hanya jendela baru
  • Halaman tersebut, menurut dokumentasi online :

    Meringkas halaman konten yang dapat dinavigasi dan dihosting oleh Windows Internet Explorer, NavigationWindow, dan Frame.

    Jadi pada dasarnya Anda menggunakan ini jika Anda memvisualisasikan beberapa konten HTML

  • UserControl adalah untuk kasus-kasus ketika Anda ingin membuat beberapa komponen yang dapat digunakan kembali (tetapi bukan komponen mandiri) untuk menggunakannya dalam berbagai macamWindows


Terima kasih atas jawaban Anda. Jadi misalnya jika Anda membuat aplikasi yang memiliki tombol di sebelah kiri tetapi Anda ingin melihat konten di dalam tombol-tombol ini di sisi kanan Anda akan menggunakan kontrol pengguna?
Steve

@Steve: gunakan UserControldalam kasus di mana Anda berpikir set kontrol yang sama yang akan Anda gunakan pada jendela ini juga akan Anda gunakan pada jendela lain, jadi alih-alih menulis kode ganda, buat saja UserControl, tetapi jika tidak, cukup taruh kontrol untuk visualisasi dari data Anda pada Windowdirinya sendiri, di sebelah kanan dari tombol yang Anda sebutkan.
Tigran

6
Ada satu lagi item yang saya pikir harus ditambahkan: DataTemplates. Ini digunakan ketika Anda ingin memberi tahu WPF cara menggambar item dalam lingkup tertentu. Misalnya, jika Anda ingin menggambar Anda Buttonsmenjadi lingkaran, Anda bisa menggunakan DataTemplatea UserControl. Saya biasanya menggunakan UserControlsketika saya ingin kontrol baru dengan fungsinya sendiri, atau ketika saya memiliki banyak XAML untuk satu komponen, seperti untuk a View. Untuk bit XAML yang lebih kecil yang tidak memerlukan fungsionalitas khusus, Anda harus menggunakan DataTemplatealih - alih membuatUserControl
Rachel

3
Secara umum konten a Pagebukan HTML tetapi XAML. Namun, a Pageterikat pada kerangka navigasi yang secara konseptual mirip dengan cara navigasi dilakukan di browser web. (Dan halaman bahkan dapat di-host di browser jika aplikasi tersebut adalah aplikasi XBAP.)
Martin Liversage

6

Semua tergantung pada aplikasi yang Anda coba bangun. Gunakan Windows jika Anda sedang membangun aplikasi berbasis dialog. Gunakan Pages jika Anda sedang membangun aplikasi berbasis navigasi .UserControls akan bermanfaat terlepas dari arah yang Anda tuju karena Anda dapat menggunakannya di Windows dan Halaman.

Tempat yang baik untuk mulai menjelajah ada di sini: http://windowsclient.net/learn


5

Kami biasanya menggunakan One Main Windowuntuk aplikasi dan windows lain dapat digunakan dalam situasi seperti ketika Anda membutuhkan popup karena alih-alih menggunakan kontrol popup di XAML yang tidak terlihat, kita dapat menggunakan Window yang terlihat pada waktu desain sehingga akan mudah bekerja dengan

di sisi lain kami menggunakan banyak halaman untuk bernavigasi dari satu layar ke yang lain seperti layar manajemen pengguna ke Layar Pesanan dll. Di Jendela utama kita dapat menggunakan Framekontrol untuk navigasi seperti di bawah 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");
        }
    }

Itu salah satu cara melakukannya. Kita juga dapat menggunakan Kontrol Tab alih-alih Fram dan Tambahkan halaman ke sana menggunakan Kamus sambil menambahkan memeriksa halaman baru jika kontrol sudah ada maka hanya menavigasi jika tidak menambah dan menavigasi. Saya harap itu akan membantu seseorang


Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.