[C#][WPF]画面遷移する方法

WPFで画面遷移させる方法は、いくつかありますがここではタブコントロールを用いた方法を紹介します。

他の方法も紹介していますので、こちらも参考にしてください。

[C#][WPF]MVVMらしく画面遷移する方法！

WPFで画面遷移させる方法は、先にタブコントロールを用いた方法を紹介しました。 今回は、DataTemplateを使い、MVVMらしくコードビハインドではなく、プロパティ変更通知イベントにより切り替える方法を紹介します。 私の場合、１つのア...

take-secret-base.com

2021.09.08

タブを配置する

さっそく、タブコントロールを配置してみます。

<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="450" Width="800">
    <DockPanel>
        <TabControl>
            <TabItem Header="Tab1">
                <Label Content="label1"/>
            </TabItem>
            <TabItem Header="Tab2">
                <Label Content="label2"/>
            </TabItem>
            <TabItem Header="Tab3">
                <Label Content="label3"/>
            </TabItem>
        </TabControl>
    </DockPanel>
</Window>

タブを配置しただけなので、当然、下のようになります。

タブを切り替えれば、表示されるラベルが変わりますよね。

紹介する方法は、タブ名を消すことで、１つの画面のように見えることを利用したやり方です。

タブ名を消す

さっそく、タブ名を消してみましょう。

        <TabControl SelectedIndex="0">
            <TabControl.Template>
                <ControlTemplate TargetType="{x:Type TabControl}">
                    <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent"/>
                </ControlTemplate>
            </TabControl.Template>


            <TabItem Header="Tab1">
                <Label Content="label1"/>
            </TabItem>
            <TabItem Header="Tab2">
                <Label Content="label2"/>
            </TabItem>
            <TabItem Header="Tab3">
                <Label Content="label3"/>
            </TabItem>
        </TabControl>

Templateプロパティをいじって、Tab名部分を表示しないようにしています。

あと、'<TabControl SelectedIndex=”0″>’ を加えないと画面が真っ白になってしまいます。
タブ名を表示しなくなったことにより、タブコントロールがどのコンテンツを表示するか分からなくなってしまうためです。

タブのインデックスは0番から順に振られます。SelectedIndexに1を与えれば、Tab2の内容が表示されますし、SelectedIndexに2を与えれば、Tab3の内容が表示されます。

最後に

SelectedIndex にプロパティを Binding すれば、プロパティ値によって意図したタブに切り替えることが出来ます。

タブのインデックスをEnumで定義すれば、リソース管理も難しくないと思います。

ご参考まで。