Silverlight／WPFで使える逆引きTips集
――タブ機能

（7） TabControlとTabItemコントロール

07.タブの配置方法を設定する

　タブは既定でTabContorolの上部に配置されます。この配置位置を変更するには、TabControlのTabStripPlacementプロパティを設定します。

　TabPlacementプロパティには、下記に示すDock列挙体の値を指定します。

Dock 列挙体

メンバ名	説明
Left	タブをTabControlの左側に配置する
Top	タブをTabControlの上側に配置する
Right	タブをTabControlの右側に配置する
Bottom	タブをTabControlの下側に配置する

　下記は、タブの配置方法を設定する例です。

　「上」「右」「下」「左」と書かれたラジオボタンコントロールをクリックすると、タブの配置が変更されます。

タブの配置方法を設定する例

XAMLの例

<StackPanel>
    <StackPanel Orientation="Horizontal">
        <RadioButton Name="radioButton1" Content="上" Margin="5" />
        <RadioButton Name="radioButton2" Content="右" Margin="5" />
        <RadioButton Name="radioButton3" Content="下" Margin="5" />
        <RadioButton Name="radioButton4" Content="左" Margin="5" />
    </StackPanel>
    <!-- Top を指定してタブを上に配置する-->
    <TabControl Name="TabControl1" TabStripPlacement="Top" Height="240">        
        <TabItem Header="TabItem1" Name="TabItem1">
            <Grid />
        </TabItem>
        <TabItem Header="TabItem2" Name="TabItem2">
            <Grid />
        </TabItem>
        <TabItem Header="TabItem3" Name="TabItem3">
            <Grid />
        </TabItem>
    </TabControl>
</StackPanel>

VBの例

' タブヘッダーを上に配置する
Private Sub radioButton1_Checked(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles radioButton1.Checked
    TabControl1.TabStripPlacement = Dock.Top
End Sub


' タブヘッダーを右に配置する
Private Sub radioButton2_Checked(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles radioButton2.Checked
    TabControl1.TabStripPlacement = Dock.Right
End Sub


' タブヘッダーを下に配置する
Private Sub radioButton3_Checked(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles radioButton3.Checked
    TabControl1.TabStripPlacement = Dock.Bottom
End Sub


' タブヘッダーを左に配置する
Private Sub radioButton4_Checked(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles radioButton4.Checked
    TabControl1.TabStripPlacement = Dock.Left
End Sub

C#の例

// タブヘッダーを上に配置する
private void radioButton1_Checked(object sender, RoutedEventArgs e)
{
    tabControl1.TabStripPlacement = Dock.Top;
}


// タブヘッダーを右に配置する
private void radioButton2_Checked(object sender, RoutedEventArgs e)
{
    tabControl1.TabStripPlacement = Dock.Right;
}


// タブヘッダーを下に配置する
private void radioButton3_Checked(object sender, RoutedEventArgs e)
{
    tabControl1.TabStripPlacement = Dock.Bottom;
}


// タブヘッダーを左に配置する
private void radioButton4_Checked(object sender, RoutedEventArgs e)
{
    tabControl1.TabStripPlacement = Dock.Left;
}

ポイント

　タブの配置を変更するにはTabStripPlacementプロパティにDock列挙体の値を指定する。

08.タブにイメージを表示する

　タブにイメージを表示するには、TabItemにImageを配置します。下記は、タブにイメージとテキストを表示する例です。

　TabItemにStackPanelを配置し、その中にImageとTextBlockを配置しています。

タブにイメージを表示する例

XAMLの例

<TabControl Name="tabControl1" Height="120">
    <TabItem Name="tabItem1">
        <TabItem.Header>
            <StackPanel Orientation="Horizontal">
                <Image Source="./Images\book_addressHS.png" Width="16" Height="16" Margin="2"/>
                <TextBlock Text="Header1" />
            </StackPanel>
        </TabItem.Header>
        <Grid />
    </TabItem>
    <TabItem Name="tabItem2">
        <TabItem.Header>
            <StackPanel Orientation="Horizontal">
                <Image Source="./Images\Book_angleHS.png" Width="16" Height="16" Margin="2"/>
                <TextBlock Text="Header2" />
            </StackPanel>
        </TabItem.Header>
        <Grid />
    </TabItem>
</TabControl>

VBの例

Private Sub Window_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
    Dim tabItem3 As New TabItem
    Dim stackPanel As New StackPanel
    Dim bi As New BitmapImage
    Dim img As New Image
    Dim tbName As New TextBlock

    'Imageの設定
    bi.BeginInit()
    bi.UriSource = New Uri("Images/Book_openHS.png", UriKind.Relative)
    bi.EndInit()
    img.Source = bi
    img.Height = 16
    img.Width = 16
    img.Margin = New Thickness(2.0)

    'TextBlockの設定
    tbName.Text = "Header3"

    '水平方向に配置
    stackPanel.Orientation = Orientation.Horizontal

    'StackPanelにImageとTextBlockを追加
    stackPanel.Children.Add(img)
    stackPanel.Children.Add(tbName)

    'ヘッダーにStackPanelを配置
    tabItem3.Header = stackPanel

    'タブコントロールに作成した tabItem3 を追加
    TabControl1.Items.Add(tabItem3)
End Sub

C#の例

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    TabItem tabItem3 = new TabItem();
    StackPanel stackPanel = new StackPanel();
    BitmapImage bi = new BitmapImage();
    Image img = new Image();
    TextBlock tbName = new TextBlock();

    // Imageの設定
    bi.BeginInit();
    bi.UriSource = new Uri("Images/Book_openHS.png", UriKind.Relative);
    bi.EndInit();
    img.Source = bi;
    img.Height = 16;
    img.Width = 16;
    img.Margin = new Thickness(2.0);

    // TextBlock の設定
    tbName.Text = "Header3";

    // 水平方向に配置
    stackPanel.Orientation = Orientation.Horizontal;

    // StackPanelにImageとTextBlockを追加
    stackPanel.Children.Add(img);
    stackPanel.Children.Add(tbName);

    // ヘッダーにStackPanelを配置
    tabItem3.Header = stackPanel;

    // タブコントロールに作成した tabItem3 を追加
    tabControl1.Items.Add(tabItem3);
    tabItem3.Header = stackPanel;
}

ポイント

　タブにイメージを表示するにはTabItemにイメージを追加する。