Làm cách nào để tùy chỉnh bố cục WPF StatusBar?

Question

Thêm nhiều hơn một trẻ vào một kết quả WPF StatusBar bố cục kém với ít tùy chọn để tùy chỉnh. Ví dụ, đoạn mã này:

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

Kết quả trong:

Đây không phải là cách bố trí lý tưởng, kể từ khi "đặt" được ép phải lên chống lại "Sẵn sàng".

Làm cách nào để kiểm soát toàn bộ bố cục của điều khiển WPF StatusBar?

Answer 1

Theo mặc định, StatusBar sử dụng số DockPanel để định vị con của nó. Điều này làm việc tốt cho một mục, nhưng có xu hướng làm cho mọi thứ lộn xộn và bất tiện khi làm việc với nhiều hơn một đứa trẻ.

Để đạt được một mức độ cao về kiểm soát đối với vị trí của trẻ em trên thanh trạng thái, bạn có thể trao đổi trên các DockPanel cho một 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> 

Điều này dẫn đến:

Đối thảo luận sâu hơn, vui lòng truy cập bài đăng blog của tôi here.

Answer 2

Trên thực tế, sau bài trả lời Kent tôi đã cố gắng này và nó hoạt động tốt:

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

Chỉ vì lợi ích của tài liệu tham khảo cho những người đọc các câu trả lời tuyệt vời trên, chúng tôi muốn đề nghị một cái gì đó thậm chí đơn giản hơn là đạt được cùng một kết quả. (Sử dụng không DockPanel cũng không 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> 

Tuyên bố từ chối: Điều này đã lâu rồi vào thời điểm tôi bắt đầu với WPF.