【C# WPF TabControl】ヘッダーのタブをスクロールする

2022 4/10

2022年4月10日 2023年1月16日

今回、TabControlのヘッダーのタブをスクロールさせる方法を書きます。

ヘッダー行は、1行で表示させます。ヘッダー行の右側にスクロールボタンを設置します。

デフォルトの設定だと、タブの数が増えると、TabControl の幅に収まらないものは、ヘッダーの上部にどんどん追加されます。それをさけるのが目的です。

今回作成したコードは↓からダウンロードできます。

前回記事では、タブコントロールに追加、削除のボタンを追加をやってます。今回のコードはその続きとなってます。

TabControlのヘッダーを編集する

実際どのようにすればいいのか？

とりあえず、TabControlのテンプレートを編集する方法で考えます。

xamlファイルを開いている状態で、TabControlを選択し、右クリック→テンプレートの編集→テンプレートのコピーで、編集ができます。

テンプレートを見ている感じだと、TabPanel でタブの設定をしていそうだと思いました。( 下の図のオレンジ●の32行目 )

なので、TabPanelの部分を拡張して、スクロールできるようにします。

TabPanelの拡張内容

Gridで右端に左、右それぞれのスクロールボタンを配置
TabPanelはScrollViewer で囲む
スクロールボタンは、RepeartButtonとし、ScrollBarにコマンドを送るようにする

MainWindow.xaml のタブコントロールの修正の抜粋です。( 全コードのリンクは、この記事の下のほうにあります。)

<Grid Grid.Column="0" Grid.Row="0" >
  <Grid.ColumnDefinitions>
    <ColumnDefinition x:Name="ColumnDefinition3" Width="*" />
    <ColumnDefinition x:Name="ColumnDefinition4" Width="60" />
  </Grid.ColumnDefinitions>
  <ScrollViewer x:Name="scrollbar" Grid.Column="0" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Disabled" CanContentScroll="True" IsDeferredScrollingEnabled="False" SnapsToDevicePixels="True">
    <TabPanel x:Name="headerPanel" Background="Transparent" IsItemsHost="true" Margin="2,2,2,0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1" />
  </ScrollViewer>
  <Grid Grid.Column="1">
    <RepeatButton x:Name="left" Content="◀" Width="30" Height="auto" HorizontalAlignment="Left" CommandTarget="{Binding ElementName=scrollbar}" Command="{x:Static ScrollBar.LineLeftCommand}" />
    <RepeatButton x:Name="right" Content="▶" Width="30" Height="auto" HorizontalAlignment="Right" CommandTarget="{Binding ElementName=scrollbar}" Command="{x:Static ScrollBar.LineRightCommand}" />
  </Grid>
</Grid>

タブのスクロールに関連するところだけです。

このようにすることで、スクロールボタンでタブのスクロールができるようになりました。