¿Cómo personalizo el diseño de WPF StatusBar?

layout controls

Question

Agregar más de un elemento secundario a una barra de StatusBar WPF da como resultado un diseño deficiente con poca opción de personalización. Por ejemplo, este código:

<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>

Resultados en:

Este no es el diseño ideal, ya que el "Conjunto" se aprieta contra el "Listo".

¿Cómo obtengo un control total sobre el diseño del control WPF StatusBar ?

Answer 1

En realidad, siguiendo la respuesta de Kent probé esto y funciona 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>

Answer 2

Por defecto, StatusBar usa un DockPanel para DockPanel sus hijos. Esto funciona bien para un artículo, pero tiende a crear problemas e inconvenientes cuando se trabaja con más de un niño.

Para obtener un alto nivel de control sobre el posicionamiento de los hijos de la barra de estado, puede cambiar el DockPanel por una 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>

Esto resulta en:

Para una discusión más profunda, por favor visite mi blog here .

Answer 3

Solo como referencia para aquellos que leen las excelentes respuestas anteriores, me gustaría sugerir algo aún más simple que logre los mismos resultados. (No DockPanel 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>

Descargo de responsabilidad: Esto fue hace mucho tiempo cuando comencé con WPF.