VB のたまご

作成日: 2017/03/05, 更新日: 2017/03/05



TabControl

    イメージ
  •  TabControl は、複数の表示内容を同じ表示領域で提供できるコントロールです。 とりあえずどういう風に動くのか見てみましょう。 以下サンプルです。「TabControlWindow1」という画面で作成していますが、「MainWindow」に書いても構いません。

  • スポンサーリンク


    <Window x:Class="TabControlWindow1"
            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:w03_ContainerControls"
            mc:Ignorable="d"
            Title="TabControlWindow1" Height="300" Width="300">
        
        <Grid>
    
            <TabControl Margin="10">
    
                <TabItem Header="tabpage1">
                    <WrapPanel>
                        <Button Content="button1" Margin="10" />
                        <Button Content="button2" Margin="10" />
                        <Button Content="button3" Margin="10" />
                        <Button Content="button4" Margin="10" />
                        <Button Content="button5" Margin="10" />
                    </WrapPanel>
                </TabItem>
    
                <TabItem Header="tabpage2">
                    <StackPanel>
                        <Button Content="button1" Margin="10" />
                        <Button Content="button2" Margin="10" />
                        <Button Content="button3" Margin="10" />
                        <Button Content="button4" Margin="10" />
                        <Button Content="button5" Margin="10" />
                    </StackPanel>
                </TabItem>
    
                <TabItem Header="tabpage3">
                    <Grid>
                        
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
    
                        <Button Content="button1" Margin="10" Grid.Row="0" Grid.Column="0" />
                        <Button Content="button2" Margin="10" Grid.Row="1" Grid.Column="0" />
                        <Button Content="button3" Margin="10" Grid.Row="0" Grid.Column="1" />
                        <Button Content="button4" Margin="10" Grid.Row="1" Grid.Column="1" />
    
                    </Grid>
                </TabItem>
                
            </TabControl>
            
        </Grid>
        
    </Window>
    

  •  大元が TabControl となり、1つ1つのタブページは TabItem で作成します。 TabItem もやはり1つのコントロールしか配置できないので、WrapPanel, StackPanel, Grid とレイアウト系コントロールを下地に敷いて使っています。

  • スポンサーリンク


  •  タブの位置は上下左右に切り替えることができます。

  • <Window x:Class="TabControlWindow2"
            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:w03_ContainerControls"
            mc:Ignorable="d"
            Title="TabControlWindow2" Height="350" Width="525">
    
        <Grid>
    
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
    
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
    
            <TabControl Margin="10" TabStripPlacement="Top"
                        Grid.Row="0" Grid.Column="0">
                <TabItem Header="tabpage1" />
                <TabItem Header="tabpage2" />
                <TabItem Header="tabpage3" />
            </TabControl>
    
            <TabControl Margin="10" TabStripPlacement="Bottom"
                        Grid.Row="1" Grid.Column="0">
                <TabItem Header="tabpage1" />
                <TabItem Header="tabpage2" />
                <TabItem Header="tabpage3" />
            </TabControl>
    
            <TabControl Margin="10" TabStripPlacement="Left"
                        Grid.Row="0" Grid.Column="1">
                <TabItem Header="tabpage1" />
                <TabItem Header="tabpage2" />
                <TabItem Header="tabpage3" />
            </TabControl>
    
            <TabControl Margin="10" TabStripPlacement="Right"
                        Grid.Row="1" Grid.Column="1">
                <TabItem Header="tabpage1" />
                <TabItem Header="tabpage2" />
                <TabItem Header="tabpage3" />
            </TabControl>
            
        </Grid>
        
    </Window>
    

  •  タブの位置を変更するには、TabStripPlacement に対して、「Top」、「Bottom」、「Left」、「Right」を指定します。