GridSplitter with DataGrid as left hand side component

Question

I have a problem with resizing a column that contains a DataGrid. When I create more space for the column that contains the DataGrid, the DataGrid actually shrinks in Width.

Tried to google for a solution, but found nothing useful so far.

XAML:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="45"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.7*"/>
        <ColumnDefinition Width="5"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="130"/>
    </Grid.ColumnDefinitions>

    <DataGrid 
        x:Name="DowloadedEpisodesDataGrid" 
        ItemsSource="{Binding DownloadedEpisodes, Mode=OneWay, NotifyOnSourceUpdated=True, UpdateSourceTrigger=PropertyChanged}" 
        Grid.Column="0"
        AutoGenerateColumns="False"
        Background="White">

        <DataGrid.Columns>
            <DataGridCheckBoxColumn Width="50" Header="Import" Binding="{Binding IsSelected}" />
            <DataGridTextColumn Width="Auto" Header="Downloaded episode" IsReadOnly="True" Binding="{Binding FileName}"/>
        </DataGrid.Columns>
    </DataGrid>

    <GridSplitter Grid.Column="1" Width="5" Visibility="Visible" ResizeDirection="Columns" VerticalAlignment="Stretch" />

    <views:EpisodeDetailsUserControl 
        x:Name="EpisodeDetailsUserControl" 
        DataContext="{Binding ElementName=DowloadedEpisodesDataGrid, Path=SelectedItem}" 
        Grid.Column="2"
        Grid.ColumnSpan="2"/>

Before resizing:

After resizing:

I'd like to understand WHY the default behavior is to shrink the DataGrid and of course I'd like very much to deal with the problem.

Many thanks in advance.

Answer 1

You need to set HorizontalAlignment to Stretch on GridSplitter -

<GridSplitter Grid.Column="1"
              ResizeDirection="Columns"
              VerticalAlignment="Stretch" 
              HorizontalAlignment="Stretch" />