Title Bar

标题栏与窗口边框，即 Avalonia 自行绘制的窗口装饰。

示例可交互

Title Bar — Avalonia UIKit

Live demo unavailable

<!--
  The theme draws the title bar as part of the window's decorations
  (WindowDrawnDecorations), which a page cannot host; this is the same bar
  built from the theme's resources: the gradient, the rule, the caption buttons.
-->
<Border Width="480" Height="140" HorizontalAlignment="Left" BorderThickness="1"
        BorderBrush="{DynamicResource UIKit.WindowFrame}" Background="{DynamicResource UIKit.Background}">
  <DockPanel>
    <Border DockPanel.Dock="Top" Height="34" BackgroundSizing="OuterBorderEdge" BorderThickness="0,0,0,1"
            BorderBrush="{DynamicResource UIKit.TitleBarBorder}">
      <Border.Background>
        <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
          <GradientStop Offset="0" Color="{DynamicResource UIKit.TitleBar.GradientTop.Color}" />
          <GradientStop Offset="1" Color="{DynamicResource UIKit.TitleBar.Color}" />
        </LinearGradientBrush>
      </Border.Background>
      <DockPanel>
        <StackPanel DockPanel.Dock="Right" Orientation="Horizontal">
          <Button Theme="{StaticResource UIKitCaptionButton}">
            <PathIcon Width="14" Height="14" Data="{StaticResource UIKit.Icon.WindowMinimize}" />
          </Button>
          <Button Theme="{StaticResource UIKitCaptionButton}">
            <PathIcon Width="14" Height="14" Data="{StaticResource UIKit.Icon.WindowMaximize}" />
          </Button>
          <Button Theme="{StaticResource UIKitCaptionButton}" Classes="close">
            <PathIcon Width="14" Height="14" Data="{StaticResource UIKit.Icon.WindowClose}" />
          </Button>
        </StackPanel>
        <TextBlock Text="My Application" Margin="{DynamicResource UIKit.TitleBar.Padding}" VerticalAlignment="Center"
                   FontSize="14" FontWeight="Medium" LineHeight="22.5" />
      </DockPanel>
    </Border>
    <TextBlock Text="Window content" Margin="16" Foreground="{DynamicResource UIKit.MutedForeground}" />
  </DockPanel>
</Border>

用法

演示是模拟的：WindowDrawnDecorations 只在真实窗口内渲染，因此本页用主题的各个部件拼出同样的标题栏（渐变、分隔线、带 close 样式类的 UIKitCaptionButton，以及 UIKit.TitleBar.* 资源）。在实际应用中无需手工拼装：主题直接作用于窗口镶边本身。

在 Window 上设置 ExtendClientAreaToDecorationsHint="True"。主题覆盖 WindowDrawnDecorations，即 Avalonia 自行绘制的窗口装饰：34px 高的标题栏，底部有 1px 分隔线，填充从“标题栏色混入 45% 背景”过渡到标题栏色的渐变；窗口的 Title 为 14px 中等字重，内缩由 UIKit.TitleBar.Padding 资源决定（默认 12px）；标题按钮为 34×33，图标 14px，悬停和按下时使用次要色，关闭按钮使用危险色，最大化时最大化按钮显示还原图标。边框是 1px 的 UIKit.WindowFrame 灰色，位于带两层阴影的 20px 阴影区内。Avalonia 在 Windows（启用扩展客户区时）、X11 以及使用客户端装饰的 Wayland 上绘制这些内容，在 macOS 上从不绘制。

若要在窗口顶部放置带自定义内容的标题栏，请使用 uikit:TitleBar。

Title Bar

#用法

用法