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

TabControl（タブコントロール）とは？
TabControlの書き方
主なプロパティ
サンプルコード

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

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

TabControlの書き方

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

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

</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>

<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">

<Button Content="Save"

Margin="10"/>

</StackPanel>

</TabItem>

<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;
        }
    }
}