Skip to content

Customized titlebar cannot be dragged when tabs are added to the app window #10325

@williamfigtree

Description

@williamfigtree

Describe the bug

When tabs are added to a tab view within an application window that has set ExtendsContentIntoTitleBar = true the titlebar becomes undraggable. Adding a second tab makes it draggable again. Adding a third makes it undraggable, and so on.

Also possibly relevant: when debugging the VisualStudio Xaml toolbar docks to the very top of the app window when it is undraggable. (see video below)

Steps to reproduce the bug

  1. Create an application with a custom title bar and a tab view within the main window below the titlebar.
  2. Add tabs within the tab view and note how the application switches bewteen draggable and undraggable.

Expected behavior

Adding tabs within an app should not impact the titlebar.

Screenshots

tabs-break-titlebar.mp4

NuGet package version

Windows App SDK 1.6.3: 1.6.250108002

Packaging type

Packaged (MSIX)

Windows version

Windows 10 version 22H2 (19045, 2022 Update)

IDE

Visual Studio 2022

Additional context

Minimal reproduction:
title-bar-bug-minimal-reproduction.zip

MainWindow.xaml

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="mrp_title_bar_drag_bug.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:mrp_title_bar_drag_bug"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="mrp-title-bar-drag-bug">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Grid x:Name="AppTitleBar"  
      Height="32">
            <Grid.ColumnDefinitions>
                <ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
                <ColumnDefinition/>
                <ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
            </Grid.ColumnDefinitions>
            <Image x:Name="TitleBarIcon" Source="ms-appx:///Assets/StoreLogo.png"
           Grid.Column="1"
           HorizontalAlignment="Left"
           Width="16" Height="16"
           Margin="8,0,0,0"/>
            <TextBlock x:Name="TitleBarTextBlock" 
               Text="Tabs break title bar demo" 
               Style="{StaticResource CaptionTextBlockStyle}"
               Grid.Column="1"
               VerticalAlignment="Center"
               Margin="28,0,0,0"/>
        </Grid>

        <TabView
            x:Name="TabView"
            Grid.Row="1"
            VerticalAlignment="Stretch" 
            HorizontalAlignment="Stretch" 
            IsAddTabButtonVisible="True"/>
    </Grid>
</Window>

MainWindow.xaml.cs

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Controls.Primitives;
using Microsoft.UI.Xaml.Data;
using Microsoft.UI.Xaml.Input;
using Microsoft.UI.Xaml.Media;
using Microsoft.UI.Xaml.Navigation;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Microsoft.UI;           // Needed for WindowId.
using Microsoft.UI.Windowing; // Needed for AppWindow.
using WinRT.Interop;
using Windows.ApplicationModel;          // Needed for XAML/HWND interop.

// To learn more about WinUI, the WinUI project structure,
// and more about our project templates, see: http://aka.ms/winui-project-info.

namespace mrp_title_bar_drag_bug
{
    /// <summary>
    /// An empty window that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainWindow : Window
    {

        public MainWindow()
        {
            this.InitializeComponent();

            // Hide system title bar.
            ExtendsContentIntoTitleBar = true;

            TabView.AddTabButtonClick += TabView_AddTabButtonClick;
        }

        private void TabView_AddTabButtonClick(TabView sender, object args)
        {
            sender.TabItems.Add(new TabViewItem());
        }
    }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions