web-dev-qa-db-fra.com

Comment personnaliser la mise en page de la barre d'état WPF?

Ajouter plus d'un enfant à un WPF StatusBar donne une mauvaise disposition avec peu d'option pour personnaliser. Par exemple, ce code:

<Window x:Class="StatusBar.MainWindow"
        xmlns="http://schemas.Microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.Microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <DockPanel>
        <StatusBar DockPanel.Dock="Bottom">
            <StatusBarItem>
                <TextBlock>Ready</TextBlock>
            </StatusBarItem>
            <StatusBarItem>
                <TextBlock>Set</TextBlock>
            </StatusBarItem>
        </StatusBar>

        <Label>Main Content</Label>
    </DockPanel>
</Window>

Résulte en:

enter image description here

Ce n'est pas la disposition idéale, puisque le "Set" est pressé contre le "prêt".

Comment acquérir un contrôle total sur la disposition du contrôle WPF StatusBar?

wpflayoutcontrolsstatusbarstatusbaritem
30
Kent Boogaart

Par défaut, le StatusBar utilise un DockPanel pour positionner ses enfants. Cela fonctionne bien pour un article, mais tend à rendre les choses désordonnées et gênantes lorsque vous travaillez avec plus d'un enfant.

Pour obtenir un niveau de contrôle élevé sur le positionnement des enfants de barre d'état, vous pouvez échanger le DockPanel pour un Grid:

<Window x:Class="StatusBar.MainWindow"
        xmlns="http://schemas.Microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.Microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <DockPanel>
        <StatusBar DockPanel.Dock="Bottom">
            <StatusBar.ItemsPanel>
                <ItemsPanelTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="4*"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                    </Grid>
                </ItemsPanelTemplate>
            </StatusBar.ItemsPanel>
            <StatusBarItem>
                <TextBlock>Ready</TextBlock>
            </StatusBarItem>
            <StatusBarItem Grid.Column="1">
                <ProgressBar Value="30" Width="80" Height="18"/>
            </StatusBarItem>
            <StatusBarItem Grid.Column="2">
                <TextBlock>Set</TextBlock>
            </StatusBarItem>
            <StatusBarItem Grid.Column="3">
                <TextBlock>Go!</TextBlock>
            </StatusBarItem>
        </StatusBar>

        <Label>Main Content</Label>
    </DockPanel>
</Window>

Il en résulte:

enter image description here

Pour une discussion plus approfondie, veuillez visiter mon article de blog ici .

79
Kent Boogaart

En fait, après la réponse de Kent, j'ai essayé cela et ça marche bien:

<StatusBar>
    <StatusBarItem DockPanel.Dock="Right">
        <TextBlock>Go!</TextBlock>
    </StatusBarItem>
    <StatusBarItem DockPanel.Dock="Right">
        <TextBlock>Set</TextBlock>
    </StatusBarItem>
    <StatusBarItem DockPanel.Dock="Right">
        <ProgressBar Value="30" Width="80" Height="18"/>
    </StatusBarItem>
    <!-- Fill last child is true by default -->
    <StatusBarItem>
        <TextBlock>Ready</TextBlock>
    </StatusBarItem>
</StatusBar>
11
Afshin

Juste pour des raisons de référence pour ceux qui lisent les excellentes réponses ci-dessus, j'aimerais suggérer quelque chose encore plus simple qui atteint les mêmes résultats. (Utilisation de ni DockPanel ni StatusBar).

<Window>
.
.

 <Grid Margin="2">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="15"/>
        </Grid.RowDefinitions>

        <SomeContainer Grid.Row="0" />  <!-- Main Content.. -->

        <Grid Grid.Row="1">
             <!-- Status bar laid out here (using similar approach)-->
        </Grid>
</Window>

Disclaimer: C'était il y a longtemps à un moment où je commençais avec WPF.

1
Robin Maben