2

我知道 TabControl 的默认行为是包装标签，但在我的情况下没有发生。我认为这是因为放置了 TabControl 的网格。

我有一个选项卡控件。这被放置在堆栈面板内。这有足够的空间容纳 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>
4

1 回答 1

0

如果我理解您的问题，您希望标签 3 换行，但事实并非如此。我玩过您的代码，并且 TabControl 包装没有问题，我看到的是它以某种方式完成它。基本上它不会只包装一件物品，因为它看起来很有趣。将模板中的 TabPanel 替换为 wrap 面板，您将明白我的意思。

在下面粘贴代码可以做到这一点 - 一次包装一个项目：

<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"/>
于 2012-11-29T19:58:34.347 回答