Silverlight／WPFで使える逆引きTips集
――ステータスバー機能

（12） StatuslBarコントロール

04.ステータスバー項目の配置位置を設定する その2

　「ステータスバー項目の配置位置を設定する その1」では、添付プロパティDockPanelによる配置について説明しました。

　項目の配置は、添付プロパティを使用する以外にGridを使用して配置することも可能です。

　Gridを使用するには、<StatusBar.ItemsPanel>～</StatusBar.ItemsPanel>内にGridの定義を記述します。このとき、項目のサイズに合わせた列を作成する場合はWidthに"Auto"を指定し、伸縮する列を作成するには"*"を指定します。

　下記はGridを使用して項目を配置する例です。

ステータスバー項目の配置位置を設定する例

XAMLの例

<DockPanel>
    <StatusBar DockPanel.Dock="Bottom">
        <StatusBar.ItemsPanel>
            <ItemsPanelTemplate>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                </Grid>
            </ItemsPanelTemplate>
        </StatusBar.ItemsPanel>
        <StatusBarItem>Item1</StatusBarItem>
        <Separator Grid.Column="1"/>
        <StatusBarItem Grid.Column="2">Item2</StatusBarItem>
        <Separator Grid.Column="3"/>
        <StatusBarItem Grid.Column="4">Item3</StatusBarItem>
    </StatusBar>
    <TextBox></TextBox>
</DockPanel>

ポイント

　Gridに項目を配置するには、<StatusBar.ItemsPanel>～</StatusBar.ItemsPanel>の間にGridの定義を作成する。

　項目のサイズに合わせた列を作成する場合はWidthに"Auto"を指定し、伸縮する列を作成するには"*"を指定する。

 

05.イメージを表示する

　ステータスバーの項目にイメージを表示するにはImageクラスを使用します。

　下記は、プリンターのイメージを表示する例です。

イメージを表示する例

XAMLの例

<DockPanel Name="DockPanel1">
    <StatusBar DockPanel.Dock="Bottom" Name="StatusBar1">
        <StatusBar.ItemsPanel>
            <ItemsPanelTemplate>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                </Grid>
            </ItemsPanelTemplate>
        </StatusBar.ItemsPanel>
        <StatusBarItem>Ready</StatusBarItem>
        <Separator Grid.Column="1"/>
        <StatusBarItem Grid.Column="4">
            <StackPanel Orientation="Horizontal" Name="StackPanel1">
                <!-- コードからイメージとテキストを配置する場合は下記をコメントにすること -->
                <Image Source="Images/PrintHS.png" Width="16" Height="16"/>
                <TextBlock>Printing...</TextBlock>
            </StackPanel>
        </StatusBarItem>
    </StatusBar>
    <TextBox></TextBox>
</DockPanel>

VBの例

'コードからイメージを配置する場合は下記のようにします
'XAML内の項目内に配置されたStackPanelにイメージとテキストを設定する例です

Dim imgPrint As New Image
Dim bmpImage As New BitmapImage
Dim textBlock1 As New TextBlock

'イメージの作成
imgPrint.Source = New BitmapImage(New Uri("Images/PrintHS.png", UriKind.Relative))
imgPrint.Width = 16
imgPrint.Height = 16

'ステータスバー内のスタックパネル(StackPanel1)にイメージを追加
StackPanel1.Children.Add(imgPrint)

'ステータスバー内のスタックパネル(StackPanel1)に"Printing..."を追加
textBlock1.Text = "Printing..."
StackPanel1.Children.Add(textBlock1)

C#の例

// コードからイメージを配置する場合は下記のようにします
// XAML内の項目内に配置されたStackPanelにイメージとテキストを設定する例です

Image imgPrint = new Image();
BitmapImage bmpImage = new BitmapImage();
TextBlock textBlock1 = new TextBlock();

// イメージの作成
imgPrint.Source = new BitmapImage(new Uri("Images/PrintHS.png", UriKind.Relative));
imgPrint.Width = 16;
imgPrint.Height = 16;

// ステータスバー内のスタックパネル(StackPanel1)にイメージを追加
StackPanel1.Children.Add(imgPrint);

// ステータスバー内のスタックパネル(StackPanel1)に"Printing..."を追加
textBlock1.Text = "Printing...";
StackPanel1.Children.Add(textBlock1);

ポイント

　イメージを表示するにはImageクラスを使用する。