2

TabControl のデフォルトの動作はタブをラップすることですが、私の場合はそうではありません。これは、TabControl が配置されている Grid が原因だと思います。

タブ コントロールがあります。これは、スタック パネル内に配置されます。3 つのタブに十分なスペースがあります。今、4番目のタブを追加したいのですが、それは折り返していません。調査を行ったところ、Style または ControlTemplate を使用すると、Tabcontrol がラップされなくなることがわかりました。

以下は、TabControl に使用する ControlTemplate のコードです。すべてのタブが同じ行に表示されていますが、実際には 3 番目のタブの後に折り返す必要があります。誰かがそれを達成する方法を教えてもらえますか。

    <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のラッピングに問題はありませんでした。私が見ているのは、それが特定の方法でそれを行うということです。見た目がおもしろいので、基本的には1点だけはラッピングしません。テンプレートのTabPanelをラップパネルに置き換えると、私が何を意味するかがわかります。

以下にコードを貼り付けると、それが実行されます-一度に1つのアイテムをラップします：

<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 に答える