C#のタブをコードから切り替える

C#のWPFのTabControl(TabItem)をコードから切り替えてみました。

目次

  1. タブの切り替えとはタブの選択するということ?
  2. 試してみた
  3. XAML
  4. コード
  5. 動かしてみた

タブの切り替えとはタブの選択するということ?

TabControlの中にTabItemを置いて、TabItemを選択することでページを変えるようなインターフェースを実現するわけです。

ということで、TabItemクラスのIsSelectedプロパティをtrueにすることで、表示をそのタブに切り替えできます。

試してみた

「い」「ろ」「は」というタブを持つアプリで、タブの外にあるボタンをクリックすることでタブの表示を切り替えてみます。

XAML

<Window x:Class="WpfApp1.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:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="200" Width="200" >
    <Grid>
        <StackPanel Orientation="Horizontal">
            <TabControl Width="120">
                <TabItem Header="い" Name="tabitemI">
                    <TextBlock Text="い" />
                </TabItem>
                <TabItem Header="ろ" Name="tabitemRo">
                    <TextBlock Text="ろ" />
                </TabItem>
                <TabItem Header="は" Name="tabitemHa">
                    <TextBlock Text="は" />
                </TabItem>
            </TabControl>
            <StackPanel>
                <Button Content="い"  Width="50" Margin="5" Name="buttonI" Click="buttonI_Click" />
                <Button Content="ろ"  Width="50" Margin="5" Name="buttonRo" Click="buttonRo_Click" />
                <Button Content="は"  Width="50" Margin="5" Name="buttonHa" Click="buttonHa_Click" />
            </StackPanel>
        </StackPanel>
    </Grid>
</Window>

TabControlの中にTabItemを配置します。

TabControlと各ボタンをStackPanelで配置します。

TabItem毎に名前を付けているだけで、特に難しいことはしてません。

コード

using System.Windows;

namespace WpfApp1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        private void buttonI_Click(object sender, RoutedEventArgs e)
        {
            tabitemI.IsSelected = true;
        }

        private void buttonRo_Click(object sender, RoutedEventArgs e)
        {
            tabitemRo.IsSelected = true;
        }

        private void buttonHa_Click(object sender, RoutedEventArgs e)
        {
            tabitemHa.IsSelected = true;
        }
    }
}

ボタンがクリックされたときに、各TabItemのIsSelectedプロパティをtrueにするようにしてあります。

TabItemがグループになっていて、自動的に排他してくれます。

動かしてみた

まず、アプリを起動した状態です。

image0

では、「ろ」ボタンをクリックしてみます。

image1

「ろ」タブに切り替わって、タブの中のTextBlockが表示されます。

「は」ボタンをクリックすると、同様に「は」タブが開きます。

image2

更新日
公開日

広告