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>
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>
Windows Developer
Dieser Artikel ist im Windows Developer erschienen. Windows Developer informiert umfassend und herstellerneutral über neue Trends und Möglichkeiten der Software- und Systementwicklung rund um Microsoft-Technologien.
Natürlich können Sie den Windows Developer über den entwickler.kiosk auch digital im Browser oder auf Ihren Android- und iOS-Devices lesen. Außerdem ist der Windows Developer weiterhin als Print-Magazin im Abonnement erhältlich.
Aufmacherbild: Digital Streams series von Shutterstock.com / Urheberrecht: agsandrew