How to adjust control width and height according to windows width and height in WPF

Question

Hi I am new to WPF programming. I am having a window with its width and height according to my window width and height.

TblWind.Height = System.Windows.SystemParameters.FullPrimaryScreenHeight; //(768)
TblWind.Width = System.Windows.SystemParameters.FullPrimaryScreenWidth;   //(1024)

Now i am adding Grid inside this window but want to adjust its height and width on the basis of windows height and width ie 4 rows and each should take only 5% of windows height Similarly 2 columns each width should be 5% of windows column

<Grid.RowDefinitions>
        <RowDefinition  Height=".5*" ></RowDefinition>
        <RowDefinition Height=".5*"></RowDefinition>
        <RowDefinition Height=".5*"></RowDefinition>
        <RowDefinition Height=".5*"></RowDefinition>

    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width=".5*"></ColumnDefinition>
        <ColumnDefinition Width=".5*"></ColumnDefinition>


</Grid.ColumnDefinitions>
    <Label Grid.Row="0" Grid.Column="0" Content="Name:"></Label>
    <Label Grid.Row="1" Grid.Column="0" Content="Name:"></Label>
    <Label Grid.Row="2" Grid.Column="0" Content="Name:"></Label>
    <Label Grid.Row="3" Grid.Column="0" Content="Name:"></Label>
    <TextBox Grid.Row="0" Grid.Column="1" ></TextBox>
    <TextBox Grid.Row="1" Grid.Column="1" ></TextBox>
    <TextBox Grid.Row="2" Grid.Column="1" ></TextBox>
    <TextBox Grid.Row="3" Grid.Column="1" ></TextBox>
</Grid>

But it is dividing window width in 2 parts with each taking 50% of width.

Please help.

Answer 1

Your proportional sizing just means that all row heights and column heights will be the same. It's not a percentage of it's measured size.

ie

<RowDefinition Height="0.5*"/>
<RowDefinition Height-"0.5*"/>

Just means that 50% of the size of the first row is equal to 50% of the size of the second row. That is, their heights are equal.

No different than if you said:

<RowDefinition Height="2*"/>
<RowDefinition Height="2*"/>

just means that twice the size of the first row is equal to twice the size of the second row.

If you want to constrain your grid to the top 20% of your window height (4 * 5% = 20%) and the left-most 10% of your window width (2 * 5% = 10%), then force that in a Grid itself, and then you can just allow your rows and columns to all have equal sizing.

<Window>

    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

        <Grid.RowDefinitions>
            <RowDefinition Height="1*"/> <!-- 1/5th (20%) of the height -->
            <RowDefinition Height="4*"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"/> <!-- 1/10th (10%) of the width -->
            <ColumnDefinition Width="9*"/>
        </Grid.ColumnDefinitions>

        <!-- now we have a dedicated cell for your grid... -->
        <Grid Grid.Row="0" Grid.Column="0">

            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>

            <!-- duplicate your content here... -->

        </Grid>

    </Grid>

</Window>