WPF TabControl 标头问题答案

【问题标题】：WPF TabControl header issueWPF TabControl 标头问题
【发布时间】：2021-09-11 09:20:12
【问题描述】：

我正在 WPF 中制作一个应用程序，该应用程序显示可以拖动和缩放的图像。底部、右侧和上部包含一些 UI 元素，例如按钮，在中间我有一个 TabControl，我在 ViewModel 的代码中添加了 TabItems。这些 TabItems 由它们的内容（图像）和我有标签按钮的标题组成。我遇到的问题是我拖动的图像覆盖了标题而不是按钮，正如您在屏幕截图中看到的那样。 我期望的行为是将此图像隐藏在整个标题下方，而不仅仅是按钮。它只发生在底部。当我将图像拖到顶部或右侧时，它会像应有的那样隐藏在两侧。

Header issue

我尝试更改其背景、不透明度和 ZIndex，但没有任何效果。

这是我的代码。

XAML：

<TabControl Grid.Row="1" Grid.Column="0" TabStripPlacement="Bottom" Background="LightGray" ItemsSource="{Binding LayoutTabs}" 
                    SelectedIndex="0" SelectedItem="{Binding SelectedTab, Mode=OneWayToSource}"/>

C#：

            LayoutTabs = new BindableCollection<TabItem>();

            for (int i = 0; i < _content.LayoutImages.Count; i++)
            {
                DrawingImage drawing = _content.LayoutImages.ElementAt(i);

                Image image = new Image() { Source = drawing };
                image.MouseMove += OnMouseMove;

                var container = new LayoutContainer()
                {
                    Background = Brushes.WhiteSmoke,
                    Child = image,
                    Focusable = true,
                };

                var tabItem = new TabItem()
                {
                    Header = _content.GetLayoutName(i),
                    Content = container
                };

                LayoutTabs.Add(tabItem);
            }

【问题讨论】：

您是否尝试过编辑控件模板，或者您是否仅在 tabcontrol/tabitem 上尝试了背景和 zindex？
我尝试使用这些样式，但显然我做错了。像您在答案中建议的那样编辑模板副本就像一种魅力。谢谢。

标签： c# wpf xaml header tabcontrol

【解决方案1】：

该行为是由于在默认控件模板中将标题面板背景设置为透明。如果您右键单击设计器窗口（不是 xaml 编辑器）中的 tabcontrol 并单击 Edit Template->Edit a Copy，您将获得该模板的副本，然后可以使用 BackgroundColor 修改标题面板，如果需要增加 Zindex：

[....]
//this is the line to make your changes on:
 <TabPanel x:Name="headerPanel" Background="Transparent" Grid.Column="0" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/> 
[....]

【讨论】：