WPF 灵活的 TabControl 标头

2024-03-21

我想要一个TabControl与多个TabItems. These TabItems每个都有一个标题文本。这些文本的长度可能相差很大(例如 5 个字符长和 15 个字符长)。

我想要TabControl仅将标题对齐一行。

所有选项卡标题应使用相同的宽度,当有足够的可用空间时,我希望它们使用所有可用的空间,最多MaxWidth,这对于所有项目都是相同的。

因此,如果我想对 7 个项目使用 100 的 vMaxWidth`,则选项卡标题的最大宽度应为 700。如果有更多可用空间,则应忽略它。

如果可用空间较少,我希望该空间在项目之间平均分配。如果文本被切断,我想使用TextWrapping.

我现在已经尝试了多种方法来解决这个问题,这是我当前的设置:

<Style x:Key="Style-TabControl-Main" TargetType="{x:Type TabControl}">
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabControl}">
                <Grid KeyboardNavigation.TabNavigation="Local">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>

                    <Border BorderThickness="0,0,0,1" Margin="13,0,0,0" BorderBrush="{StaticResource Brush-White}">
                        <StackPanel Panel.ZIndex="1" x:Name="HeaderPanel" IsItemsHost="True" KeyboardNavigation.TabIndex="1" Background="Transparent" 
                                    Orientation="Horizontal"/>
                    </Border>

                    <Border x:Name="Border"
                            Grid.Row="1" Grid.ColumnSpan="2"
                            KeyboardNavigation.TabNavigation="Local"
                            KeyboardNavigation.DirectionalNavigation="Contained"
                            KeyboardNavigation.TabIndex="2"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}">
                        <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" />
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

And the TabItem Style

<Style x:Key="Style-TabItem-Main" TargetType="{x:Type TabItem}">
    <Setter Property="Height" Value="31"/>
    <Setter Property="Width" Value="180" />
    <Setter Property="Foreground" Value="{DynamicResource Brush-BrightRegular-Foreground}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">
                <Border x:Name="Border" Cursor="Hand" 
                        Margin="2,0,0,0"
                        BorderThickness="1,1,1,0"
                        CornerRadius="4,4,0,0"
                        BorderBrush="{DynamicResource Brush-BrightRegular-Background}"
                        Background="{DynamicResource Brush-White}">
                    <ContentPresenter x:Name="Content" VerticalAlignment="Center" HorizontalAlignment="Stretch" ContentSource="Header" RecognizesAccessKey="True"
                                        TextBlock.TextAlignment="Center" TextBlock.FontSize="16" />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected"   Value="True">
                        <Setter  Property="Foreground" Value="{DynamicResource Brush-White}"/>
                        <Setter TargetName="Border"  Property="Background" Value="{DynamicResource Brush-DefaultDark-Background}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我正在使用一个StackPanel代替TabPanel摆脱调整默认大小时发生的“堆叠”TabControl。但是,我无法满足我的其余要求。我尝试应用MaxWidth(而不是固定宽度)到TabItem标题,但这当然不起作用,因为该项目会缩小到所需的最小尺寸。


第 1 步(第一次尝试):将标题放在一行中,并为每个标题指定相同的宽度。

这可以通过使用来实现UniformGrid而不是标准 TabPanel,并将其行数锁定为 1。这是您的精简版本TabControl style:

<Style x:Key="Style-TabControl-Main" TargetType="{x:Type TabControl}">
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabControl}">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>

                    <Border>
                        <UniformGrid x:Name="HeaderPanel" IsItemsHost="True" 
                                     Rows="1" />
                    </Border>

                    <Border x:Name="Border" Grid.Row="1" 
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}">
                        <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" />
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Step 2:将标头限制为MaxWidth并应用文字换行。

The MaxWidth可以设置在TabItem风格,以及HeaderTemplate它包装文本(您仍然可以使用您的自定义ControlTemplate此处设置 TabItem 部分的样式):

<Style x:Key="Style-TabItem-Main" TargetType="{x:Type TabItem}">
    <Setter Property="MaxWidth" Value="100" />
    <!--https://social.msdn.microsoft.com/forums/vstudio/en-US/df4f7fc3-f0ec-4ed1-a022-a32650e49cb3/how-to-wrap-header-text-in-tabcontrol-->
    <Setter Property="HeaderTemplate" >
        <Setter.Value>
            <DataTemplate>
                <TextBlock Text="{Binding}" TextWrapping="Wrap" />
            </DataTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        ...
    </Setter>
</Style>


故障排除:现在,如果您应用MaxWidth in Step 2,您可能需要左对齐UniformGrid当 TabControl 变得太宽时..

<UniformGrid x:Name="HeaderPanel" IsItemsHost="True" 
             Rows="1" HorizontalAlignment="Left" />

..但是当尚未达到 MaxWidth 时,您不希望出现这种情况,并且项目应该拉伸到 TabControl 的整个宽度(又名Step 1)。所以我们需要一种方法来切换它HorizontalAlignment取决于是否已达到项目的 MaxWidth(如果设置)。

第 1 步(回顾):让我们尝试制作我们自己的 UniformGrid:

public class UniformTabPanel : UniformGrid
{
    public UniformTabPanel()
    {
        this.IsItemsHost = true;
        this.Rows = 1;

        //Default, so not really needed..
        this.HorizontalAlignment = HorizontalAlignment.Stretch;
    }

    protected override Size MeasureOverride(Size constraint)
    {
        var totalMaxWidth = this.Children.OfType<TabItem>().Sum(tab => tab.MaxWidth);
        if (!double.IsInfinity(totalMaxWidth))
        {
            this.HorizontalAlignment = (constraint.Width > totalMaxWidth) 
                                                ? HorizontalAlignment.Left 
                                                : HorizontalAlignment.Stretch;
        }

        return base.MeasureOverride(constraint);
    }
}

现在,我们可以替换UniformGrid in our TabControl设置这个新面板的样式:

                ...
                    <Border>
                        <mycontrols:UniformTabPanel x:Name="HeaderPanel" />
                    </Border>
                ...

...TabControl 应该按预期运行。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

WPF 灵活的 TabControl 标头 的相关文章

  • 从 WPF 打印/报告的最佳方法是什么? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 对话框结果 WPF

    我正在读一本书 上面写着 而不是设置 DialogResult 用户点击后手动 按钮 您可以将按钮指定为 接受按钮 通过设置 是默认为true 点击那个 按钮自动设置 窗口的DialogResult为true 同样 你可以指定一个按钮 作为
  • RenderTargetBitmap 内存泄漏

    我正在尝试使用 RenderTargetBitmap 渲染图像 每次我从 RenderTargetBitmap 创建一个实例来渲染图像时 内存都会增加 完成后内存永远不会释放 这是代码 RenderTargetBitmap rtb new
  • 运行时动态转换

    有没有一种方法可以在运行时动态转换 如以下伪代码 foreach DataRow row in table Rows foreach DataColumn col in table Columns if row col DBNull Val
  • 如何绑定到 IronPython 中的列表框?

    我刚刚开始在 WPF 中使用 IronPython 但我不太明白绑定应该如何完成 通常在 WPF 中我会这样做
  • Trace.Assert 没有中断,也不显示消息框

    我有一个 WPF 应用程序 我在其中在画布上移动数据 当我像怪物一样尝试用鼠标移动数据时 问题就开始了 以下是操作的顺序 画布上的 MouseMove 被触发 在 MouseMove 中 我更改了一些数据 Trace Assert 失败 调
  • 在单独的线程上显示 WPF-“NotifyIcon”

    我目前正在开发一个 Office 加载项 我需要显示一个显示进度的通知对话框 我正在使用Philipp Sumi 的 wpf notifyicon http www codeproject com Articles 36468 WPF No
  • 数据绑定的 IntelliSense 不起作用

    经过几个小时尝试调试由错误的属性引起的数据绑定问题Binding扩大 一旦我注意到这个错误 我就会意识到如果 IntelliSense 可用 我可能一开始就不会犯这个错误 作为一个习惯在错误输入名称时出现错误 警告的 Visual Stud
  • 允许 WPF Web 浏览器中的弹出窗口

    有没有办法允许在嵌入式 WPF WebBrowser 控件中弹出窗口 我没有找到别人的解决方案 也没有找到允许弹出窗口的COM接口 我不想更改用户注册表设置或使用类似的侵入方法 因为应用程序旨在通过 ClickOnce 分发 您可以通过处理
  • DataGrid、TextBox - 绑定和即时更新

    我的应用程序 包含图中的窗口 DataGrid 的 ItemsSource 设置为 editList 声明为 IList editList 数据网格设置为只读 供应商名称文本框的绑定设置为 Text Binding ElementName
  • WPF 简单绑定到 INotifyPropertyChanged 对象

    我创建了最简单的绑定 绑定到后面代码中的对象的文本框 但事件 文本框仍为空 窗口的 DataContext 已设置 并且绑定路径已存在 你能说出什么问题了吗 XAML
  • 将 KeyUp 作为参数传递 WPF 命令绑定文本框

    我有一个文本框 KeyUp 事件触发器连接到 WPF 中的命令 我需要将按下的实际键作为命令参数传递 该命令执行得很好 但处理它的代码需要知道按下的实际键 记住这可能是一个回车键或不仅仅是一个字母的任何键 所以我无法从 TextBox te
  • Tabcontrol 中的 SelectedIndex 不变 - 调度程序问题

    为什么在我设置 SelectedIndex 0 后 我随后 而不是响应 得到使用 SelectedIndex 4 调用的事件处理程序 我追踪到对调度程序的调用 但我不明白为什么 计划如下 我有一个页面 其中包含带有各种选项卡的选项卡控件 当
  • Prism自定义确认交互

    我使用 Prism Unity WPF 和 Mvvm 在应用程序中创建了一个自定义确认窗口 我需要有关需要发送回视图模型的通知的帮助 我在详细记录视图中有这个 我们称之为 MyDetailView
  • 如何在MVVM中实现appSettings

    我正在尝试摆脱我使用的警告appSettings在 WPF 项目中 应用程序配置
  • 使用 .NET 在 Windows 中创建弹出式“烤面包机”通知

    我正在使用 NET 并创建一个桌面应用程序 服务 当触发某些事件时 它将在桌面的一角显示通知 我不想使用常规的消息框 b c 那样会造成太大的干扰 我希望通知滑入视图 然后在几秒钟后淡出 我正在考虑一种类似于 Outlook 收到新邮件时发
  • XAML - 将单元格的行和列索引绑定到自动化 ID

    我正在为 WPF 数据网格中的各个单元格提供自动化 ID 但遇到了一些障碍 我决定尝试根据单元格在网格中的位置 行索引和列索引 来命名单元格 使用 UI 检查器并突出显示有问题的 DataGridCell 之一会显示以下属性 GridIte
  • 可观察集合未因 UI 更改而更新

    我正在尝试将可观察集合绑定到用户控件 但它不会在用户更改时更新 但在通过代码更改用户控件时它会更新 以下是我尝试过的一个例子 它可能有点长 但它正在运行 因此您可以按原样复制并粘贴代码 请参阅帖子末尾我的问题 客户 cs using Sys
  • 在 MVVM 中哪里可以捕获异常?

    我的视图模型类有一个连接到服务的方法 不确定这是否是一个好的实践 或者视图模型是否应该是严格的属性和属性更改机制 当然 我想在连接或断开连接时处理任何可能的 WCF 异常 让我们使用未找到端点作为示例 考虑到这是一个我想引起用户注意的异常
  • WPF 路径:如何在 XAML 中绘制它?

    我想创建一个带有非矩形标题的自定义 GroupBox 如下图所示 正如你所看到的 标题的内容必须是可参数化的 因此可以在xaml中输入图像 标题和背景 提前致谢 谢谢您的回答 实际上我想在自定义组框中使用这个设计 所以在你的答案中 如果我不

随机推荐