You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

WinUI 3:TabView标签与标题栏按钮重叠问题求助

自定义标题栏TabView标签与标题栏按钮重叠问题

我尝试制作一个内容扩展到自定义标题栏的TabView,相关实现代码如下:

MyTabViewControl的XAML代码

<Grid>
    <TabView x:Name="MyTabView" Background="Transparent" AddTabButtonClick="MyTabView_AddTabButtonClick" TabCloseRequested="MyTabView_TabCloseRequested">

        <TabView.TabStripHeader>
            <Border x:Name="MyCustomMenuRegion" MinWidth="0" Background="Transparent" IsHitTestVisible="False"/>
        </TabView.TabStripHeader>

        <!--Default Home Tab-->
        <TabViewItem Header="Home" Background="Transparent" IsClosable="False" MaxHeight="40" MaxWidth="100">
            <TextBlock Text=""/>
        </TabViewItem>

        <TabView.TabStripFooter>
            <Border x:Name="CustomDragRegion" MinWidth="0" Background="Transparent" IsHitTestVisible="False" SizeChanged="CustomDragRegion_SizeChanged"/>
        </TabView.TabStripFooter>
    </TabView>
</Grid>

MainWindow的XAML代码

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="40" x:Name="TitleBarRegion"/>
        <RowDefinition Height="*" x:Name="ContentRegion"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" x:Name="ControlRegion"/>
    </Grid.ColumnDefinitions>

    <myUICrl:MyTitleRegionControl x:Name="MyTitleRegion" Grid.Row="0" Grid.Column="0" Canvas.ZIndex="0"/>

    <myUICrl:MyCaptionsRegionControl x:Name="MyCaptionsRegion" Grid.Row="0" Grid.Column="1" Canvas.ZIndex="2" HorizontalAlignment="Right"/>

    <myUICrl:MyTabViewControl x:Name="MyTabView" Grid.Row="0" Grid.Column="0" Canvas.ZIndex="1"/>
</Grid>

自定义标题栏拖动区域的C#代码

internal void SetRegionsForCustomTitleBar()
{
    double scale = this.MyTitleRegion.XamlRoot.RasterizationScale;

    // Set the Width of TitleBar
    SetTitleBarWidth(this.AppWindow, this.MyTitleRegion, scale);

    // Set the draggable Area/Region of TitleBar
    SetDraggableArea(this.AppWindow, this.MyTabView, scale);

    // Set the non-draggable Area/Region of CaptionsButton
    SetNonDraggableRegion(this.AppWindow, this.MyCaptionsRegion, scale);
}

private void SetTitleBarWidth(AppWindow myAppWindow, MyTitleRegionControl myTitleRegion, double scale)
{
    myTitleRegion.GetHeaderDefinition().Width = new GridLength(myAppWindow.TitleBar.LeftInset / scale);
    myTitleRegion.GetFooterDefinition().Width = new GridLength(myAppWindow.TitleBar.RightInset / scale);
}

private void SetDraggableArea(AppWindow myAppWindow, MyTabViewControl myTabView, double scale)
{
    Border myCustomDragRegion = myTabView.GetCustomDragRegion();
    GeneralTransform customDragRegionTransform = myCustomDragRegion.TransformToVisual(null);
    Rect customDragRegionBounds = customDragRegionTransform.TransformBounds(new Rect(0, 0, myCustomDragRegion.ActualWidth, myCustomDragRegion.ActualHeight));
    RectInt32 customDragRegionRect = GetRect(customDragRegionBounds, scale);

    myAppWindow.TitleBar.SetDragRectangles(GetRectArray(customDragRegionRect));
}

private void SetNonDraggableRegion(AppWindow myAppWindow, MyCaptionsRegionControl myCaptionsRegion, double scale)
{
    GeneralTransform captionsRegionTransform = myCaptionsRegion.TransformToVisual(null);
    Rect captionsRegionBounds = captionsRegionTransform.TransformBounds(new Rect(0, 0, myCaptionsRegion.ActualWidth, myCaptionsRegion.ActualHeight));
    RectInt32 captionsRegionRect = GetRect(captionsRegionBounds, scale);

    InputNonClientPointerSource nonClientInputSrc = InputNonClientPointerSource.GetForWindowId(myAppWindow.Id);
    nonClientInputSrc.SetRegionRects(NonClientRegionKind.Passthrough, GetRectArray(captionsRegionRect));
}

private RectInt32 GetRect(Rect bounds, double scale)
{
    return new RectInt32
    (
        _X: (int)Math.Round(bounds.X * scale),
        _Y: (int)Math.Round(bounds.Y * scale),
        _Width: (int)Math.Round(bounds.Width * scale),
        _Height: (int)Math.Round(bounds.Height * scale)
    );
}

private RectInt32[] GetRectArray(RectInt32 rect)
{
    return new RectInt32[] { rect };
}

遇到的问题

TabView的标签会忽略MyCaptionsRegionControl的存在,导致标签与标题栏的控制按钮(最小化、最大化、关闭)重叠,标签覆盖在按钮上方,既影响按钮的正常点击,也破坏界面美观。

希望能得到解决这个重叠问题的方法。


内容的提问来源于stack exchange,提问作者Pain Nncera

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.13 17:10:56