WPF Tabcontrol Resizing Issue

Question

Hi All, I have a Tabcontrol inside grid which is inside WPF page. I want Tabcontrol to resize to complete width and height of page. I have set grid height and width to "*" and horizontalalignment and verticalalignment of tabcontrol to "stretch" but not able to achieve the same. Please advise how can I achieve the same ASAP. Regards,Pratham

Answer 1

Hi,@Pratham Jain.Welcome Microsoft Q&A.

I tested it with the following code and it works fine. You could try to refer to the following code.

<Page x:Class="TabControlDemo.Page1"
     ...
      d:DesignHeight="450" d:DesignWidth="800"
      Title="Page1">

    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <TabControl HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="AliceBlue">
            <TabItem Header="item1"/>
            <TabItem Header="item2"/>
            <!-- TabItems go here -->
        </TabControl>
    </Grid>
</Page>

MainWindow.xaml:

<Window x:Class="TabControlDemo.MainWindow"
       
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Frame x:Name="MainFrame" NavigationUIVisibility="Hidden"/>
    </Grid>
</Window>

MainWindow.xaml.cs:

 public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            MainFrame.Navigate(new Uri("Page1.xaml", UriKind.Relative));
        }
    }

If you still have issues, please show sample code that reproduces your issue and screenshots describing actual and expected results.

---

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.

Answer 2

If the grid does not have columns and rows, then it should work without additional attributes:

<Page . . .>
    <Grid>
        <TabControl>
           . . .
        </TabControl>
    </Grid>
</Page>

Answer 3

Hi @Hui Liu-MSFT ,

I have referred the code you have shared but it's not working for me. So, I have updated my code to below to make it work:

<Grid>     
<Grid.RowDefinitions>         
<RowDefinition Height="*"></RowDefinition>     </Grid.RowDefinitions>     
<Grid.ColumnDefinitions>         
<ColumnDefinition Width="*"></ColumnDefinition>     </Grid.ColumnDefinitions>     
<TabControl>
<TabItem Header="TabItem1">
<Grid Height="{Binding Path=ActualHeight, RelativeSource={RelativeSource FindAncestor, AncestorType=Grid}}" Width="{Binding Path=ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType=Grid}}">
.......
.......
</Grid>
</TabItem>

</TabControl>

Please let me know if there is any other better way.

Regards,

Pratham