2017-12-19 57 views
0

私はWPFアプリケーションでTabControlを使用していますが、親コントロールの幅に応じて1つのタブ行と2つのタブ行を持つことがあります。これは確かにTabControlの期待される動作です。WPF TabControlには常に2つのタブ行があります

ただし、常に2つのタブ行が必要です。誰もこれを行う方法を知っていますか?

ありがとうございました。

TabControls

    <TabControl x:Name="StackOverflowTabControl" HorizontalAlignment="Stretch" Margin="10,10,10,0" VerticalAlignment="Stretch"> 
        <TabItem> 
         <TabItem.Header> 
          <TextBlock Text="Hey" FontWeight="SemiBold" /> 
         </TabItem.Header> 
         <DockPanel VerticalAlignment="Stretch"> 
          <Label Content="Hey" /> 
         </DockPanel> 
        </TabItem> 

        <TabItem HorizontalAlignment="Stretch" VerticalAlignment="Stretch" > 
         <TabItem.Header> 
          <TextBlock Text="Blah" FontWeight="SemiBold" /> 
         </TabItem.Header> 
         <DockPanel VerticalAlignment="Stretch" > 
          <Label Content="Hey 2" /> 
         </DockPanel> 
        </TabItem> 

        <TabItem HorizontalAlignment="Stretch" VerticalAlignment="Stretch" > 
         <TabItem.Header> 
          <TextBlock Text="Whatever" FontWeight="SemiBold" /> 
         </TabItem.Header> 
         <DockPanel VerticalAlignment="Stretch" > 
          <Label Content="Whatever" /> 
         </DockPanel> 
        </TabItem> 

        <TabItem HorizontalAlignment="Stretch" VerticalAlignment="Stretch" > 
         <TabItem.Header> 
          <TextBlock Text="Info" FontWeight="SemiBold" /> 
         </TabItem.Header> 
         <DockPanel VerticalAlignment="Stretch" > 
          <Label Content="Under Construction" HorizontalAlignment="Center" VerticalAlignment="Top" FontSize="24" /> 
         </DockPanel> 
        </TabItem> 

        <TabItem HorizontalAlignment="Stretch" VerticalAlignment="Stretch" > 
         <TabItem.Header> 
          <TextBlock Text="Something" FontWeight="SemiBold" /> 
         </TabItem.Header> 
         <DockPanel VerticalAlignment="Stretch" > 
          <Label Content="Hey" /> 
         </DockPanel> 
        </TabItem> 

        <TabItem HorizontalAlignment="Stretch" VerticalAlignment="Stretch" > 
         <TabItem.Header> 
          <TextBlock Text="Nothing" FontWeight="SemiBold" /> 
         </TabItem.Header> 
         <DockPanel VerticalAlignment="Stretch" > 
          <Label Content="Hey 3" /> 
         </DockPanel> 
        </TabItem> 

        <TabItem HorizontalAlignment="Stretch" VerticalAlignment="Stretch" > 
         <TabItem.Header> 
          <TextBlock Text="Forms" FontWeight="SemiBold" /> 
         </TabItem.Header> 
         <DockPanel VerticalAlignment="Stretch" > 
          <Label Content="Under Construction" HorizontalAlignment="Center" VerticalAlignment="Top" FontSize="24" /> 
         </DockPanel> 
        </TabItem> 

       </TabControl> 
+0

の幅を持つ例でありますあなたが望む配置。これはあなたのために十分柔軟ではない可能性がありますが、言及する価値があります:)。 –

+0

あなたの考えに感謝します。私はそれについていくつか考えます。 – dev1998

+0

あなたが確かに固定レイアウトを持っているなら、Mikeの提案はおそらく最も良いでしょう。しかし、これは、ユーザーが十分な幅を減らすと、2つではなく3つの行が得られることを意味します。これは、「2つの行を常に必要とする」という要件に違反します。 「いつも」は本当に何を意味していますか?ビューの幅を含むすべてのタブに合わせるのに2つの行では不十分な場合はどうなりますか?あなたが本当にしたい振る舞いは、「私はどれくらいのスペースを持っていても、必要に応じて行を追加しても、最低2行は必​​要ですか? – Rowbear

答えて

1

右TabControlのをクリックしてEditTemplate-を選択>テンプレートのコピーを取得するためにコピーを編集します。次に、テンプレート内のTabPanelを見つけ、Horizo​​ntalAlignment = "Left"とMaxWidth = xを追加します。ここで、xは、タブ項目を次の行に移動する幅です。 以下は、固定レイアウトを持っている場合は、あなたが取得するまで(または少なくとも最大親サイズ)、あなたは、単にさまざまなタブヘッダに適切な `MinWidth`を割り当てることができ200

