QUESTION: How do I get a "clean" Title Bar at the top of ALL windows? (no back, open, file name or other fields in Title bar)

[John3k]

I'm a desktop user with a 3840x2160 55" display. I need to move windows around by grabbing the title bar and dragging the window.

With all the buttons and file name fields and "Undo" and Username, and upload and download and search and "menu" and other buttons, there is no where to grab the windows to move the window.

I need to move all of that crap that is in the title bar (with the exception of the Window Title, Minimize, Restore, Maximize, and Close buttons) back to menus BELOW the Title Bar so that I can EASILY grab the title bar of the windows to move them around my desktop.

Often times there is so much crap in the Title Bar (Thinking WORD, EXCEL, Paint.Net, and similar) that there isn't any place on the Title Bar to grab without the application doing something you don't want it to do.

"Snapping" a window isn't a viable alternative. By the way, the ONLY device I have EVER used "snapping" more than 3 to 5 times was on my Surface Pro, when using it as a tablet.

There must be some way to return the Title Bar back to when it was CLEAN, UNCLUTTERED, and was a great handle for moving the window - I just need to know how to return the Title Bars to the CLEAN, UNCLUTTERED format.

Thanks!

[Kevin Gallahan (kmgallahan)]

WinUI can't be used to modify other existing applications that you don't have the source code for.

[vincentj7]

This is a major accessibility issue for me.

• Visual accessibility: I can't identify active vs inactive windows because apps do not use the accent colors in the title bar
• Motor accessibility: It's difficult to drag windows because there is not enough empty space to click

[ReginaldTang]

John3k
Is this what you want?

<Grid>
    <Grid.RowDefinitions>
        <!-- Double title bar row: You said you wanted a clean top one and the stuff moved below it --> 
        <RowDefinition Height="96" />

        <!-- Whatever other content you have -->
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    
    <StackPanel>
        <TitleBar
            Title="Title" Height="48" Subtitle="Subtitle if you want it" >
            <!--
            <TitleBar.IconSource>
                <ImageIconSource ImageSource="Assets\TitleBar.png" >
            </TitleBar.IconSource>
            <TitleBar.Content>
            </TitleBar.Content>
            <TitleBar.RightHeader>
            </TitleBar.RightHeader>
                -->
        </TitleBar>
        <Grid Margin="0,0,250,0" Height="48" HorizontalAlignment="Stretch" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <StackPanel Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left">
                <Button PointerEntered="BackButton_PointerEntered" PointerExited="BackButton_PointerExited" Width="43" Style="{StaticResource SubtleButtonStyle}" Margin="2" Click="TitleBar_BackRequested" Visibility="{Binding CanGoBack, ElementName=ContentFrame}">
                    <AnimatedIcon x:Name="BackAnimatedIcon">
                        <AnimatedIcon.Source>
                            <animatedvisuals:AnimatedBackVisualSource/>
                        </AnimatedIcon.Source>
                        <AnimatedIcon.FallbackIconSource>
                            <SymbolIconSource Symbol="Find"/>
                        </AnimatedIcon.FallbackIconSource>
                    </AnimatedIcon>
                </Button>
                <Button PointerEntered="NavViewButton_PointerEntered" PointerExited="NavViewButton_PointerExited" Width="43" Style="{StaticResource SubtleButtonStyle}" Margin="2" Click="TitleBar_PaneToggleRequested">
                    <AnimatedIcon x:Name="NavViewAnimatedIcon">
                        <AnimatedIcon.Source>
                            <animatedvisuals:AnimatedGlobalNavigationButtonVisualSource/>
                        </AnimatedIcon.Source>
                        <AnimatedIcon.FallbackIconSource>
                            <SymbolIconSource Symbol="Find"/>
                        </AnimatedIcon.FallbackIconSource>
                    </AnimatedIcon>
                </Button>
            </StackPanel>
            <StackPanel Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Center" >
                <AutoSuggestBox Width="400" VerticalAlignment="Center" PlaceholderText="Search..." QueryIcon="Find" />
            </StackPanel>
            <StackPanel Orientation="Horizontal" Grid.Column="2" HorizontalAlignment="Left">
                <PersonPicture Initials="ABC" Width="30" Height="30" />
            </StackPanel>
        </Grid>
    </StackPanel>
    <!-- Whatever other stuff you have (eg NavigationView, just make sure to name the NavigationView "NavView" and the Frame for the NavigationView "ContentFrame") -->
</Grid>

Code-behind:

private void TitleBar_BackRequest(object sender, object e)
{
    var root = this.Content as FrameworkElement;
    var frame = root?.FindName("ContentFrame") as Frame;
    if (frame != null && frame.CanGoBack)
    {
        frame.GoBack();
    }
}
private void TitleBar_PaneToggleRequest(object sender, object e)
{
    var root = this.Content as FrameworkElement;
    var nav = root?.FindName("NavView") as NavigationView;
    if (nav != null)
    {
        nav.IsPaneOpen = !nav.IsPaneOpen;
    }
}
private void BackButton_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    AnimatedIcon.SetState(this.BackAnimatedIcon, "PointerOver");
}

private void BackButton_PointerExited(object sender, PointerRoutedEventArgs e)
{
    AnimatedIcon.SetState(this.BackAnimatedIcon, "Normal");
}
private void NavViewButton_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    AnimatedIcon.SetState(this.NavViewAnimatedIcon, "PointerOver");
}

private void NavViewButton_PointerExited(object sender, PointerRoutedEventArgs e)
{
    AnimatedIcon.SetState(this.NavViewAnimatedIcon, "Normal");
}