WPF/C# TabItem 水平手风琴样式的标题。可能吗？

Question

我有一个 TabControl，我想更改标题样式。
我使用 C# 和 WPF。

TabItem header需要采用水平手风琴样式。
我希望你明白我的意思。如果你没有，那么我可以给你看照片。
我的项目有可能实现吗？无需额外插件。

我自己的搜索能力还不足以得到答案。我发现的是DevExpress...有了这个就有可能了。但是当我想使用它时，我需要许可证等等。我想避免它。

希望得到帮助。欲了解更多信息（代码、图片等），请询问我。

亲切的问候

Answer 1

你的意思是这样的，对吗？

这是可能的，如本文所示。我很确定您必须实现自己的 UserControl 才能创建手风琴样式 TabControl。

Answer 2

虽然无法适应大小，但希望这个纯XAML解决方案可以帮助到你。
你需要做什么：

设置
```
TabControl.TabStripPlacement
```
以确定
```
Header
```
显示的位置。

根据

TabItem.MaxWidth/MaxHeight

值设置第一个

TabControl.TabStripPlacement

来确定容器大小。

<Window x:Class="WPFMagic.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:system="clr-namespace:System;assembly=System.Runtime"
        Width="800" Height="450"
        mc:Ignorable="d">
    <Window.Resources>
        <Style TargetType="TabControl">
            <Setter Property="AlternationCount" Value="99999" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabControl}">
                        <Grid x:Name="templateRoot"
                              ClipToBounds="true" KeyboardNavigation.TabNavigation="Local"
                              SnapsToDevicePixels="true">
                            <StackPanel x:Name="headerPanel"
                                        Grid.Column="0"
                                        Panel.ZIndex="1"
                                        Background="Transparent" IsItemsHost="true" KeyboardNavigation.TabIndex="1"
                                        Orientation="Horizontal" />
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter TargetName="templateRoot" Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                            </Trigger>
                            <Trigger Property="TabStripPlacement" Value="Top">
                                <Setter TargetName="headerPanel" Property="Orientation" Value="Vertical" />
                            </Trigger>
                            <Trigger Property="TabStripPlacement" Value="Bottom">
                                <Setter TargetName="headerPanel" Property="Orientation" Value="Vertical" />
                            </Trigger>
                            <Trigger Property="TabStripPlacement" Value="Left">
                                <Setter TargetName="headerPanel" Property="Orientation" Value="Horizontal" />
                            </Trigger>
                            <Trigger Property="TabStripPlacement" Value="Right">
                                <Setter TargetName="headerPanel" Property="Orientation" Value="Horizontal" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="ItemContainerStyle">
                <Setter.Value>
                    <Style TargetType="TabItem">
                        <Style.Resources>
                            <BooleanToVisibilityConverter x:Key="Btv" />
                        </Style.Resources>
                        <Setter Property="Grid.Column" Value="{Binding Path=(ItemsControl.AlternationIndex), RelativeSource={RelativeSource Self}}" />
                        <Setter Property="Grid.Row" Value="{Binding Path=(ItemsControl.AlternationIndex), RelativeSource={RelativeSource Self}}" />
                        <Setter Property="MaxHeight" Value="{Binding Path=(ItemsControl.Items)[0].(TabItem.MaxHeight), RelativeSource={RelativeSource FindAncestor, AncestorType=TabControl}, TargetNullValue='Auto'}" />
                        <Setter Property="MaxWidth" Value="{Binding Path=(ItemsControl.Items)[0].(TabItem.MaxWidth), RelativeSource={RelativeSource FindAncestor, AncestorType=TabControl}, TargetNullValue='Auto'}" />
                        <Setter Property="BorderThickness" Value="1" />
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type TabItem}">
                                    <Grid x:Name="templateRoot" SnapsToDevicePixels="true">
                                        <Grid>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition x:Name="ColumnDefinition0" />
                                                <ColumnDefinition x:Name="ColumnDefinition1" Width="Auto" />
                                            </Grid.ColumnDefinitions>
                                            <Grid.RowDefinitions>
                                                <RowDefinition x:Name="RowDefinition0" Height="Auto" />
                                                <RowDefinition x:Name="RowDefinition1" />
                                            </Grid.RowDefinitions>
                                            <Border x:Name="headerPanel"
                                                    Margin="0"
                                                    Background="{TemplateBinding Background}"
                                                    BorderBrush="{TemplateBinding BorderBrush}"
                                                    BorderThickness="{TemplateBinding BorderThickness}">
                                                <ContentPresenter x:Name="contentPresenter"
                                                                  Margin="{TemplateBinding Padding}"
                                                                  HorizontalAlignment="{Binding HorizontalContentAlignment,
                                                                                                RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
                                                                  VerticalAlignment="{Binding VerticalContentAlignment,
                                                                                              RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
                                                                  ContentSource="Header" Focusable="False" RecognizesAccessKey="True"
                                                                  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                                            </Border>
                                            <ContentPresenter x:Name="contentPanel"
                                                              Grid.Row="1"
                                                              ContentSource="Content"
                                                              Visibility="{TemplateBinding IsSelected,
                                                                                           Converter={StaticResource Btv}}" />
                                        </Grid>
                                    </Grid>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="TabStripPlacement" Value="Bottom">
                                            <Setter TargetName="headerPanel" Property="Grid.Row" Value="1" />
                                            <Setter TargetName="contentPanel" Property="Grid.Row" Value="0" />
                                            <Setter TargetName="RowDefinition0" Property="Height" Value="*" />
                                            <Setter TargetName="RowDefinition1" Property="Height" Value="Auto" />
                                        </Trigger>
                                        <Trigger Property="TabStripPlacement" Value="Left">
                                            <Setter TargetName="headerPanel" Property="Grid.Row" Value="0" />
                                            <Setter TargetName="contentPanel" Property="Grid.Row" Value="0" />
                                            <Setter TargetName="headerPanel" Property="Grid.Column" Value="0" />
                                            <Setter TargetName="contentPanel" Property="Grid.Column" Value="1" />
                                            <Setter TargetName="ColumnDefinition0" Property="Width" Value="Auto" />
                                            <Setter TargetName="ColumnDefinition1" Property="Width" Value="*" />
                                            <Setter TargetName="RowDefinition0" Property="Height" Value="*" />
                                            <Setter TargetName="RowDefinition1" Property="Height" Value="0" />
                                        </Trigger>
                                        <Trigger Property="TabStripPlacement" Value="Right">
                                            <Setter TargetName="headerPanel" Property="Grid.Row" Value="0" />
                                            <Setter TargetName="contentPanel" Property="Grid.Row" Value="0" />
                                            <Setter TargetName="headerPanel" Property="Grid.Column" Value="1" />
                                            <Setter TargetName="contentPanel" Property="Grid.Column" Value="0" />
                                            <Setter TargetName="ColumnDefinition0" Property="Width" Value="*" />
                                            <Setter TargetName="ColumnDefinition1" Property="Width" Value="Auto" />
                                            <Setter TargetName="RowDefinition0" Property="Height" Value="*" />
                                            <Setter TargetName="RowDefinition1" Property="Height" Value="0" />
                                        </Trigger>
                                        <Trigger Property="IsEnabled" Value="false">
                                            <Setter TargetName="templateRoot" Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                        <Style.Triggers>
                            <MultiDataTrigger>
                                <MultiDataTrigger.Conditions>
                                    <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Mode=Self}}" Value="true" />
                                    <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Top" />
                                </MultiDataTrigger.Conditions>
                                <Setter Property="Height" Value="{Binding MaxHeight, RelativeSource={RelativeSource Self}}" />
                            </MultiDataTrigger>
                            <MultiDataTrigger>
                                <MultiDataTrigger.Conditions>
                                    <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Mode=Self}}" Value="true" />
                                    <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Bottom" />
                                </MultiDataTrigger.Conditions>
                                <Setter Property="Height" Value="{Binding MaxHeight, RelativeSource={RelativeSource Self}}" />
                            </MultiDataTrigger>
                            <MultiDataTrigger>
                                <MultiDataTrigger.Conditions>
                                    <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Mode=Self}}" Value="true" />
                                    <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Left" />
                                </MultiDataTrigger.Conditions>
                                <Setter Property="Width" Value="{Binding MaxWidth, RelativeSource={RelativeSource Self}}" />
                            </MultiDataTrigger>
                            <MultiDataTrigger>
                                <MultiDataTrigger.Conditions>
                                    <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Mode=Self}}" Value="true" />
                                    <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Right" />
                                </MultiDataTrigger.Conditions>
                                <Setter Property="Width" Value="{Binding MaxWidth, RelativeSource={RelativeSource Self}}" />
                            </MultiDataTrigger>
                        </Style.Triggers>
                    </Style>
                </Setter.Value>
            </Setter>
        </Style>
        <system:String x:Key="ExampleText" xml:space="preserve">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at molestie leo, a condimentum ligula. Integer sit amet elit bibendum, ultricies urna vitae, fermentum nulla. Sed aliquam ex et euismod mollis. Vivamus blandit elit eget diam dignissim, ac molestie purus cursus. Aenean rhoncus ultricies leo, at placerat ligula suscipit vitae. Phasellus mauris enim, molestie ac pretium quis, rhoncus id mi. Integer tincidunt euismod massa a molestie. Aliquam egestas velit eu tincidunt sagittis. In pulvinar magna turpis, vel eleifend lectus accumsan sed. Aenean in ipsum egestas, ornare arcu sed, dignissim risus.

