2009-09-03 19 views
27

複数の子をWPF StatusBarに追加すると、レイアウトが貧弱になり、カスタマイズするオプションがほとんどありません。たとえば、このコード:WPFステータスバーのレイアウトをカスタマイズするにはどうすればよいですか?

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

結果で:「設定が」右「レディ」に対するまで絞られているので

enter image description here

これは、理想的なレイアウトではありません。

WPF StatusBarコントロールのレイアウトを完全に制御するにはどうすればよいですか?

答えて

72

デフォルトでは、StatusBarは、子を配置するためにDockPanelを使用します。これは1つの項目ではうまく動作しますが、複数の子供と作業するときには、操作が面倒で不便になりがちです。

あなたは Gridため DockPanelを入れ替えることができ、ステータスバーの子供の位置の上に高レベルの制御を獲得するには、次の場合は

enter image description here

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

これは、その結果より深い議論、私のブログ記事hereを訪問してください。

+36

@David:ばかばかしくないでください。私はgoogle analyticsが私の最も人気のあるブログ記事の1つだと教えてくれたのでこの質問を投稿しました。したがって、stackoverflowに関するこの質問への直接的な回答はコミュニティにとって有益でしょう。私は自分のブログに広告を載せていないので、リンクの魅力から何かを得るために立っていない。そして私は、あなたがもっと情報を必要としない限り、私のブログにアクセスする必要さえないという十分な情報を私の答えに入れています。今すぐ親切に行って何か建設的なものを見つけてください。 –

+0

ありがとう、これは私が探していたものです –

+0

Mmmm、なぜ誰かが私がStatusBarItemの中にセパレータを置くと、ペイントされないのですか?ありがとう。 –

11

は実際には、ケントの返事以下の私はこれを試してみましたが、それが正常に動作します:

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

私はそれがうまくいかないことを示唆していませんでしたが、それは非合理的な順序であり、あなたがレイアウトをはるかにコントロールしていないので、 "面倒で不便"です。 * Set *アイテムを使用可能な幅の半分にすると、私の意味がわかります。 –

+6

DockPanelの仕組みを理解すれば、これが最も簡単な方法です。 – Sonhja

+0

は、私のステータスバーがusercontrolにあり、そのusercontrolがcontentcontrolとして表示されていて、contentcontrolが一番下にドッキングされていると動作しないようです。 – juFo

1

ちょうど私が実現し、よりシンプルなものをお勧めしたいのですが上記の優れた答えを読んだ人のための参照のために同じ結果。 (DockPanelStatusBarも使用しない)。

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

免責事項:これは、私がWPFを使い始めた頃であった。

関連する問題