如何基于IsActive条件实现WPF TabControl选项卡分两列布局

问题描述 #

需要实现一个WPF TabControl，将选项卡按两列严格分组：IsActive=true的项固定放在第一列，IsActive=false的项放在第二列。目前手动按顺序添加数据能实现效果，但动态生成数据时无法保证顺序，希望通过替换UniformGrid或其他方式实现准确的分组布局。

解决方案1：使用CollectionViewSource分组（MVVM友好） #

核心思路是通过CollectionViewSource将数据源按IsActive属性分组，再通过分组样式将不同组的项分配到对应列中。

1. 修改MainWindow.xaml

<Window x:Class="HMI.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:local="clr-namespace:HMI"
        xmlns:localVM="clr-namespace:HMI.ViewModel"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.DataContext>
        <localVM:HMIViewModel/>
    </Window.DataContext>
    <Window.Resources>
        <!-- 按IsActive分组的数据源 -->
        <CollectionViewSource x:Key="GroupedTabs" Source="{Binding ProcessVariablesGroups}">
            <CollectionViewSource.GroupDescriptions>
                <PropertyGroupDescription PropertyName="IsActive"/>
            </CollectionViewSource.GroupDescriptions>
        </CollectionViewSource>

        <Style TargetType="TabItem">
            <Setter Property="Height" Value="70"/>
            <Setter Property="Width" Value="70"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TabItem">
                        <Border Name="Border" BorderThickness="1" BorderBrush="Black" CornerRadius="5" Margin="2">
                            <ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" Margin="10,2"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter TargetName="Border" Property="Background" Value="LightGray" />
                            </Trigger>
                            <Trigger Property="IsSelected" Value="False">
                                <Setter TargetName="Border" Property="Background" Value="White" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

    <TabControl TabStripPlacement="Right" ItemsSource="{Binding Source={StaticResource GroupedTabs}}">
        <TabControl.Style>
            <Style TargetType="TabControl">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="TabControl">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="150"/>
                                </Grid.ColumnDefinitions>
                                <ContentPresenter Grid.Column="0" ContentSource="SelectedContent"/>
                                <!-- 右侧选项卡区域拆分为两列 -->
                                <Grid Grid.Column="1">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <ItemsPresenter/>
                                </Grid>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </TabControl.Style>

        <!-- 分组样式：将不同IsActive的组分配到对应列 -->
        <TabControl.GroupStyle>
            <GroupStyle>
                <GroupStyle.ContainerStyle>
                    <Style TargetType="GroupItem">
                        <Setter Property="Grid.Column" Value="{Binding Name, Converter={local:BooleanToColumnConverter}}"/>
                    </Style>
                </GroupStyle.ContainerStyle>
                <GroupStyle.Panel>
                    <ItemsPanelTemplate>
                        <StackPanel VerticalAlignment="Top"/>
                    </ItemsPanelTemplate>
                </GroupStyle.Panel>
            </GroupStyle>
        </TabControl.GroupStyle>

        <TabControl.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Name}"/>
            </DataTemplate>
        </TabControl.ItemTemplate>
        <TabControl.ContentTemplate>
            <DataTemplate>
                <StackPanel>
                    <Button Content="{Binding Name}" Margin="5" Width="120"/>
                    <ListView ItemsSource="{Binding ProcessVariables}">
                        <ListView.View>
                            <GridView>
                                <GridViewColumn Header="变量名" DisplayMemberBinding="{Binding}"/>
                            </GridView>
                        </ListView.View>
                    </ListView>
                </StackPanel>
            </DataTemplate>
        </TabControl.ContentTemplate>
    </TabControl>
</Window>

2. 添加布尔值转列索引的转换器

创建转换器类，将IsActive的布尔值映射为Grid列索引：

using System;
using System.Globalization;
using System.Windows;
using System.Windows.Data;

namespace HMI
{
    public class BooleanToColumnConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return value is bool isActive ? (isActive ? 0 : 1) : 0;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

    // 标记扩展，方便XAML引用
    public class BooleanToColumnConverterExtension : MarkupExtension
    {
        public override object ProvideValue(IServiceProvider serviceProvider)
        {
            return new BooleanToColumnConverter();
        }
    }
}

解决方案2：自定义Panel（直接布局） #

如果不想处理分组逻辑，可以自定义Panel，直接根据IsActive属性将项布局到对应列：

1. 自定义Panel类

using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
using HMI.ViewModel;

namespace HMI
{
    public class ActiveInactivePanel : Panel
    {
        protected override Size MeasureOverride(Size availableSize)
        {
            var activeItems = new List<UIElement>();
            var inactiveItems = new List<UIElement>();

            foreach (UIElement child in Children)
            {
                var group = child.DataContext as ProcessVariablesGroup;
                if (group?.IsActive == true)
                    activeItems.Add(child);
                else
                    inactiveItems.Add(child);

                child.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));
            }

            double maxItemWidth = 0;
            double totalActiveHeight = 0;
            double totalInactiveHeight = 0;

            foreach (var item in activeItems)
            {
                maxItemWidth = System.Math.Max(maxItemWidth, item.DesiredSize.Width);
                totalActiveHeight += item.DesiredSize.Height;
            }
            foreach (var item in inactiveItems)
            {
                maxItemWidth = System.Math.Max(maxItemWidth, item.DesiredSize.Width);
                totalInactiveHeight += item.DesiredSize.Height;
            }

            return new Size(maxItemWidth * 2, System.Math.Max(totalActiveHeight, totalInactiveHeight));
        }

        protected override Size ArrangeOverride(Size finalSize)
        {
            var activeItems = new List<UIElement>();
            var inactiveItems = new List<UIElement>();

            foreach (UIElement child in Children)
            {
                var group = child.DataContext as ProcessVariablesGroup;
                if (group?.IsActive == true)
                    activeItems.Add(child);
                else
                    inactiveItems.Add(child);
            }

            double columnWidth = finalSize.Width / 2;
            double activeY = 0;
            double inactiveY = 0;

            foreach (var item in activeItems)
            {
                item.Arrange(new Rect(0, activeY, columnWidth, item.DesiredSize.Height));
                activeY += item.DesiredSize.Height;
            }
            foreach (var item in inactiveItems)
            {
                item.Arrange(new Rect(columnWidth, inactiveY, columnWidth, item.DesiredSize.Height));
                inactiveY += item.DesiredSize.Height;
            }

            return finalSize;
        }
    }
}

2. 替换TabControl的ItemsPanel

<TabControl.ItemsPanel>
    <ItemsPanelTemplate>
        <local:ActiveInactivePanel VerticalAlignment="Top"/>
    </ItemsPanelTemplate>
</TabControl.ItemsPanel>

说明 #

• 方案1基于数据分组实现，符合MVVM设计模式，扩展性更强，适合复杂场景。
• 方案2通过自定义Panel直接控制布局，逻辑更直观，适合简单需求。

内容的提问来源于stack exchange，提问作者Fedor Yudin