Curabitur tincidunt rutrum consectetur. Suspendisse lobortis tellus nec sapien maximus, sed molestie odio pharetra. Nulla facilisi. Etiam feugiat tortor quis rutrum gravida. Nullam convallis non massa eget semper. Cras dapibus dapibus neque a imperdiet. Pellentesque eget semper lacus, vitae bibendum libero.

Phasellus semper, turpis nec semper pharetra, nisl urna viverra turpis, ut tincidunt libero mi non tellus. Sed lobortis lectus sit amet enim dictum vehicula. Quisque dictum commodo sagittis. Nunc ornare augue id dolor accumsan, eu euismod sapien ullamcorper. Fusce vel nulla non arcu aliquam pulvinar. Curabitur congue diam vel felis efficitur lobortis. Proin tortor eros, auctor in porta in, pulvinar ac dolor. Donec ut massa massa.

Duis interdum neque ac quam maximus, non eleifend elit tincidunt. Nullam scelerisque fermentum mi, at luctus velit consectetur ut. In blandit ipsum sapien, sed faucibus nisl dapibus quis. Vestibulum cursus erat non feugiat cursus. Proin tristique ultricies ipsum, quis accumsan tortor. Nullam sit amet est semper quam hendrerit accumsan eget a erat. Morbi vulputate sagittis elit luctus ornare. Nam hendrerit sed arcu a ornare. Aliquam pharetra pretium massa quis auctor. Nunc volutpat, lorem pellentesque dapibus aliquam, libero sem vehicula quam, quis viverra libero risus a metus. Pellentesque ullamcorper luctus lectus. Integer facilisis tincidunt leo, eget consequat arcu maximus ut. Fusce ut ullamcorper ligula.

