WPF: How to handle multi-XAML UIs? (Follow-Up)

Question

This is a continuation of my previous thread:

WPF: How to handle multi-XAML UIs?

The proposed solution (thanks again, HighCore!!) is important and I added it to my growing coding arsenal. A User Control seems to be geared to controls that are fully debugged and ready (a read-only library, if you will) because no visual editing is provided.

What I need is to add a couple new XAML files (one for a DataGrid inside my left tab and another for the DataGrid inside my right tab). My main (caller) XAML will be very simple, so simple that maybe I can dispense from any editing:

<Tab>
    <Tab Selection 1>
        <DataGrid 1 in some other XAML file>
    </Tab Selection 1>
    <Tab Selection 2>
        <DataGrid 2 in some other XAML file>
    </Tab Selection 2>
<Tab>

I do, however, intend to perform lots of editing on the subordinate (called) XAML files and I need the graphical designer.

TIA

Answer 1

You seem to be approaching this all from a very, very inadequate perspective.

First of all, if you're using WPF, you really need to forget everything you might have learned from other technologies and understand and embrace The WPF Mentality.

In WPF, a UserControl is a reusable, encapsulated, XAML-defined "piece" of UI (you can think of it as a "widget").

A UserControl is made up of any number of UI elements:

• Layout elements such as Grid, DockPanel, StackPanel, WrapPanel, etc.
• Interactive User Interface elements such as TextBox, ComboBox, CheckBox, etc.
• Custom Controls
• Other UserControls.

The concept of View in the MVVM design pattern(*), is usually materialized in the form of UserControls or Windows in WPF.

*which you should read about and learn before you ever write a single line of code in WPF.

---

I do, however, intend to perform lots of editing on the subordinate (called) XAML files and I need the graphical designer.

If you need to modify a certain UserControl's layout, then you will have to modify the XAML that comprises it. You may choose to do so by opening the MyUserControl.xaml file in the Visual Studio WPF designer, however that is highly discouraged for reasons I'll not get into(*).

The recommended approach to do this is to edit the XAML file manually using the Visual Studio XAML editor Window:

*The pros/cons of using the VIsual Studio designer to create WPF UIs is discussed in the link.

---

Notice that, as discussed in the "WPF Mentality" post, the thought process to create WPF applications is inverse of what you do in other technologies, where you first define the UI and then try to adapt your logic and code to the UI.

In WPF, a ViewModel-First approach is generally preferred, where you define your Data Model, then you define the ViewModels that will expose the data and functionality expected in the UI, and finally create the XAML files for the UI.

These XAML files are usually heavily imbued with DataBinding, as opposed to a procedural approach of manually passing the data between the Model and the UI.

---

Bottom line:

To answer your overarching question: Yes, you define some UserControls in a WPF application project in Visual Studio, define the UI at the UserControl level by editing the UserControl's own XAML (as opposed to the XAML that belongs to the Window that will later contain this UserControl), then define a proper ViewModel for that UserControl (this could and should be done before writing any XAML), and then reuse that UserControl together with it's ViewModel throughout the application.

A ViewModel may be suitable for many different Views (UserControl or Window), but a View usually expects and works with a specific ViewModel.

Your Solution Explorer should be similar to this:

Where MainViewModel is the ViewModel for the MainWindow and MyViewModel is the ViewModel for the MyUserControl view.