Having problems with "ColumnDefinitions"?

Question

I'm trying to make GUI calculator So i'm new in WPF and trying my best with adjust ColumnDefinitions

Source code:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="60"></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <TextBox FontSize="30" VerticalAlignment="Center" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Center" Width="460"></TextBox>
    </Grid>

</Window>

Have a look into screenshot:

Into my first i've inserted a TextBox and into second row would like to insert some Buttons of numbers there.. So, I'm troubling with them..

So tried this code:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="60"></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <TextBox FontSize="30" VerticalAlignment="Center" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Center" Width="460"></TextBox>
    </Grid>

</Window>

But there have something problem with Text box :(

Screenshot:

PLEASE HELP!

Answer 1

When you design your application, split UI into block. Eeach block will be a Grid wich can be split into other Grid. In your case, you want a block on the top (for the Texbox), and a block in the bottom which will be split later.

So, create your first Grid

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

</Grid>

Put a auto size for the top. The content will define the size. And put all size remaining for the other Grid ("*")

Now, you can put a Texbox on the top, and another Grid in the bottom :

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

    <TextBox Text="Some Text"/>

    <Grid Grid.Row="1">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

    </Grid>

</Grid>

For the Textboxproperties Grid.Row is 0, so you can forget it (unless you want to have a more readable code).

For for inside Grid, you must define Grid.Row="1" wich is the location into the parent Grid. In this Grid, I define 3 rows of the same height (remaining size divide by 3) and 3 colums of same width (remaining size divide by 3)

Answer 2

I would also prefer my answer to give here,

i did it by myself using <Grid Grid.Row="1"></Grid>!

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="60"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <TextBox FontSize="30" VerticalAlignment="Center" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Center" Width="460"></TextBox>

        <Grid Grid.Row="1">
            <Grid.RowDefinitions>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>

            <Button FontSize="30" Grid.Row="0" Grid.Column="0" Name="Number7">7</Button>
            <Button FontSize="30" Grid.Row="0" Grid.Column="1" Name="Number8">8</Button>
            <Button FontSize="30" Grid.Row="0" Grid.Column="2" Name="Number9">9</Button>
            <Button FontSize="30" Grid.Row="1" Grid.Column="2" Name="Number6">6</Button>
            <Button FontSize="30" Grid.Row="1" Grid.Column="1" Name="Number5">5</Button>
            <Button FontSize="30" Grid.Row="1" Grid.Column="0" Name="Number4">4</Button>
            <Button FontSize="30" Grid.Row="2" Grid.Column="2" Name="Number3">3</Button>
            <Button FontSize="30" Grid.Row="2" Grid.Column="1" Name="Number2">2</Button>
            <Button FontSize="30" Grid.Row="2" Grid.Column="0" Name="Number1">1</Button>
            <Button FontSize="30" Grid.Row="3" Grid.Column="1" Name="Number0">0</Button>
            <Button FontSize="40" Grid.Row="3" Grid.Column="0" Name="C">C</Button>
            <Button FontSize="40" Grid.Row="3" Grid.Column="2" Name="Result">=</Button>
            <Button FontSize="40" Grid.Row="0" Grid.Column="3" Name="Add">+</Button>
            <Button FontSize="40" Grid.Row="1" Grid.Column="3" Name="Subtract">-</Button>
            <Button FontSize="40" Grid.Row="2" Grid.Column="3" Name="Divide">/</Button>
            <Button FontSize="40" Grid.Row="3" Grid.Column="3" Name="Multiply">*</Button>
        </Grid>
    </Grid>

</Window>

Answer 3

First you need to read a bit more about Grids in wpf on MSDN

Now coming to your problem, dont give width and height to your elements if you are defining the rows and columns for the grid (the elements will fill into their respective rows/columns UNLESS you you want give fixed sizes to some of your elements for a reason)

So your TextBox would simply become

<TextBox Grid.Row="0" Grid.ColumnSpan="2" Text="Some Text"/>

and if you want columns inside some rows then you would be creating a new Grid in that row/cell and then add column definitions for that new grid like below

<Grid Grid.Row="1" Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
</Grid>

Answer 4

I would stack the controls onto eachother, and then divide the correct area into columns.

<StackPanel>
    <Grid
        Height="60">
        <TextBox
            FontSize="30"
            VerticalAlignment="Center"
            Grid.Row="0"
            Grid.Column="0"
            HorizontalAlignment="Center"
            Width="460" />
    </Grid>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
    </Grid>
</StackPanel>

You can also define a ColumnSpan on the TextBox, but you'll have to adjust that property when you add new columns:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition
            Height="60"></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <TextBox
        Grid.ColumnSpan="2"
        FontSize="30"
        VerticalAlignment="Center"
        Grid.Row="0"
        Grid.Column="0"
        HorizontalAlignment="Center"
        Width="460" />
</Grid>