XAML window doesn't look like what I want

Question

I'm learning about WPF and I'm creating a window in XAML.

The window should look like this:

But when I run the program it looks like this:

The code is the following:

<Page x:Class="WpfApp1.ProductsManagement"
      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:WpfApp1"
      mc:Ignorable="d" 
      d:DesignHeight="450" d:DesignWidth="800"
      Title="ProductsManagement">

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="80" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="300" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="420" />
        </Grid.RowDefinitions>
            <TextBlock 
            Margin="5"
                Text="Search" 
                  Grid.Row="0"
            Grid.Column="0"/>
            <TextBox
                Margin="5"
                Grid.ColumnSpan="2"
                Grid.Column="1"
                Background ="White"
                  Grid.Row="0"
                Text="hi"/>
            <DataGrid
                Margin ="5"
                Name="dataGrid"
            Grid.Column="0"
                Grid.ColumnSpan="2"
                Grid.Row="1"/>
            <Border
                 Margin ="5"
                Grid.Row="1"
                Grid.Column="2"/>

    </Grid>
</Page>

Any comments or suggestions are welcome.

UPDATE

I'm taking the following code as an example:

<Page x:Class="WpfApp1.Discussion"
      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:data="clr-namespace:BikeShop"
      xmlns:local="clr-namespace:WpfApp1"
      mc:Ignorable="d" 
      d:DesignHeight="450" d:DesignWidth="800"
      Title="Discussion">

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="100" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="50" />
        </Grid.RowDefinitions>
        <ListBox 
            Grid.ColumnSpan="2" 
            Margin="5"/>
        <Button 
            Grid.Row="1"
            Grid.Column="1"
            Margin="5"
            Content="Send" />
        <TextBox 
            Grid.Row="1"
            Margin="5"
            Text="Type your message here" />
    </Grid>
</Page>

And when I run the code it looks like this: (It works correctly)

Grids don't have visible borders. To get one, see https://stackoverflow.com/questions/2769291/how-do-i-put-a-border-on-my-grid-in-wpf — Robert Harvey, Nov 19 '19 at 19:04
Or put some controls in the grids that do have visible borders. — Robert Harvey, Nov 19 '19 at 19:05
I don't think that's it, this is based on a similar example and it works. I'm going to update the question with the example I'm analyzing. — Fabián Romo, Nov 19 '19 at 19:11

Olivier Belanger · Accepted Answer · 2019-11-19T20:33:27.383

Your RowDefinitions must be like this:

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

Right now you ask to fill the entire page for the first row and set the second row to a height of 420.

You must define a specific value for the first and * for the second.

You do not see the error in the designer because you set the second row to 420. Obviously you see the first row at 30. But when you go to fullscreen, the first row gets bigger.

score 1 · Answer 2 · answered Nov 19 '19 at 19:22

1

Because your Row heights are incorrect. replace your RawDefinitions with:

   <Grid.RowDefinitions>
        <RowDefinition Height="40" /> 
        <RowDefinition Height="1*" />
    </Grid.RowDefinitions>

answered Nov 19 '19 at 19:22

Ribaz

476
3
10

XAML window doesn't look like what I want

2 Answers2