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

スポンサーリンク

タブにイメージを表示するには、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;
}
タイトルとURLをコピーしました