Layout der WPF-Statuszeile

Standard

In meinem letzten Artikel habe ich gezeigt, wie man eine einfache Benutzeroberfläche für einen Texteditor mit WPF entwerfen kann. Aber die Statuszeile sieht noch nicht ganz so aus, wie sie soll.

Die Zeilen- und Spaltennummer, in der sich die Einfügemarke momentan befindet, soll ca. im rechten Drittel der Statuszeile angezeigt werden, auch wenn sich die Fenstergröße ändert.

Statuszeile klein

Statuszeile groß

Beim letzten Mal hatten wir die Statuszeile noch so definiert:

        ...
        <StatusBar DockPanel.Dock="Bottom">
            <TextBlock Text="Col 1, Ln 1" />
        </StatusBar>
        ...

Das sieht so aus:

Statuszeile Texteditor

Ein TextBlock-Element befindet sich in der Statuszeile, das links angezeigt wird. Doch wie bekommen wir den Text an die gewünschte Position?

Die StatusBar stellt ihre Steuerelemente normalerweise mit einem DockPanel dar. Allerdings werden alle Steuerelemente, die nicht vom Typ StatusBarItem sind, in einem StatusBarItem-Element eingehüllt, d.h. wir müssen selbst das StatusBarItem-Element angeben, damit wir die DockPanel-Eigenschaften definieren können.

        ...
        <StatusBar DockPanel.Dock="Bottom">
            <StatusBarItem DockPanel.Dock="Right">
                <TextBlock Text="Col 1, Ln 1" />
            </StatusBarItem>
            <StatusBarItem/>
        </StatusBar>
        ...

Statuszeile DockPanel

Der Text wird jetzt zwar rechts dargestellt, aber noch nicht genau dort, wo wir ihn haben wollen. Außerdem mussten wir ein leeres StatusBarItem-Element hinzufügen, das den Hauptteil der Statuszeile ausfüllen soll. Andernfalls würde das StatusBarItem-Element mit dem TextBlock nicht rechts dargestellt. Würden wir einen zweiten Text darstellen wollen, müssten wir es zum leeren StatusBarItem hinzufügen. Somit käme der linke Teil im XAML-Code vor dem rechten. Viel lieber hätten wir an dieser Stelle ein Grid, weil wir dann die Breite der Spalten selbst bestimmen können. Aber wie erreichen wir das?

Die StatusBar gehört wie ListBox, ListView, ComboBox, Menu und einigen anderen zu den sogenannten Items-Controls. Diese stellen ihre Subelemente in einem Panel dar, das durch die Eigenschaft ItemsPanel definiert wird. Normalerweise wird darin ein StackPanel definiert, aber StatusBar hat diese Eigenschaft überschrieben und durch ein DockPanel ersetzt, wie wir oben gesehen haben. Wir können dieser Eigenschaft ein Grid zuweisen und so zu dem gewünschten Ergebnis kommen. In XAML sieht das so aus:

        <StatusBar DockPanel.Dock="Bottom">
            <StatusBar.ItemsPanel>
                <ItemsPanelTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="2*"/>
                            <ColumnDefinition Width="1*"/>
                        </Grid.ColumnDefinitions>
                    </Grid>
                </ItemsPanelTemplate>
            </StatusBar.ItemsPanel>
            <StatusBarItem Grid.Column="1" Grid.Row="0">
                <TextBlock Text="Col 1, Ln 1" />
            </StatusBarItem>
        </StatusBar>

Die Eigenschaft bekommt ein ItemsPanelTemplate, in dem wir mit einem Grid ein Layoutgitter definieren, das aus einer Zeile und zwei Spalten besteht. Die Spalten teilen sich den verfügbaren Platz im Verhältnis 2:1 auf. Die rechte Spalte umfasst also das rechte Drittel der Statuszeile. Den TextBlock geben wir in das StatusBarItem, das wir der rechten Spalte zuweisen. Damit befindet sich der Text immer im rechten Drittel der Statuszeile.

Die WPF-Statuszeile kann auch andere Steuerelemente darstellen, z.B. Bilder, Fortschrittsbalken und viele andere mehr. Wenn man dann mehr Kontrolle über das Layout der Statuszeile braucht, kann das DockPanel jederzeit durch etwas anderes ersetzt werden.

Leave a Reply

Your email address will not be published. Required fields are marked *