fix: standardize titlebar treatment across all windows

- Add ExtendsContentIntoTitleBar + custom titlebar to OnboardingWindow, SetupWizardWindow, and WelcomeDialog to match HubWindow/CanvasWindow - Standardize titlebar height (48px), padding, emoji (FontSize 20), and title text (FontSize 13, CaptionTextBlockStyle) across all windows - CanvasWindow: update height 40->48px, emoji size 14->20, add FontSize 13 - CanvasWindow: move reload button inline next to title in separate grid column for proper click handling within titlebar drag region - Fix OnboardingWindow chat overlay sizing to use contentGrid.SizeChanged instead of rootGrid to avoid double-subtracting titlebar height Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
2026-05-05 11:48:29 -04:00 · 2026-05-05 11:48:29 -04:00 · bf62a3d57e
commit bf62a3d57e
parent fb1b766f73
4 changed files with 113 additions and 22 deletions
--- a/src/OpenClaw.Tray.WinUI/Dialogs/WelcomeDialog.cs
+++ b/src/OpenClaw.Tray.WinUI/Dialogs/WelcomeDialog.cs
@ -20,6 +20,7 @@ public sealed class WelcomeDialog : WindowEx
    public WelcomeDialog()
    {
        Title = LocalizationHelper.GetString("WindowTitle_Welcome");
+        ExtendsContentIntoTitleBar = true;
        this.SetWindowSize(480, 440);
        this.CenterOnScreen();
        this.SetIcon("Assets\\openclaw.ico");
@ -123,7 +124,37 @@ public sealed class WelcomeDialog : WindowEx
        Grid.SetRow(buttonPanel, 2);
        root.Children.Add(buttonPanel);

-        Content = root;
+        // Wrap content with custom titlebar
+        var outerGrid = new Grid();
+        outerGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(48) });
+        outerGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
+
+        var titleBar = new Grid { Padding = new Thickness(16, 0, 140, 0) };
+        var titleIcon = new TextBlock
+        {
+            Text = "🦞",
+            FontSize = 20,
+            VerticalAlignment = VerticalAlignment.Center,
+            Margin = new Thickness(0, 0, 10, 0)
+        };
+        var titleTextBlock = new TextBlock
+        {
+            Text = LocalizationHelper.GetString("WindowTitle_Welcome"),
+            FontSize = 13,
+            Style = (Style)Application.Current.Resources["CaptionTextBlockStyle"],
+            VerticalAlignment = VerticalAlignment.Center
+        };
+        var titleStack = new StackPanel { Orientation = Orientation.Horizontal };
+        titleStack.Children.Add(titleIcon);
+        titleStack.Children.Add(titleTextBlock);
+        titleBar.Children.Add(titleStack);
+        Grid.SetRow(titleBar, 0);
+        outerGrid.Children.Add(titleBar);
+
+        Grid.SetRow(root, 1);
+        outerGrid.Children.Add(root);
+        Content = outerGrid;
+        SetTitleBar(titleBar);
        
        Closed += (s, e) => _tcs.TrySetResult(_result);

--- a/src/OpenClaw.Tray.WinUI/Onboarding/OnboardingWindow.cs
+++ b/src/OpenClaw.Tray.WinUI/Onboarding/OnboardingWindow.cs
@ -55,6 +55,7 @@ public sealed class OnboardingWindow : WindowEx
            : null;

        Title = LocalizationHelper.GetString("Onboarding_Title");
+        ExtendsContentIntoTitleBar = true;
        this.SetWindowSize(720, 900);
        this.CenterOnScreen();
        this.SetIcon("Assets\\openclaw.ico");
@ -99,19 +100,50 @@ public sealed class OnboardingWindow : WindowEx
        _chatOverlay.Visibility = Visibility.Collapsed;
        _chatOverlay.VerticalAlignment = VerticalAlignment.Top;

-        // Root grid: functional UI host fills everything, overlay sits on top (except nav bar)
+        // Root grid: titlebar row + content area
        _rootGrid = new Grid
        {
            Background = GetThemeBrush("SolidBackgroundFillColorBaseBrush")
        };
-        _rootGrid.Children.Add(_host);
-        _rootGrid.Children.Add(_chatOverlay);
+        _rootGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(48) });
+        _rootGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
+
+        // Custom title bar — matches HubWindow treatment
+        var titleBar = new Grid { Padding = new Thickness(16, 0, 140, 0) };
+        var titleIcon = new TextBlock
+        {
+            Text = "🦞",
+            FontSize = 20,
+            VerticalAlignment = VerticalAlignment.Center,
+            Margin = new Thickness(0, 0, 10, 0)
+        };
+        var titleText = new TextBlock
+        {
+            Text = LocalizationHelper.GetString("Onboarding_Title"),
+            FontSize = 13,
+            Style = (Style)Application.Current.Resources["CaptionTextBlockStyle"],
+            VerticalAlignment = VerticalAlignment.Center
+        };
+        var titleStack = new StackPanel { Orientation = Orientation.Horizontal };
+        titleStack.Children.Add(titleIcon);
+        titleStack.Children.Add(titleText);
+        titleBar.Children.Add(titleStack);
+        Grid.SetRow(titleBar, 0);
+        _rootGrid.Children.Add(titleBar);
+        SetTitleBar(titleBar);
+
+        // Content area
+        var contentGrid = new Grid();
+        contentGrid.Children.Add(_host);
+        contentGrid.Children.Add(_chatOverlay);
+        Grid.SetRow(contentGrid, 1);
+        _rootGrid.Children.Add(contentGrid);
        Content = _rootGrid;
        Closed += OnClosed;

