Kolumne: XAML Expertise

WPF: DataGrid mit ScrollViewer nutzen
Kommentare

In der Kolumne „XAML Expertise“ präsentiert Gregor Biswanger Top-How-tos zum Thema XAML. Einsteiger und XAML-Experten sollen hier durch geballtes Wissen gesättigt werden. Heute gibt es folgende Expertise: „WPF: DataGrid mit ScrollViewer nutzen“.

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.

Stellen Sie Ihre Fragen zu diesen oder anderen Themen unseren entwickler.de-Lesern oder beantworten Sie Fragen der anderen Leser.

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

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

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

Windows Developer

Windows DeveloperDieser 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. In unserem Shop ist der Windows Developer ferner im Abonnement oder als Einzelheft erhältlich.

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

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -