WPF controls in preview don't match dimension and position at runtime - How to fix?

Controls dimension and position in my WPF preview window don't match the actual window in runtime. I don't know why it does this and if it is related to code or my screen. Here is the code:

<Window x:Name="HomeWindow" x:Class="Progetto_Amada.MainWindow" x:FieldModifier="public"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:MyNamespace="clr-namespace:Progetto_Amada"
xmlns:local="clr-namespace:Progetto_Amada"
mc:Ignorable="d"
Title="Amada Reminder for General Administration" MinWidth="1100" MinHeight="650" Background="#FF323232" Loaded="HomeWindow_Loaded"  WindowState="Maximized" HorizontalAlignment="Left" SizeToContent="WidthAndHeight"
>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*" />
<ColumnDefinition Width="4*" />
<ColumnDefinition Width="4*" />
<ColumnDefinition Width="4*" />
</Grid.ColumnDefinitions>
<Menu Name="TopMenu"
Height="20"
VerticalAlignment="Top"
Background="#FF323232"
Foreground="White"
Grid.ColumnSpan="4">
<MenuItem
Header="File"
FontFamily="Arial">
<MenuItem
Name="AddFile"
Header="Allega un file"
Foreground="Black"
Click="CaricaFile_Click">
<MenuItem.Icon>
<Image Source="C:\Users\david\Desktop\progetto-pcto-requests\Progetto-Amada\bin\Debug\net6.0-windows\assets\file.png" />
</MenuItem.Icon>
</MenuItem>
<MenuItem Name="RemoveFile"
Header="Rimuovi un file"
Foreground="Black"
Click="RimuoviFile_Click">
<MenuItem.Icon>
<Image Source="C:\Users\david\Desktop\progetto-pcto-requests\Progetto-Amada\bin\Debug\net6.0-windows\assets\file.png" />
</MenuItem.Icon>
</MenuItem>
</MenuItem>
<MenuItem
Header="Visualizza"
FontFamily="Arial">
<MenuItem
Name="VediContratti"
Header="Visualizza tutti i contratti"
Foreground="Black"
Click="TuttiIContratti_Click">
<MenuItem.Icon>
<Image Source="C:\Users\david\Desktop\progetto-pcto-requests\Progetto-Amada\bin\Debug\net6.0-windows\assets\agreement.png" />
</MenuItem.Icon>
</MenuItem>
<MenuItem
Name="VediMacchine"
Header="Visualizza tutte le macchine"
Foreground="Black"
Click="TutteLeMacchine_Click">
<MenuItem.Icon>
<Image Source="C:\Users\david\Desktop\progetto-pcto-requests\Progetto-Amada\bin\Debug\net6.0-windows\assets\machine.png" />
</MenuItem.Icon>
</MenuItem>
</MenuItem>
<MenuItem
Header="Utente"
FontFamily="Arial">
<MenuItem
Name="NomeUtente"
Header="Utente: [ Nome utente ]"
Foreground="Black"
IsEnabled="False">
</MenuItem>
<MenuItem
Name="InfoUtente"
Header="Informazioni sull'utente"
Foreground="Black">
<MenuItem.Icon>
<Image Source="C:\Users\david\Desktop\progetto-pcto-requests\Progetto-Amada\bin\Debug\net6.0-windows\assets\user.png" />
</MenuItem.Icon>
</MenuItem>
<MenuItem Name="AccessoCambio" Header="Cambia utente" Foreground="Black" Click="CambiaUtente_Click">
<MenuItem.Icon>
<Image Source="C:\Users\david\Desktop\progetto-pcto-requests\Progetto-Amada\bin\Debug\net6.0-windows\assets\user.png" />
</MenuItem.Icon>
</MenuItem>
</MenuItem>
</Menu>
<Button
Grid.Column="3"
x:Name="btnCerca"
Content="CERCA"
HorizontalAlignment="Right"
Margin="0,40,20,0"
VerticalAlignment="Top"
Height="36"
Width="80"
Click="btnCerca_Click"
Grid.ColumnSpan="4"
FontWeight="Bold"
FontFamily="Arial"/>
<Label
Grid.Column="0"
Content="Scadenze Imminenti:"
HorizontalAlignment="Left"
Margin="8,100,0,0"
VerticalAlignment="Top"
Foreground="White"
FontSize="25"
/>
<Label Grid.Column="1"
Content="Scadenze Urgenti:"
HorizontalAlignment="Left"
Margin="8,100,0,0"
VerticalAlignment="Top"
Foreground="White"
FontSize="25"
/>
<Label Grid.Column="2"
Content="Scadenze Remote:"
HorizontalAlignment="Left"
Margin="8,100,0,0"
VerticalAlignment="Top"
Foreground="White"
FontSize="25"
/>
<Label Grid.Column="3"
Content="Tutte le scadenze:"
HorizontalAlignment="Left"
Margin="6,100,0,0"
VerticalAlignment="Top"
Foreground="White"
FontSize="25"
/>
<StatusBar
Name="UsernameBar" 
Height="35" 
VerticalAlignment="Bottom"
Background="Black"
Foreground="White"
Grid.ColumnSpan="4" Visibility="Visible" >
<Label 
Name="UtenteLabel" 
Content="Utente: [ Nome Utente ]" 
Foreground="White" 
FontSize="15" 
Width="296" 
Height="30"
HorizontalAlignment="Center"
VerticalAlignment="Center" 
Visibility="Visible" 
/>
</StatusBar>
<TextBox x:Name="ricercaTextbox" 
TextWrapping="Wrap" 
Height="36" 
VerticalAlignment="Top" 
Margin="0,40,105,0" 
FontSize="20" 
VerticalContentAlignment="Center"
Grid.Column="2"
HorizontalAlignment="Right"
Width="273" Grid.ColumnSpan="2"
/>
<Grid Grid.Column="0" Margin="10,148,10,40">
<ScrollViewer>
<StackPanel
Name="ScadenzeImminenti"
x:FieldModifier="public">
</StackPanel>
</ScrollViewer>
</Grid>
<Grid Grid.Column="1" Margin="10,148,10,40">
<ScrollViewer>
<StackPanel
Name="ScadenzeUrgenti"
x:FieldModifier="public">
</StackPanel>
</ScrollViewer>
</Grid>
<Grid Grid.Column="2" Margin="10,148,10,40">
<ScrollViewer>
<StackPanel
Name="ScadenzeRemote"
x:FieldModifier="public">
</StackPanel>
</ScrollViewer>
</Grid>
<Grid Grid.Column="3" Margin="10,148,10,40">
<ScrollViewer>
<StackPanel
Name="TutteLeScadenze"
x:FieldModifier="public">
</StackPanel>
</ScrollViewer>
</Grid>
<Button
Grid.Column="0"
x:Name="addScadenzaBtn"
Content="AGGIUNGI UNA SCADENZA"
HorizontalAlignment="Left"
Margin="10,40,0,0"
VerticalAlignment="Top"
Height="36" Width="275"
Click="addScadenzaBtn_Click"
FontWeight="Bold"
FontFamily="Arial"
Grid.ColumnSpan="2"/>
<Button
x:Name="allMacchineBtn"
Content="TUTTE LE MACCHINE"
HorizontalAlignment="Left"
Margin="335,40,0,0"
VerticalAlignment="Top"
Height="36"
Width="310"
FontWeight="Bold"
FontFamily="Arial"
Click="allMacchineBtn_Click"
Grid.ColumnSpan="2"/>
</Grid>
</Window> 

