[WPF][TabControl] タブを作成してコンテンツを配置するには

WPF

2023.12.04

概要
構文
1. XAMLの構文
2. コードビハインドの構文
使用例
1. XAMLの例
2. コードビハインドの例
まとめ

概要

WPFのTabControlは、複数のコンテンツを同時に表示するのに便利なコントロールです。この記事では、TabItemプロパティを活用する方法について説明します。

構文

XAMLの構文

<TabControl>
    <TabItem Header="タブ1">
        <!-- タブ1のコンテンツ -->
    </TabItem>
    <TabItem Header="タブ2">
        <!-- タブ2のコンテンツ -->
    </TabItem>
    <!-- 他のタブアイテム -->
</TabControl>

コードビハインドの構文

TabControl tabControl = new TabControl();

TabItem tabItem1 = new TabItem();
tabItem1.Header = "タブ1";
// タブ1のコンテンツを追加

TabItem tabItem2 = new TabItem();
tabItem2.Header = "タブ2";
// タブ2のコンテンツを追加

// 他のタブアイテムを作成し、TabControlに追加

XAMLとコードビハインドの両方の構文でTabControlに複数のTabItemを追加する方法が示されています。それぞれのTabItemには Header プロパティがあり、これがタブの表示名となります。

使用例

XAMLの例

<TabControl>
    <TabItem Header="タブ1"　Height="250">
        <StackPanel>
            <TextBlock>タブ1のコンテンツ</TextBlock>
        </StackPanel>
    </TabItem>
    <TabItem Header="タブ2">
        <StackPanel>
            <TextBlock>タブ2のコンテンツ</TextBlock>
        </StackPanel>
    </TabItem>
</TabControl>

コードビハインドの例

TabControl tabControl = new TabControl();

TabItem tabItem1 = new TabItem();
tabItem1.Header = "タブ1";

StackPanel stackPanel1 = new StackPanel();
TextBlock textBlock1 = new TextBlock();
textBlock1.Text = "タブ1のコンテンツ";
stackPanel1.Children.Add(textBlock1);

tabItem1.Content = stackPanel1;

TabItem tabItem2 = new TabItem();
tabItem2.Header = "タブ2";

StackPanel stackPanel2 = new StackPanel();
TextBlock textBlock2 = new TextBlock();
textBlock2.Text = "タブ2のコンテンツ";
stackPanel2.Children.Add(textBlock2);

tabItem2.Content = stackPanel2;

tabControl.Items.Add(tabItem1);
tabControl.Items.Add(tabItem2);

この使用例では、XAMLとコードビハインドの両方でTabControlにTabItemを追加し、それぞれのTabItemにコンテンツを配置しています。各タブのコンテンツには TextBlock が含まれており、これがタブ内に表示される内容になります。