Integer ultrices, sapien id pretium blandit, ex purus volutpat odio, at pretium est nunc vitae turpis. Nunc elementum porttitor malesuada. Etiam mauris magna, lobortis id purus ut, congue ornare dolor. Integer a aliquet metus. Integer rutrum sapien vel ornare pellentesque. Etiam ut quam mi. Maecenas sapien velit, venenatis in leo consectetur, malesuada aliquet justo. Nulla facilisi. Aliquam lacus lorem, sollicitudin ac augue sed, finibus iaculis nisi. Nulla ac enim id metus malesuada tincidunt. Vestibulum vel iaculis felis. Fusce eu nunc eleifend metus porta porttitor ut a velit. Donec eu tellus vitae nunc iaculis fermentum sit amet dignissim orci. Donec sit amet nisl a enim sodales sollicitudin. Vestibulum orci sem, vulputate ac ante sit amet, accumsan aliquam massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
        </system:String>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <TabControl TabStripPlacement="Left">
            <TabItem Header="Item1" MaxWidth="200">
                <DockPanel>
                    <TextBox Width="100"
                             DockPanel.Dock="Left" Text="Content1" />
                    <Button Content="Submit1" />
                </DockPanel>
            </TabItem>
            <TabItem Header="Item2">
                <DockPanel>
                    <TextBox Width="100"
                             DockPanel.Dock="Left" Text="Content2" />
                    <Button Content="Submit2" />
                </DockPanel>
            </TabItem>
            <TabItem Header="Item3">
                <DockPanel>
                    <TextBox Width="100"
                             DockPanel.Dock="Left" Text="Content3" />
                    <Button Content="Submit3" />
                </DockPanel>
            </TabItem>
        </TabControl>
        <TabControl Grid.Row="1">
            <TabItem Header="Item1" MaxHeight="300">
                <TextBlock Text="{StaticResource ExampleText}" TextWrapping="Wrap" />
            </TabItem>
            <TabItem Header="Item2">
                <TextBlock Text="{StaticResource ExampleText}" TextWrapping="Wrap" />
            </TabItem>
            <TabItem Header="Item3">
                <TextBlock Text="{StaticResource ExampleText}" TextWrapping="Wrap" />
            </TabItem>
        </TabControl>
    </Grid>
</Window>

WPF/C# TabItem 水平手风琴样式的标题。可能吗？

问题描述投票：0回答：2

2个回答

最新问题

WPF/C# TabItem 水平手风琴样式的标题。可能吗？

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2