And here is the difference visually:
In designer and
at runtime

What can I do?

I tried resizing and changing positions, but nothing works, it seems like they act as they like to. I am also kinda new to WPF and this doesn't help a lot.

You should not only use grid columns, but rows too in your design. As far as I can see, you have

1. the Menu
2. some sort of tool area with buttons and a textbox
3. a 4-column content area
4. a footer status bar

Actually, since only one of them is column-divided in this design, you should probably have a top-level control that only handles the rows and then have a sub-control for the 4-column content area.

Depending on the details of what your desired result should look like, a top level DockPanel, Grid or some other control might be best suited. In this example I use the DockPanel for the main row layout.

<DockPanel LastChildFill="True">
<Menu DockPanel.Dock="Top" Name="TopMenu" Height="20">
<!-- menu content -->
</Menu>
<Grid DockPanel.Dock="Top" Height="80">
<!-- top buttons and textbox in here -->
</Grid>
<StatusBar DockPanel.Dock="Bottom" Name="UsernameBar" Height="35">
<!-- status bar content -->
</StatusBar>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*" />
<ColumnDefinition Width="4*" />
<ColumnDefinition Width="4*" />
<ColumnDefinition Width="4*" />
</Grid.ColumnDefinitions>
<!-- main contents in here -->
</Grid>
</DockPanel>

Basically, when the logical layout-hierarchy that you have in mind matches the hierarchy that is implemented in xaml, the layout should start behaving as expected.

That being said, do not trust the visual designer (I don't know a lot of people who actually use it for any non-trivial design), it might still look somewhat different from the runtime result. Instead, write what you want to achieve and then test the result at runtime.