WPF之TabControl——TabItem纵向显示

一、首先我们看一下TabItem横向显示的效果，如下：

XAML：

        <TabControl Style="{StaticResource TabControlStyle}">
            <TabItem Style="{StaticResource TabItemStyle}" Header="测试">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition></RowDefinition>
                        <RowDefinition></RowDefinition>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition></ColumnDefinition>
                        <ColumnDefinition></ColumnDefinition>
                    </Grid.ColumnDefinitions>

                    <TextBlock Text="测试数据一" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
                    <TextBox Grid.Column="1" Text="{Binding TestOne}" HorizontalContentAlignment="Center"  VerticalContentAlignment="Center" Height="30" Margin="5" ></TextBox>
                    <TextBlock Grid.Row="1" Text="测试数据二" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
                    <TextBox Grid.Row="1" Grid.Column="1" Text="{Binding TestTwo}" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" Height="30" Margin="5" ></TextBox>
                </Grid>
            </TabItem>
            <TabItem Style="{StaticResource TabItemStyle}" Header="试验">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition></RowDefinition>
                        <RowDefinition></RowDefinition>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition></ColumnDefinition>
                        <ColumnDefinition></ColumnDefinition>
                    </Grid.ColumnDefinitions>

                    <TextBlock Text="试验数据一" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
                    <TextBox Grid.Column="1" Text="{Binding LabOne}" Height="30" Margin="5" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"></TextBox>
                    <TextBlock Grid.Row="1" Text="试验数据二" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
                    <TextBox Grid.Row="1" Grid.Column="1" Text="{Binding LabTwo}"   HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Height="30" Margin="5" ></TextBox>
                </Grid>
            </TabItem>
        </TabControl>

二、接着我们看一下TabItem纵向显示的效果，如下：

（1）先建立一个TabItemConverter:

public class TabItemConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            string str = value.ToString();
            StringBuilder sb = new StringBuilder();
            for (int i = 0; i < str.Length; i++)
            {
                if (i < (str.Length - 1))
                {
                    sb.Append(str[i]);
                    sb.Append("\n");
                }
                else
                {
                    sb.Append(str[i]);
                }
            }
            return sb.ToString();
        }
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

(2)在ResourceDictionary中引用TabItemConverter ：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:sys="clr-namespace:System;assembly=mscorlib"
                    xmlns:shell="clr-                    namespace:System.Windows.Shell;assembly=PresentationFramework"
                    xmlns:converts="clr-namespace:StyleWpf.Converts">

    <converts:TabItemConverter x:Key="TabItemConverter"></converts:TabItemConverter>


    <!--此处省略N行-->


    <!--文字竖排-->
    <Style x:Key="TabItemVerticalStyle" TargetType="TabItem">
        <Setter Property="Width" Value="35"></Setter>
        <Setter Property="Height" Value="Auto"></Setter>
        <Setter Property="Margin" Value="0"></Setter>
        <Setter Property="FontWeight" Value="SemiBold"></Setter>
        <Setter Property="FontSize" Value="14"></Setter>
        <Setter Property="FontFamily" Value="Microsoft YaHei"></Setter>
        <Setter Property="Foreground" Value="LightBlue"></Setter>
        <Setter Property="HeaderTemplate">
            <Setter.Value>
                <DataTemplate>
                    <TextBlock Text="{Binding Path=Header, RelativeSource={RelativeSource AncestorType=TabItem},Converter={StaticResource TabItemConverter}}"></TextBlock>
                </DataTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TabItem">
                    <Grid>
                        <Border Name="Border" Background="Transparent" BorderThickness="0,0,2,0"   
                                Width="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path= Width}"  
                                Height="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path= Height}">
                            <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" RecognizesAccessKey="True">
                            </ContentPresenter>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="Border" Property="BorderBrush" Value="Blue"/>
                            <Setter Property="Foreground" Value="Black"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>

（3）XAML前端代码如下：

        <TabControl Grid.Column="3" Style="{StaticResource TabControlStyle}" TabStripPlacement="Left">
            <TabItem Style="{StaticResource TabItemVerticalStyle}" Header="测试">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition></RowDefinition>
                        <RowDefinition></RowDefinition>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition></ColumnDefinition>
                        <ColumnDefinition></ColumnDefinition>
                    </Grid.ColumnDefinitions>

                    <TextBlock Text="测试数据一" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
                    <TextBox Grid.Column="1" Text="{Binding TestOne}" HorizontalContentAlignment="Center"  VerticalContentAlignment="Center" Height="30" Margin="5" ></TextBox>
                    <TextBlock Grid.Row="1" Text="测试数据二" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
                    <TextBox Grid.Row="1" Grid.Column="1" Text="{Binding TestTwo}" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" Height="30" Margin="5" ></TextBox>
                </Grid>
            </TabItem>
            <TabItem Style="{StaticResource TabItemVerticalStyle}" Header="试验">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition></RowDefinition>
                        <RowDefinition></RowDefinition>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition></ColumnDefinition>
                        <ColumnDefinition></ColumnDefinition>
                    </Grid.ColumnDefinitions>

                    <TextBlock Text="试验数据一" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
                    <TextBox Grid.Column="1" Text="{Binding LabOne}" Height="30" Margin="5" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"></TextBox>
                    <TextBlock Grid.Row="1" Text="试验数据二" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
                    <TextBox Text="{Binding LabTwo}" Grid.Row="1" Grid.Column="1" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Height="30" Margin="5" ></TextBox>
                </Grid>
            </TabItem>
        </TabControl>

https://blog.csdn.net/whshiyun/article/details/78070328

备注：看了以上链接自己写了一个。第一次写，没什么经验，有什么错误，欢迎大家指正，谢谢--------每天进步一点点。