question

tedteder-2105 avatar image
0 Votes"
tedteder-2105 asked PeterFleischer-3316 answered

WPF Tabcontrol: How to load multiple Tabitem from different view

Suppose this code:


<TabControl>
            <TabItem>
                <Label Content="tab1"/>
            </TabItem>
            <TabItem>
                <Label Content="tab2"/>
            </TabItem>
            <TabItem>
                <Label Content="tab3"/>
            </TabItem>
</TabControl>


How can I extract tab2 and tab3 to a different xaml file and the result be something like this:

<TabControl>
            <TabItem>
                <Label Content="tab1"/>
            </TabItem>
            <views:MyView/>
</TabControl>


where MyView is something like:

<UserControl x:Class="WpfApp3.MyView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WpfApp3"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    
    <TabItem>
        <Label Content="tab2"/>
    </TabItem>
    <TabItem>
        <Label Content="tab3"/>
    </TabItem>
    
</UserControl>

dotnet-csharpwindows-wpf
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

HuiLiu-MSFT avatar image
0 Votes"
HuiLiu-MSFT answered HuiLiu-MSFT edited

It's difficult to set multiple TabItems in a single xaml.
If you just want to make your code more manageable, then I recommend defining the data for each tab in the user control, but still have the TabItem in the main tab control.
You could decompose the tab content into UserControl:

 <UserControl x:Class="TabControlItemFromDifferentView.View1"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
              xmlns:local="clr-namespace:TabControlItemFromDifferentView"
              mc:Ignorable="d" 
              d:DesignHeight="450" d:DesignWidth="800">
     <Grid>
         <Label Content="tab1"/>
     </Grid>
 </UserControl>

If you want to include a TabItem in a user control, you can do so by first creating the user control and then changing the type of the user control to the TabItem type (make sure in the xaml root node and in the code behind).
The "User Control" for each TabItem1 is TabItem type:

 <TabItem x:Class="TabControlItemFromDifferentView.View2"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
              xmlns:local="clr-namespace:TabControlItemFromDifferentView"
              mc:Ignorable="d" 
              d:DesignHeight="450" d:DesignWidth="800">
     <Grid>
         <TextBlock Text="Tab Data" />
     </Grid>
 </TabItem>

Code behind:

  public partial class View2 : TabItem
   {
     public View2()
     {
       InitializeComponent();
     }
   }

MainWindow.xaml:

 <Grid>
         <TabControl>
             <TabItem >
                 <local:View1/>
             </TabItem>
             <local:View2 Header="tab2"/>
               
             <TabItem >
                 <Label Content="tab3"/>
             </TabItem>
         </TabControl>
            
     </Grid>

Or you can see if the solution here works for you.


If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.


· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi,@tedteder-2105. Is there some update to the question? Did my answer solve your problem? If so, you could accept it as the answer. It's helpful for community members with related questions.

0 Votes 0 ·
PeterFleischer-3316 avatar image
0 Votes"
PeterFleischer-3316 answered

Hi,
try following demo. You can add TabItem via code or from XAML-file.

MainWindow

 <Window x:Class="WpfApp1.Window019"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:local="clr-namespace:WpfApp019"
         mc:Ignorable="d"
         Title="Window019" Height="450" Width="800">
   <Window.DataContext>
     <local:ViewModel/>
   </Window.DataContext>
   <Grid>
     <TabControl ItemsSource="{Binding TabItems}"/>
   </Grid>
 </Window>

ViewModel

 using System.Collections.Generic;
 using System.IO;
 using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Markup;
    
 namespace WpfApp019
 {
   public class ViewModel
   {
     public ViewModel() => AddTabItems();
    
     public List<TabItem> TabItems { get; set; } = new List<TabItem>();
    
     private void AddTabItems()
     {
       TabItems.Add(new TabItem() { Header = "tab1", Content = new TextBlock() { Text = "Tab Data 1" } });
       using (Stream rdr = new FileStream("Window019TabItem.xaml", FileMode.Open)) TabItems.Add((TabItem)XamlReader.Load(rdr));
     }
   }
 }

XAML TabItem

 <TabItem xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
          xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
          xmlns:local="clr-namespace:WpfApp1"
          mc:Ignorable="d" 
          d:DesignHeight="450" d:DesignWidth="800"
          Header="tab2"             >
   <Grid>
     <TextBlock Text="Tab Data 2" />
   </Grid>
 </TabItem>


5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.