WPF: How to handle multi-XAML UIs?

Question

I don't know about you folks, but I suffer from a severe case of Deep Indentation Allergy. I can barely manage all those indented XAML blocks.

My current application is based on a large DataGrid with of kinds of fancy features (with more to come) but I would like to add a couple a tabs on top of the screen in order to have an additional, second very similar DataGrid.

I would like to implement it as follow:

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

So, I would have a small XAML file which controls 2 much bigger XAML files.

That should be doable, right?

Can a kind soul provide the details?

TIA.

I hope this is not an `XY Problem!` – Travis Banger Dec 06 '13 at 16:32 — Travis Banger, Dec 06 '13 at 16:32

Federico Berasategui · Accepted Answer · 2013-12-06T16:49:52.820

Simply create a new UserControl:

1 - Right Click your Project in Solution Explorer, select Add -> New Item:

enter image description here

2 - Select WPF UserControl:

enter image description here

3: Create your DataGrid inside the UserControl:

<UserControl x:Class="MyApp.MyUserControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <DataGrid>
      <!-- lots of XAML ... -->
   </DataGrid>
</UserControl>

4: Put the UserControl inside the TabItem:

You will need to Import your Namespace, like so:

<Window ....
        xmlns:local="clr-namespace:MyApp">

    <TabControl>
      <TabItem>
         <local:MyUserControl/>
      </TabItem>
    </TabControl>
</Window>

WPF: How to handle multi-XAML UIs?

1 Answers1

Linked