WPFタブアイテムの配置

Question

WPFを使用しているタブコントロールの最上部の左隅に3つのタブアイテムを配置する適切な方法はありますか？

マージンを変更して4番目のタブアイテムを右に移動しようとしましたが、これは良い結果をもたらしません。まず第一にそれは短く切られ、第二のものは選択されたとき正しく表示されません。

Answer 1

問題は、TabControlによってタブをレイアウトするために内部的に使用されるTabPanelが、あなたが望むものをサポートしていないように見えることです。迅速な回避策は、例えば、何か他のものでDockPanelをタブパネルを置き換えるために、次のようになります。

<Window x:Class="Window1" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="Window1" Height="300" Width="300"> 
    <TabControl> 
     <TabControl.Template> 
      <ControlTemplate TargetType="TabControl"> 
       <Grid> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="Auto"/> 
         <RowDefinition Height="*"/> 
        </Grid.RowDefinitions> 
        <Border BorderThickness="0,0,1,1" BorderBrush="#D0CEBF" Grid.Row="1"> 
         <Border BorderThickness="{TemplateBinding BorderThickness}" 
           BorderBrush="{TemplateBinding BorderBrush}"> 
          <Border Background="{TemplateBinding Background}"> 
           <ContentPresenter ContentSource="SelectedContent"/> 
          </Border> 
         </Border> 
        </Border> 
        <DockPanel IsItemsHost="True" LastChildFill="False" Margin="2,2,2,0" /> 
       </Grid> 
      </ControlTemplate> 
     </TabControl.Template> 

     <TabItem Header="Item 1" /> 
     <TabItem Header="Item 2" /> 
     <TabItem Header="Item 3" /> 
     <TabItem Header="Item 4" DockPanel.Dock="Right" /> 
    </TabControl> 
</Window> 

（参考：これはTabControlのスタイリングのためのMSDN exampleの修正版です）

シンプルDockPanel TabPanelほど滑らかに動作しません。タブを切り替えるときにタブが少しジャンプしますが、これによって開始される可能性があります。たぶん、TabPanelをサブクラス化して関連する部分をオーバーライドすると、より正確な結果が得られます。私はあなたがこれにどれくらいの努力をしたいのかにかかっていると思います。

Answer 2

TabControl内のTabPanelを目的の動作を提供するカスタムに置き換える必要があります。デフォルトのpanelsのどれもあなたの希望する動作をそのままの形で提供するものではありません。

これは、含まれている項目の数に基づいてパネル内にカスタム配置を提供するために、MeasureOverrideとArrangeOverrideをオーバーライドする必要があります。

Answer 3

これには、TabControl用のカスタムControlTemplateが必要です。私は、デフォルトのTabPanelではなくDockPanelをアイテムホストとして使用した例を試しました。

<Style TargetType="{x:Type TabControl}"> 
     <Setter Property="OverridesDefaultStyle" 
       Value="True" /> 
     <Setter Property="SnapsToDevicePixels" 
       Value="True" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type TabControl}"> 
        <Grid KeyboardNavigation.TabNavigation="Local"> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="Auto" /> 
          <RowDefinition Height="*" /> 
         </Grid.RowDefinitions> 
         <DockPanel Name="HeaderPanel" 
            LastChildFill="False" 
            Grid.Row="0" 
            Panel.ZIndex="1" 
            Margin="0,0,4,-1" 
            IsItemsHost="True" 
            KeyboardNavigation.TabIndex="1" 
            Background="Transparent" /> 
         <Border Name="Border" 
           Grid.Row="1" 
           Background="WhiteSmoke" 
           BorderBrush="Black" 
           BorderThickness="1" 
           CornerRadius="2" 
           KeyboardNavigation.TabNavigation="Local" 
           KeyboardNavigation.DirectionalNavigation="Contained" 
           KeyboardNavigation.TabIndex="2"> 
          <ContentPresenter Name="PART_SelectedContentHost" 
               Margin="4" 
               ContentSource="SelectedContent" /> 
         </Border> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

問題は、私はのControlTemplate例えば外TabItemsにDockPanel.Dockプロパティを露出させる方法を知っていないということです

<TabControl Margin="10"> 
    <TabItem Header="Tab One" DockPanel.Dock="Left"/> 
    <TabItem Header="Tab Two" DocKPanel.Dock="Left"/> 
    <TabItem Header="Tab Three" DocKPanel.Dock="Left"/> 
    <TabItem Header="Tab Four" DocKPanel.Dock="Right"/> 
</TabControl> 

// Note: This does not work!! 

私はあなた自身のパネルを作成してTabItemsをホストする必要があります。これは、TabPanelに組み込まれているオーバーフロー動作のようなものを処理する必要があるため、非常に多くの作業になることに注意してください。

これを試しても、この機能をControlTemplateの外に公開したい場合は、TabControlというカスタムを記述する必要があると思います。

あなたは「見えない」タブを挿入することにより、私は、間隔を調整することができます（つまり、上から下のタブを移動）することを私が見つけたこのpost

Answer 4

に私の答えを参照してください、この道を行きたい場合

例えば

：

TabItem Height="100" Visibility="Hidden" <br> 
TabItem..... <br> 
TabItem.... <br>