C#WPFの道#22！TabControlの書き方と使い方を解りやすく解説

TabControl（タブコントロール）とは？

TabControlとは，ヘッダー付きのページを複数作れるコントロールです。画面のエリアに対して，配置する必要のあるコントロールが多い場合や，グループ分けして入力させたい場合に使用します。

TabControlの書き方

TabControlは，TabItemの数だけページが作られます。各ページのタイトルはTabItemのHeaderに設定します。

<TabControl>
    <TabItem Header="TabA">
    </TabItem>
</TabControl>

主なプロパティ

ソースコード上から表示されているページを切り替える場合等は「SelectedIndex」を変更します。ページの数だけインデックスがあり，1ページ目はインデックス「０」から始まります。そのため，2ページ目を選択する場合は「１」と指定します。

サンプルコード

<Window x:Class="WPF022.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPF022"
        mc:Ignorable="d"
        Title="MainWindow" Height="200" Width="200">
    <Grid>
        <TabControl x:Name="MyTabControl"
                    Margin="20">
            <TabItem Header="AAA">
                <StackPanel>
                    <TextBox Margin="10"/>
                    <Button Content="Save" 
                            Margin="10"/>
                </StackPanel>
            </TabItem>
            <TabItem Header="BBB">
                <StackPanel>
                    <TextBox Margin="10"/>
                    <Button Content="Search" 
                            Margin="10"/>
                </StackPanel>
            </TabItem>
        </TabControl>
    </Grid>
</Window>

• TabControlにTabItemを２つ設定しています。
• タイトルはそれぞれ「AAA」と「BBB」になります。
• TabItemの中にStackPanelなどを設置し，任意のコントロールを配置します

using System.Windows;

namespace WPF022
{
    ///
    /// MainWindow.xaml の相互作用ロジック
    /// 
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            MyTabControl.SelectedIndex = 1;
        }
    }
}

• MyTabControlのSelectedIndexを指定し，タブコントロールの表示されるページを変更しています。

Xamlのレイアウト「AAA」選択時

Xamlのレイアウト「BBB」選択時

実行結果