TextBlock controls overlapping in Grid WPF - wpf

Question

I am trying to create a simple Todo List app with WPF/XAML
I have a ListBox which displays all the tasks. Here is my code:
<Window x:Class="TodoListWPF.Homepage"
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:local="clr-namespace:TodoListWPF"
mc:Ignorable="d"
Title="Homepage" Height="450" Width="800">
<Grid Margin="10,130,10,10">
<TextBlock HorizontalAlignment="Center" Margin="0,-116,0,0" Text="Welcome to TaskList" FontSize="20" TextWrapping="Wrap" VerticalAlignment="Top" Height="33" Width="180" />
<ListBox Margin="0,-48,0,0" x:Name="TaskListBox">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Name}"/>
<TextBlock Text="{Binding DueDate}"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Window>
And code-behind:
public partial class Homepage : Window
{
public Homepage()
{
InitializeComponent();
List<Task> tasks = new List<Task>();
tasks.Add(new Task("Buy RTX 3070", 12, 3, 2021, "Buy a new Asus EK RTX 3070 and install it into the custom loop")); //Test task
TaskListBox.ItemsSource = tasks;
}
}
I am expecting a simple 1-item list with the name and due date of the task, but here is my output:
Task Name and DueDate overlap
How can I fix the overlapping elements?

Answer 1

You did not specify Grid.Row on your TextBox and in that case both TextBoxes are placed in the same (first) row of the Grid.
Try this to fix it.
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Name}"/>
<TextBlock Grid.Row="1" Text="{Binding DueDate}"/>
</Grid>
If you want to have Name and DueDate on the same row then you can replace Grid by StackPanel
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}"/>
<TextBlock Text="{Binding DueDate}"/>
</StackPanel>
</DataTemplate>