Question

我知道TabControl的默认行为是包装选项卡，但在我的情况下不会发生这种情况。我认为这是因为TabControl所在的Grid。

我有一个Tab控件。它放在堆栈面板内。这有足够的空间容纳3个标签。现在我想添加第四个选项卡，它不是包装。我做了一些研究，发现如果我们使用任何Style或ControlTemplate，这将阻止Tabcontrol包装。

以下是我用于TabControl的ControlTemplate的代码。我看到同一行中的所有选项卡，而我实际上希望它在第三个选项卡后包装。有人可以告诉我如何实现这一点。

    <Grid VerticalAlignment="Top" Height="700">
  <Grid.Resources>
    <Style TargetType="{x:Type TabItem}">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type TabItem}">
            <Grid>
              <Border Name="Border" CornerRadius="6,6,0,0" Height="30" Margin="0,0,2,0" BorderBrush="Black" BorderThickness="1,1,1,1" >
                <ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" Margin="12,2,12,2" />
              </Border>
            </Grid>
            <ControlTemplate.Triggers>
              <Trigger Property="IsSelected" Value="True">
                <Setter TargetName="Border" Property="Background" Value="#BEC39F" />
                <Setter Property="Foreground" Value="Black" />
              </Trigger>
              <Trigger Property="IsSelected" Value="False">
                <Setter TargetName="Border" Property="Background" Value="#8A863D" />
                <Setter Property="Foreground" Value="White" />
              </Trigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
    <Style TargetType="{x:Type TabControl}">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type TabControl}">
            <Grid Height="525">
              <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
              </Grid.RowDefinitions>
              <TabPanel Grid.Row="0" Panel.ZIndex="1" Margin="0,0,4,-1" IsItemsHost="True" Background="Transparent" />
              <Border Grid.Row="1" BorderBrush="Black" BorderThickness="1" CornerRadius="0, 12, 12, 12">
                <Border.Background>
                  <LinearGradientBrush>
                    <GradientStop Color="#BEC39F" Offset="0" />
                    <GradientStop Color="White" Offset="1" />
                  </LinearGradientBrush>
                </Border.Background>
                <ContentPresenter ContentSource="SelectedContent" />
              </Border>
            </Grid>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </Grid.Resources>
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" MinHeight="150" />
    <RowDefinition Height="Auto" MinHeight="484" />
  </Grid.RowDefinitions>
  <StackPanel Grid.Row="1" Margin="0,20,0,0">
    <TabControl Margin="0,0,0,-61" Name="tabControl1" >
      <TabItem Name="tab0" >
        <TabItem.Header>
          Tab0
        </TabItem.Header>
      </TabItem>
      <TabItem Name="tab1">
        <TabItem.Header>
          Tab1
        </TabItem.Header>
      </TabItem>
      <TabItem Header="Tab2" Name="tab2">
      </TabItem>
      <TabItem Header="Tab3" Name="tab3"></TabItem>
    </TabControl>
  </StackPanel>
</Grid>

Answer 1

如果我理解你的问题，你希望标签3包装而不是。我玩你的代码并没有TabControl包装的问题，我看到它是以某种方式做到的。基本上它不会只包装一个项目，因为它看起来很有趣。用换行面板替换模板中的TabPanel，你会明白我的意思。

粘贴下面的代码即可 - 一次包装一个项目：

<Style TargetType="{x:Type TabControl}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabControl}">
                    <Grid Height="525">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <WrapPanel Margin="0,0,4,-1" IsItemsHost="True"/>
                            <Border Grid.Row="1" BorderBrush="Black" BorderThickness="1" CornerRadius="0, 12, 12, 12">
                                <Border.Background>
                                        <LinearGradientBrush>
                                            <GradientStop Color="#BEC39F" Offset="0" />
                                            <GradientStop Color="White" Offset="1" />
                                        </LinearGradientBrush>
                                </Border.Background>
                                <ContentPresenter ContentSource="SelectedContent" HorizontalAlignment="Stretch"/>
                            </Border>
                        </Grid>                         
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

如果你正在对你的标签项进行硬编码，你可以给你的tab3一定的宽度，它看起来不会很奇怪

<TabItem Header="Tab3" Name="tab3"/>

在选项卡控件中创建多行

1 个答案: