Make TabItems Added Through C# Code Resize Automatically

Question

I am trying to make a program where tabs can be added via C# code. The code I used adds the tab correctly, but the contents are always centered. Below is the code I am using:

void AddTab(UserControl contents, string header)
    {
        UserControl tabContents = contents;
        tabContents.HorizontalAlignment = HorizontalAlignment.Stretch;
        tabContents.HorizontalContentAlignment = HorizontalAlignment.Stretch;
        tabContents.VerticalAlignment = VerticalAlignment.Stretch;
        tabContents.VerticalContentAlignment = VerticalAlignment.Stretch;
        tabContents.Margin = new Thickness(0, 20, 0, 19);
        Grid contentGrid = new Grid();
        contentGrid.HorizontalAlignment = HorizontalAlignment.Stretch;
        contentGrid.VerticalAlignment = VerticalAlignment.Stretch;
        contentGrid.Children.Add(tabContents);
        tabMain.Items.Add(new TabItem
        {
            Header = header,
            Content = contentGrid,
            HorizontalAlignment = HorizontalAlignment.Stretch,
            HorizontalContentAlignment = HorizontalAlignment.Stretch,
            VerticalAlignment = VerticalAlignment.Stretch,
            VerticalContentAlignment = VerticalAlignment.Stretch,
            IsSelected = true
        });
    }

The XAML for the UserControl I am trying to add is below (class names/URLs showing the name of my program and a news URL have been replaced with generic terms):

<UserControl x:Class="ClassName"
         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="namespace"
         mc:Ignorable="d" Width="840" Height="475">
<Grid Background="White">
    <Label Content="content" VerticalAlignment="Top" RenderTransformOrigin="0.132,0.192" HorizontalContentAlignment="Center" FontSize="24"/>
    <ListBox Height="397" Margin="0,68,0,0" VerticalAlignment="Top" Width="210" HorizontalAlignment="Left" HorizontalContentAlignment="Stretch" RenderTransformOrigin="0.366,0.527"/>
    <Label Content="Recent Projects:" HorizontalAlignment="Left" Margin="0,42,0,0" VerticalAlignment="Top"/>
    <WebBrowser Margin="0,42,0,0" Width="290" HorizontalAlignment="Right" Uid="url"/>

</Grid>

The UserControl resizes properly in the Designer, and the other tabs inside of my TabControl, as well as the TabControl itself, resize properly, but the new content does not. My TabControl code snippet is below:

<TabControl x:Name="tabMain" Margin="0,25,0,19" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
                <TabItem Header="TabItem">
                    <Grid Background="#FFE5E5E5"/>
                </TabItem>
                <TabItem Header="TabItem">
                    <Grid Background="#FFE5E5E5"/>
                </TabItem>
            </TabControl>

How can I make it so the contents of the tab added using the C# code are automatically resized when the main window is resized/maximized?

Answer 1

The UserControl doesn't resize because you fixed the width and height properties for the controls inside. You also define their positions via "Margin" which is not the best way to do it in WPF.

The proper way to set the relative positions of the controls is using Grid with Grid.RowDefinition and Grid.ColumnDefinition or StackPanels/DockPanel.

I changed the code you provided to make everything resize with the Window and added colored Borders to make it obvious:

code behind:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private int nbTest = 0;

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        this.nbTest++;
        this.AddTab(new UserControl1(), "header" + this.nbTest.ToString());
    }

    void AddTab(UserControl tabContent, string header)
    {
        tabContent.Margin = new Thickness(0, 20, 0, 19);
        //You don't need this part unless you intend to add more content to the Grid than just the UserControl
        /*Grid contentGrid = new Grid();
        contentGrid.HorizontalAlignment = HorizontalAlignment.Stretch;
        contentGrid.VerticalAlignment = VerticalAlignment.Stretch;
        contentGrid.Children.Add(tabContents);*/
    
        tabMain.Items.Add(new TabItem
        {
            Header = header,
            Content = tabContent,
            IsSelected = true
        });
    }
}

Xaml of the UserControl:

<UserControl x:Class="WpfApp19.UserControl1"
         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:WpfApp19"
         mc:Ignorable="d" 
         d:DesignHeight="450" d:DesignWidth="800">
<Grid Background="White">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Border BorderBrush="Blue" BorderThickness="1" Grid.Row="0">
        <!--If you remove the border, don't forget to put the Grid.Row="0" part on the Label -->
        <Label Content="Welcome to [program name]"/> HorizontalContentAlignment="Center" FontSize="24"/>
    </Border>
    <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Border BorderBrush="Green" BorderThickness="1" Grid.Column="0">
            <!--If you remove the border, don't forget to put the Grid.Column="0" part on the Grid -->
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <!--Instead of defining the rows for the Grid, you could place it in a StackPanel with an Orientation set to Vertical but the ListBox won't
                resize to fit the height available-->
                <Label Content="Recent Projects:" Grid.Row="0"/>
                <ListBox MinHeight="397" MinWidth="210" Grid.Row="1"/>
            </Grid>
        </Border>
        <Border BorderBrush="red" BorderThickness="1" Grid.Column="1">
            <!--If you remove the border, don't forget to put the Grid.Column="1" part on the WebBrowser -->
            <WebBrowser  Uid="url"/>
        </Border>

    </Grid>
</Grid>

This article explains how to set up a Layout pretty well: https://www.wpftutorial.net/LayoutProperties.html

Let me know if you have questions :)

Answer 2

Have you tried wrapping the elements inside a view box?

 <Viewbox>

        <TabControl x:Name="tabMain" Padding="1920, 1080, 2080, 1080"
                    Margin="0,25,0,19"
                    HorizontalContentAlignment="Stretch"
                    VerticalContentAlignment="Stretch">
            <TabItem Header="TabItem" Height="100" Width="500"
                     FontSize="60">
                <Grid Background="#FFE5E5E5"/>
            </TabItem>
            <TabItem Header="TabItem"
                     FontSize="60"
                     Height="100"
                     Width="500">
                <Grid Background="#FFE5E5E5"/>
            </TabItem>
        </TabControl>
    </Viewbox>

I've added some padding so it might look a little different. But from what I've tested this should resize the tab items when the user resizes the screen.

Thanks,

Also I'm quite new to SO and this is my 3rd answer here so if this doesn't work please tell me and I will delete it.