As I was searching on the web to solve the alignment/size problem of my application, I found some articles suggesting SharedSizeGroup and it actually takes up as much space as is required by the contents of columns and solves my problem BUT I've some scrolling issue in the ListBox with this. The structure in my view is: it's a StackPanel for title, two Grid for header and footers and a ListBox for entries. Similar to this:
<Grid Grid.IsSharedSizeScope="True" Margin="20">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition />
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel HorizontalAlignment="Center">
<TextBlock Text="Title" />
<TextBlock Text="Subtitle"/>
<TextBlock Text="Period"/>
</StackPanel>
<Grid Grid.Row="1" Name="Header">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="c1"/>
<ColumnDefinition />
<ColumnDefinition SharedSizeGroup="c3"/>
<ColumnDefinition SharedSizeGroup="c4"/>
<ColumnDefinition SharedSizeGroup="c5"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Date"/>
<TextBlock Grid.Column="1" Text="Particulars" />
<TextBlock Grid.Column="2" Text="Debit" />
<TextBlock Grid.Column="3" Text="Credit" />
<TextBlock Grid.Column="4" Text="Balance" />
</Grid>
<ListBox Grid.Row="2"
ItemsSource="{Binding Entries}"
HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="c1"/>
<ColumnDefinition />
<ColumnDefinition SharedSizeGroup="c3"/>
<ColumnDefinition SharedSizeGroup="c4"/>
<ColumnDefinition SharedSizeGroup="c5"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Date}"/>
<TextBlock Grid.Column="1" Text="{Binding Particulars}" />
<TextBlock Grid.Column="2" Text="{Binding Debit}" />
<TextBlock Grid.Column="3" Text="{Binding Credit}" />
<TextBlock Grid.Column="4" Text="{Binding Balance}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Grid Grid.Row="3" Name="Footer">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="c1"/>
<ColumnDefinition />
<ColumnDefinition SharedSizeGroup="c3"/>
<ColumnDefinition SharedSizeGroup="c4"/>
<ColumnDefinition SharedSizeGroup="c5"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Total"/>
<TextBlock Grid.Column="2" Text="XXXXX" />
<TextBlock Grid.Column="3" Text="XXXXX" />
</Grid>
</Grid>
and I've used SharedSizeGroup wherever I needed. Now, as I move the mouse see how the Thumb behaves:

For this I've following code in MainWindow.xaml.cs:
public partial class MainWindow : Window
{
public ObservableCollection<Entry> Entries { get; set; }
public MainWindow() {
InitializeComponent();
Entries = new ObservableCollection<Entry>();
Random rand = new();
for (int i = 0; i < 500; i++) {
Entries.Add(new Entry() {
Date = new DateTime(rand.Next(2000,2021), rand.Next(1,13), rand.Next(1,29)),
Particulars = "Some Text",
Debit = rand.Next(10,100000),
Credit = rand.Next(10,1000),
Balance = rand.Next(10,10000)
});
}
DataContext = this;
}
}
public class Entry
{
public DateTime Date { get; set; }
public String Particulars { get; set; }
public int Debit { get; set; }
public int Credit { get; set; }
public int Balance { get; set; }
}
How to solve this problem?