web-dev-qa-db-ja.com

WPFステータスバーのレイアウトをカスタマイズするにはどうすればよいですか？

WPF StatusBarに複数の子を追加すると、カスタマイズするオプションがほとんどなく、レイアウトが悪くなります。たとえば、次のコード：

<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コントロールのレイアウトを完全に制御するにはどうすればよいですか？

wpflayoutcontrolsstatusbarstatusbaritem
30
Kent Boogaart

デフォルトでは、StatusBarはDockPanelを使用して子を配置します。これは1つのアイテムで問題なく機能しますが、複数の子を操作する場合、物事が煩雑で不便になる傾向があります。

ステータスバーの子の配置を高レベルで制御するには、DockPanelを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>

これは次の結果になります：

enter image description here

詳細については、私のブログ投稿 here をご覧ください。

79
Kent Boogaart

実際、ケントの返答に従って私はこれを試してみましたがうまくいきました：

<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

上記の優れた答えを読んでいる人のための参考のために、私は同じ結果を達成するさらに簡単なものを提案したいと思います。 （DockPanelも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>

免責事項：これは、私がWPFを使い始めたのはずっと前のことです。

1
Robin Maben