Make Width and Height of Grid inside TabControl Dynamic

Question

I am working on a WPF application. There are lots of tabs in my app. Each tab contains a grid.My app is Page based and there is no window. There are two pages in my app, One is main page which Xaml is this MainPage.xaml

<Page x:Class="App.MainPage"
  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" 
  mc:Ignorable="d" 
  d:DesignHeight="300" d:DesignWidth="300"
Title="MainPage" Height="600" Width="1000" WindowHeight="600" 
  WindowWidth="1000" WindowTitle="CSP - LOGIN" Background="Black"></Page>

And Page2.xaml

<Page x:Class="App.Page2"
          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">
<Grid Background="Black">
    <TabControl HorizontalAlignment="Left" Height="100" Margin="27,63,0,0" VerticalAlignment="Top" Width="100">
                <TabItem Header="TabItem">
                    <Grid Background="#FFE5E5E5">
<Grid HorizontalAlignment="Left" Height="410.5" Margin="10,19.54,0,0" VerticalAlignment="Top" Width="766">
<Button Content="Add Item" HorizontalAlignment="Left" Margin="10,135.748,0,0" VerticalAlignment="Top" Width="75"/>
                        <Button Content="Remove Item" HorizontalAlignment="Left" Margin="10,177.208,0,0" VerticalAlignment="Top" Width="75"/>
                        <Button Content="Update Item" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="10,217.168,0,0"/>
</Grid>
</Grid>
                </TabItem>
                <TabItem Header="TabItem">
                    <Grid Background="#FFE5E5E5">
<Grid HorizontalAlignment="Left" Height="410.5" Margin="10,19.54,0,0" VerticalAlignment="Top" Width="766">
<Button Content="Add Item" HorizontalAlignment="Left" Margin="10,135.748,0,0" VerticalAlignment="Top" Width="75"/>
                        <Button Content="Remove Item" HorizontalAlignment="Left" Margin="10,177.208,0,0" VerticalAlignment="Top" Width="75"/>
                        <Button Content="Update Item" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="10,217.168,0,0"/>
</Grid>
</Grid>
                </TabItem>
                <TabItem Header="TabItem" HorizontalAlignment="Left" Height="19.96" VerticalAlignment="Top" Width="96">
                    <Grid Background="#FFE5E5E5">
<Grid HorizontalAlignment="Left" Height="410.5" Margin="10,19.54,0,0" VerticalAlignment="Top" Width="766">
<Button Content="Add Item" HorizontalAlignment="Left" Margin="10,135.748,0,0" VerticalAlignment="Top" Width="75"/>
                        <Button Content="Remove Item" HorizontalAlignment="Left" Margin="10,177.208,0,0" VerticalAlignment="Top" Width="75"/>
                        <Button Content="Update Item" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="10,217.168,0,0"/>
</Grid>
</Grid>
                </TabItem>
            </TabControl>
</Grid>

    </Page>

As you can see each tab have two grid each. One Grid is generated by default and other is added by me to make items together.

I tried SizeToContent and other functions to get width and height dynamically when changed but when i add SizeToContent it gives error and SizeToContent dont show in code hinting. It gives error that it is no accessible.

I want my content in grid to be dynamic so if window size is changed there size also change.

Answer 1

I'll explain a few behavioural aspects of control properties:

• Defining the Width property on a control causes it to be fixed horizontally.
• Defining the Height property on a control causes it to be fixed vertically.
• Defining the HorizontalAlignment property on a control has various behaviour, depending on the value:
  1. Stretch: Default Value. Causes the control to stretch horizontally in relation to its parent container. This option has no effect when the Width property has been set.
  2. Left: Aligns the control towards the left within its parent container.
  3. Center: Centers the control horizontally within its parent container.
  4. Right: Align the control towards the right within its parent container.
• Defining the VerticalAlignment property on a control has various behaviour, dpending on the value:
  1. Stretch: Default Value. Causes the control to stretch vertically in relation to its parent container. This option has no effect when the Height property has been set.
  2. Top: Aligns the control towards the top within its parent container.
  3. Center: Centers the control vertically within its parent container.
  4. Bottom: Aligns the control towards the bottom within its parent container.
• Defining the Margin property on a control will position itself relatively depending on the type of parent container, which is too extensive to explain here.

It's unclear to me how you wish to position your controls, but to answer your question: you may remove the Width, Height, HorizontalAlignment and VerticalAlignment of a control to allow it to stretch horizontally and vertically in your window. For example:

<Page x:Class="App.Page2"
    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">
    <Grid
        Background="Black">
        <TabControl>
            <TabItem
                Header="TabItem">
                <Grid
                    Background="#FFE5E5E5">
                    <Button
                        Content="Add Item"
                        HorizontalAlignment="Left"
                        Margin="10,135.748,0,0"
                        VerticalAlignment="Top"
                        Width="75" />
                    <Button
                        Content="Remove Item"
                        HorizontalAlignment="Left"
                        Margin="10,177.208,0,0"
                        VerticalAlignment="Top"
                        Width="75" />
                    <Button
                        Content="Update Item"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Top"
                        Width="75"
                        Margin="10,217.168,0,0" />
                </Grid>
            </TabItem>
            <TabItem
                Header="TabItem">
                <Grid
                    Background="#FFE5E5E5">
                    <Button
                        Content="Add Item"
                        HorizontalAlignment="Left"
                        Margin="10,135.748,0,0"
                        VerticalAlignment="Top"
                        Width="75" />
                    <Button
                        Content="Remove Item"
                        HorizontalAlignment="Left"
                        Margin="10,177.208,0,0"
                        VerticalAlignment="Top"
                        Width="75" />
                    <Button
                        Content="Update Item"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Top"
                        Width="75"
                        Margin="10,217.168,0,0" />
                </Grid>
            </TabItem>
            <TabItem
                Header="TabItem">
                <Grid
                    Background="#FFE5E5E5">
                    <Button
                        Content="Add Item"
                        HorizontalAlignment="Left"
                        Margin="10,135.748,0,0"
                        VerticalAlignment="Top"
                        Width="75" />
                    <Button
                        Content="Remove Item"
                        HorizontalAlignment="Left"
                        Margin="10,177.208,0,0"
                        VerticalAlignment="Top"
                        Width="75" />
                    <Button
                        Content="Update Item"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Top"
                        Width="75"
                        Margin="10,217.168,0,0" />
                </Grid>
            </TabItem>
        </TabControl>
    </Grid>
</Page>

Just play around with these properties and you'll get the hang of it soon.