<Window.Resources> 
    <SolidColorBrush x:Key="TabItem.Selected.Background" Color="#FFFFFF"/> 
    <SolidColorBrush x:Key="TabItem.Selected.Border" Color="#ACACAC"/> 
    <Style x:Key="TabControlStyle1" TargetType="{x:Type TabControl}"> 
     <Setter Property="Padding" Value="2"/> 
     <Setter Property="HorizontalContentAlignment" Value="Center"/> 
     <Setter Property="VerticalContentAlignment" Value="Center"/> 
     <Setter Property="Background" Value="{StaticResource TabItem.Selected.Background}"/> 
     <Setter Property="BorderBrush" Value="{StaticResource TabItem.Selected.Border}"/> 
     <Setter Property="BorderThickness" Value="1"/> 
     <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type TabControl}"> 
        <Grid x:Name="templateRoot" ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local"> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition x:Name="ColumnDefinition0"/> 
          <ColumnDefinition x:Name="ColumnDefinition1" Width="0"/> 
         </Grid.ColumnDefinitions> 
         <Grid.RowDefinitions> 
          <RowDefinition x:Name="RowDefinition0" Height="Auto"/> 
          <RowDefinition x:Name="RowDefinition1" Height="*"/> 
         </Grid.RowDefinitions> 
         <TabPanel x:Name="headerPanel" Background="Transparent" Grid.Column="0" IsItemsHost="true" Margin="4,0,0,2" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1" MaxWidth="200" HorizontalAlignment="Left"/> 
         <Border x:Name="contentPanel" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="0" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="1" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local"> 
          <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> 
         </Border> 
        </Grid> 
        <ControlTemplate.Triggers> 
         <Trigger Property="TabStripPlacement" Value="Bottom"> 
          <Setter Property="Grid.Row" TargetName="headerPanel" Value="1"/> 
          <Setter Property="Grid.Row" TargetName="contentPanel" Value="0"/> 
          <Setter Property="Height" TargetName="RowDefinition0" Value="*"/> 
          <Setter Property="Height" TargetName="RowDefinition1" Value="Auto"/> 
          <Setter Property="Margin" TargetName="headerPanel" Value="2,0,2,2"/> 
         </Trigger> 
         <Trigger Property="TabStripPlacement" Value="Left"> 
          <Setter Property="Grid.Row" TargetName="headerPanel" Value="0"/> 
          <Setter Property="Grid.Row" TargetName="contentPanel" Value="0"/> 
          <Setter Property="Grid.Column" TargetName="headerPanel" Value="0"/> 
          <Setter Property="Grid.Column" TargetName="contentPanel" Value="1"/> 
          <Setter Property="Width" TargetName="ColumnDefinition0" Value="Auto"/> 
          <Setter Property="Width" TargetName="ColumnDefinition1" Value="*"/> 
          <Setter Property="Height" TargetName="RowDefinition0" Value="*"/> 
          <Setter Property="Height" TargetName="RowDefinition1" Value="0"/> 
          <Setter Property="Margin" TargetName="headerPanel" Value="2,2,0,2"/> 
         </Trigger> 
         <Trigger Property="TabStripPlacement" Value="Right"> 
          <Setter Property="Grid.Row" TargetName="headerPanel" Value="0"/> 
          <Setter Property="Grid.Row" TargetName="contentPanel" Value="0"/> 
          <Setter Property="Grid.Column" TargetName="headerPanel" Value="1"/> 
          <Setter Property="Grid.Column" TargetName="contentPanel" Value="0"/> 
          <Setter Property="Width" TargetName="ColumnDefinition0" Value="*"/> 
          <Setter Property="Width" TargetName="ColumnDefinition1" Value="Auto"/> 
          <Setter Property="Height" TargetName="RowDefinition0" Value="*"/> 
          <Setter Property="Height" TargetName="RowDefinition1" Value="0"/> 
          <Setter Property="Margin" TargetName="headerPanel" Value="0,2,2,2"/> 
         </Trigger> 
         <Trigger Property="IsEnabled" Value="false"> 
          <Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</Window.Resources> 
+0

ありがとう、私はこれを試してみましょう。 – dev1998

+0

これは素晴らしいです。うまくいけば、ユーザーはこのソリューションも好きだろう。 – dev1998

関連する問題