WPF Border column span inside of grid causes UI freeze, why? - wpf

Question

I've had issues with slow databinding due to a border that is spanning two columns and I can't figure out why. If I change the border to only reside in the first column then the datagrid databinding is near instant. Please see my code below.
It has something to do with the second column width in the grid being set to *, because when I change it to Auto it will work correctly, but I want the second datagrid to fill the rest of the empty space (I'm using this UserControl inside of another View's TabControl)
<UserControl>
<Grid Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="2"
Background="DarkGray">
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Left">
<Button x:Name="LoadDataBttn"
Content="Load Data"
Width="125"
Height="Auto"
Margin="1,0"
Command="{Binding LoadDataCommand}"/>
<Button Content="Clear Data"
Width="125"
Height="Auto"
Margin="1,0"/>
<Button x:Name="ExportToXMLBttn"
Content="Export To XML"
Width="125"
Height="Auto"
Margin="1,0"/>
</StackPanel>
</Border>
<Grid Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="1">
<DataGrid x:Name="DataGrid1"
ItemsSource="{Binding ICollectionProperty}"
SelectedItem="{Binding SelectedItem}"
AutoGenerateColumns="True"
CanUserAddRows="False"
CanUserDeleteRows="False"
Background="Transparent">
</DataGrid>
</Grid>
<Grid Grid.Row="1"
Grid.Column="1">
<DataGrid ItemsSource="{Binding ICollectionProperty2}}"
AutoGenerateColumns="True"
CanUserAddRows="False"
CanUserDeleteRows="False"
Background="Transparent"
Style="{StaticResource AzureDataGrid}">
</DataGrid>
</Grid>
</Grid>

Answer 1

I always hated the "column span" property, but sometimes you just need to use it.
In my opinion, you should divide your content in more grids, also for a clear separation of elements.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition />
</Grid.RowDefinitions>
<Border Grid.Row="1">...</Border>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<DataGrid Grid.Column="0">...
<DataGrid Grid.Column="1">...
</Grid>
</Grid>
Maybe the column span is the problem... I don't know. Try.