-        // Size the overlay after layout — leave space for the nav bar
-        // Nav bar is ~60px + VStack bottom padding 20px = 80px minimum
-        _rootGrid.SizeChanged += (_, args) =>
+        // Size the overlay after layout — leave space for the nav bar (~84px)
+        // contentGrid is already in row 1 (below titlebar), so no need to subtract titlebar height
+        contentGrid.SizeChanged += (_, args) =>
        {
            _chatOverlay.Height = Math.Max(0, args.NewSize.Height - 84);
        };
--- a/src/OpenClaw.Tray.WinUI/Windows/CanvasWindow.xaml
+++ b/src/OpenClaw.Tray.WinUI/Windows/CanvasWindow.xaml
@ -20,29 +20,26 @@
        </Grid.RowDefinitions>

        <!-- Custom title bar -->
-        <Grid x:Name="AppTitleBar" Grid.Row="0" Height="40" Padding="12,0">
+        <Grid x:Name="AppTitleBar" Grid.Row="0" Height="48" Padding="16,0,140,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
-                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>

            <StackPanel Grid.Column="0" Orientation="Horizontal" Spacing="10" VerticalAlignment="Center">
-                <TextBlock Text="🎨" FontSize="14"/>
+                <TextBlock Text="🎨" FontSize="20"/>
                <TextBlock x:Uid="CanvasWindow_TextBlock_31" Text="OpenClaw Canvas" Style="{StaticResource CaptionTextBlockStyle}"
-                           VerticalAlignment="Center" FontWeight="SemiBold"/>
+                           FontSize="13" VerticalAlignment="Center" FontWeight="SemiBold"/>
            </StackPanel>

-            <StackPanel Grid.Column="2" Orientation="Horizontal" Spacing="2" VerticalAlignment="Center"
-                        Margin="0,0,132,0">
-                <Button Click="OnRetryClick"
-                        Width="32" Height="32" Padding="0" Background="Transparent" BorderThickness="0">
-                    <ToolTipService.ToolTip>
-                        <ToolTip x:Uid="CanvasWindowReloadToolTip" Content="Reload"/>
-                    </ToolTipService.ToolTip>
-                    <FontIcon Glyph="&#xE72C;" FontSize="13"/>
-                </Button>
-            </StackPanel>
+            <Button Grid.Column="1" Click="OnRetryClick"
+                    Width="28" Height="28" Padding="0" Background="Transparent" BorderThickness="0"
+                    VerticalAlignment="Center" Margin="8,0,0,0">
+                <ToolTipService.ToolTip>
+                    <ToolTip x:Uid="CanvasWindowReloadToolTip" Content="Reload"/>
+                </ToolTipService.ToolTip>
+                <FontIcon Glyph="&#xE72C;" FontSize="12"/>
+            </Button>
        </Grid>

        <!-- Content area -->
--- a/src/OpenClaw.Tray.WinUI/Windows/SetupWizardWindow.cs
+++ b/src/OpenClaw.Tray.WinUI/Windows/SetupWizardWindow.cs
@ -79,6 +79,7 @@ public sealed class SetupWizardWindow : WindowEx
        _draftEnableNodeMode = settings.EnableNodeMode;

        Title = LocalizationHelper.GetString("Setup_Title");
+        ExtendsContentIntoTitleBar = true;
        this.SetWindowSize(720, 900);
        this.CenterOnScreen();
        this.SetIcon("Assets\\openclaw.ico");
@ -370,7 +371,37 @@ public sealed class SetupWizardWindow : WindowEx
        Grid.SetRow(navPanel, 3);
        root.Children.Add(navPanel);

-        Content = root;
+        // Wrap content in a container with custom titlebar
+        var outerGrid = new Grid();
+        outerGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(48) });
+        outerGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
+
+        var titleBar = new Grid { Padding = new Thickness(16, 0, 140, 0) };
+        var titleIcon = new TextBlock
+        {
+            Text = "🦞",
+            FontSize = 20,
+            VerticalAlignment = VerticalAlignment.Center,
+            Margin = new Thickness(0, 0, 10, 0)
+        };
+        var titleText = new TextBlock
+        {
+            Text = LocalizationHelper.GetString("Setup_Title"),
+            FontSize = 13,
+            Style = (Style)Application.Current.Resources["CaptionTextBlockStyle"],
+            VerticalAlignment = VerticalAlignment.Center
+        };
+        var titleStack = new StackPanel { Orientation = Orientation.Horizontal };
+        titleStack.Children.Add(titleIcon);
+        titleStack.Children.Add(titleText);
+        titleBar.Children.Add(titleStack);
+        Grid.SetRow(titleBar, 0);
+        outerGrid.Children.Add(titleBar);
+
+        Grid.SetRow(root, 1);
+        outerGrid.Children.Add(root);
+        Content = outerGrid;
+        SetTitleBar(titleBar);
        Logger.Info("[Setup] Wizard opened");

        // Load device identity for step 3