Einen ScrollViewer außerhalb mit einem DataGrid zu nutzen, hört sich nicht gerade schwierig an. Die Praxis zeigt allerdings das genaue Gegenteil: Wurden beim DataGrid zu Beginn noch keine Daten geladen, verschieben sich die Spalten automatisch auf ein Minimum. Die am häufigsten verwendete Implementierung zeigt Listing 1, und der unschöne Effekt wird in Abbildung 1 gezeigt.

WPF: DataGrid mit ScrollViewer nutzen

Wodurch wird das Problem verursacht? Es kommt vom HorizontalScrollBarVisibility-Attribut. Wird es ausgelassen, wird die Darstellung der Spalten wie gewünscht angezeigt. Das kann für den produktiven Einsatz keine Lösung sein. Nicht ohne Grund wird dieses Attribut deklariert. Eine vielversprechendere Lösung funktioniert mit einem kleinen Trick: Zwischen dem ScrollViewer und dem DataGrid befindet sich ein Grid-Layoutelement. Diesem vergibt man einen Namen, beim DataGrid wird dann nur noch ein Element-Binding auf ActualWidth gesetzt. Die Spalten werden nun wie gewünscht dargestellt, und das HorizontalScrollBarVisibility-Attribut kann weiterhin zum Einsatz kommen. Der Code dazu steht in Listing 2, und Abbildung 2 zeigt das gewünschte Ergebnis.

Listing 1: Der Versuch eines „ScrollViewer“ mit „DataGrid“

<ScrollViewer HorizontalScrollBarVisibility="Auto">
    <Grid MinWidth="300">
        <DataGrid Margin="0" AutoGenerateColumns="False">
            <DataGrid.Columns>
                <DataGridCheckBoxColumn Header="Spalte A" Width="*"/>
                <DataGridCheckBoxColumn Header="Spalte B" Width="*"/>
                <DataGridCheckBoxColumn Header="Spalte C" Width="*"/>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</ScrollViewer>

Abb. 1: Der „ScrollViewer“ verschiebt die leeren Spalten auf ein Minimum

Listing 2: Ein „Element“-Binding hilft beim Zusammenspiel von „ScrollViewer“ und „DataGrid“

<ScrollViewer HorizontalScrollBarVisibility="Auto">
    <Grid x:Name="LayoutGrid" MinWidth="300">
        <DataGrid Margin="0" AutoGenerateColumns="False" Width="{Binding ElementName=LayoutGrid, Path=ActualWidth}">
            <DataGrid.Columns>
                <DataGridCheckBoxColumn Header="Spalte A" Width="*"/>
                <DataGridCheckBoxColumn Header="Spalte B" Width="*"/>
                <DataGridCheckBoxColumn Header="Spalte C" Width="*"/>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</ScrollViewer>

Abb. 2: Die Spalten werden nun wie gewünscht dargestellt

Aufmacherbild: Digital Streams series von Shutterstock.com / Urheberrecht: agsandrew