Files
PowerToys/src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/CommandBar.xaml
Mike Griese 70bf430d9f CmdPal: Add a dock (#45824)
Add support for a "dock" window in CmdPal. The dock is a toolbar powered
by the `APPBAR` APIs. This gives you a persistent region to display
commands for quick shortcuts or glanceable widgets.

The dock can be pinned to any side of the screen.
The dock can be independently styled with any of the theming controls
cmdpal already has
The dock has three "regions" to pin to - the "start", the "center", and
the "end".
Elements on the dock are grouped as "bands", which contains a set of
"items". Each "band" is one atomic unit. For example, the Media Player
extension produces 4 items, but one _band_.
The dock has only one size (for now)
The dock will only appear on your primary display (for now)

This PR includes support for pinning arbitrary top-level commands to the
dock - however, we're planning on replacing that with a more universal
ability to pin any command to the dock or top level. (see #45191). This
is at least usable for now.

This is definitely still _even more preview_ than usual PowerToys
features, but it's more than usable. I'd love to get it out there and
start collecting feedback on where to improve next. I'll probably add a
follow-up issue for tracking the remaining bugs & nits.

closes #45201

---------

Co-authored-by: Niels Laute <niels.laute@live.nl>
2026-02-27 13:24:23 +00:00

243 lines
12 KiB
XML

<?xml version="1.0" encoding="utf-8" ?>
<UserControl
x:Class="Microsoft.CmdPal.UI.Controls.CommandBar"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:animations="using:CommunityToolkit.WinUI.Animations"
xmlns:cmdpalUI="using:Microsoft.CmdPal.UI"
xmlns:converters="using:CommunityToolkit.WinUI.Converters"
xmlns:cpcontrols="using:Microsoft.CmdPal.UI.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:help="using:Microsoft.CmdPal.UI.Helpers"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ui="using:CommunityToolkit.WinUI"
xmlns:viewModels="using:Microsoft.CmdPal.UI.ViewModels"
Background="Transparent"
mc:Ignorable="d">
<UserControl.Resources>
<ResourceDictionary>
<converters:StringVisibilityConverter
x:Key="StringNotEmptyToVisibilityConverter"
EmptyValue="Collapsed"
NotEmptyValue="Visible" />
<converters:BoolToVisibilityConverter
x:Key="BoolToInvertedVisibilityConverter"
FalseValue="Visible"
TrueValue="Collapsed" />
<cmdpalUI:MessageStateToSeverityConverter x:Key="MessageStateToSeverityConverter" />
<StackLayout
x:Name="VerticalStackLayout"
Orientation="Vertical"
Spacing="4" />
<Style
x:Name="ContextMenuFlyoutStyle"
BasedOn="{StaticResource DefaultFlyoutPresenterStyle}"
TargetType="FlyoutPresenter">
<Style.Setters>
<Setter Property="Margin" Value="0" />
<Setter Property="Padding" Value="0" />
<Setter Property="Background" Value="{ThemeResource DesktopAcrylicTransparentBrush}" />
<Setter Property="BorderBrush" Value="{ThemeResource DividerStrokeColorDefaultBrush}" />
</Style.Setters>
</Style>
<!-- Backdrop requires ShouldConstrainToRootBounds="False" -->
<Flyout
x:Name="ContextMenuFlyout"
FlyoutPresenterStyle="{StaticResource ContextMenuFlyoutStyle}"
Opened="ContextMenuFlyout_Opened"
ShouldConstrainToRootBounds="False"
SystemBackdrop="{ThemeResource AcrylicBackgroundFillColorDefaultBackdrop}">
<cpcontrols:ContextMenu x:Name="ContextControl" />
</Flyout>
<Style x:Key="HotkeyStyle" TargetType="Border">
<Style.Setters>
<Setter Property="Padding" Value="4" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Background" Value="{ThemeResource ControlFillColorSecondaryBrush}" />
<Setter Property="BorderBrush" Value="{ThemeResource DividerStrokeColorDefaultBrush}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="6" />
<Setter Property="MinWidth" Value="20" />
</Style.Setters>
</Style>
<Style x:Key="HotkeyTextBlockStyle" TargetType="TextBlock">
<Setter Property="FontSize" Value="10" />
<Setter Property="CharacterSpacing" Value="4" />
<Setter Property="Foreground" Value="{ThemeResource TextFillColorPrimaryBrush}" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
<Style x:Key="HotkeyFontIconStyle" TargetType="FontIcon">
<Setter Property="FontSize" Value="10" />
<Setter Property="Foreground" Value="{ThemeResource TextFillColorPrimaryBrush}" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
</ResourceDictionary>
</UserControl.Resources>
<Grid
MinHeight="40"
Padding="4"
ColumnSpacing="8">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid
x:Name="IconRoot"
Margin="3,0,-5,0"
Visibility="{x:Bind CurrentPageViewModel.IsRootPage, Mode=OneWay, Converter={StaticResource BoolToInvertedVisibilityConverter}}">
<Button
x:Name="StatusMessagesButton"
x:Uid="StatusMessagesButton"
Padding="4"
Style="{StaticResource SubtleButtonStyle}"
Visibility="{x:Bind CurrentPageViewModel.HasStatusMessage, Mode=OneWay}">
<InfoBadge Value="{x:Bind CurrentPageViewModel.StatusMessages.Count, Mode=OneWay}" />
<Button.Flyout>
<Flyout x:Name="StatusMessagesFlyout" Placement="TopEdgeAlignedLeft">
<ItemsRepeater
x:Name="MessagesDropdown"
Margin="-8"
ItemsSource="{x:Bind CurrentPageViewModel.StatusMessages, Mode=OneWay}"
Layout="{StaticResource VerticalStackLayout}">
<ItemsRepeater.ItemTemplate>
<DataTemplate x:DataType="viewModels:StatusMessageViewModel">
<StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Bottom">
<InfoBar
CornerRadius="{ThemeResource ControlCornerRadius}"
IsClosable="False"
IsOpen="True"
Message="{x:Bind Message, Mode=OneWay}"
Severity="{x:Bind State, Mode=OneWay, Converter={StaticResource MessageStateToSeverityConverter}}" />
</StackPanel>
</DataTemplate>
</ItemsRepeater.ItemTemplate>
</ItemsRepeater>
</Flyout>
</Button.Flyout>
</Button>
</Grid>
<Button
x:Name="SettingsIconButton"
x:Uid="SettingsButton"
Click="SettingsIcon_Clicked"
Style="{StaticResource SubtleButtonStyle}"
Visibility="{x:Bind CurrentPageViewModel.IsRootPage, Mode=OneWay}">
<StackPanel Orientation="Horizontal" Spacing="8">
<FontIcon
VerticalAlignment="Center"
FontSize="16"
Glyph="&#xE713;" />
<TextBlock
x:Uid="SettingsButtonTextBlock"
VerticalAlignment="Center"
Style="{StaticResource CaptionTextBlockStyle}" />
</StackPanel>
</Button>
<TextBlock
Grid.Column="1"
VerticalAlignment="Center"
Style="{StaticResource CaptionTextBlockStyle}"
Text="{x:Bind CurrentPageViewModel.Title, Mode=OneWay}"
TextTrimming="CharacterEllipsis"
TextWrapping="NoWrap"
Visibility="{x:Bind CurrentPageViewModel.IsRootPage, Mode=OneWay, Converter={StaticResource BoolToInvertedVisibilityConverter}}" />
<StackPanel
Grid.Column="2"
Padding="0,0,4,0"
HorizontalAlignment="Right"
Orientation="Horizontal"
Spacing="4">
<Button
x:Name="PrimaryButton"
Padding="6,4,4,4"
x:Load="{x:Bind IsLoaded, Mode=OneWay}"
AutomationProperties.AutomationId="PrimaryCommandButton"
AutomationProperties.Name="{x:Bind ViewModel.PrimaryCommand.Name, Mode=OneWay}"
Background="Transparent"
Click="PrimaryButton_Clicked"
Style="{StaticResource SubtleButtonStyle}"
Visibility="{x:Bind ViewModel.HasPrimaryCommand, Mode=OneWay}">
<StackPanel Orientation="Horizontal" Spacing="8">
<TextBlock
MaxWidth="160"
VerticalAlignment="Center"
MaxLines="1"
Style="{StaticResource CaptionTextBlockStyle}"
Text="{x:Bind ViewModel.PrimaryCommand.Name, Mode=OneWay}"
TextTrimming="CharacterEllipsis"
TextWrapping="NoWrap" />
<Border Style="{StaticResource HotkeyStyle}">
<FontIcon Glyph="&#xE751;" Style="{StaticResource HotkeyFontIconStyle}" />
</Border>
</StackPanel>
</Button>
<Button
x:Name="SecondaryButton"
Padding="6,4,4,4"
x:Load="{x:Bind IsLoaded, Mode=OneWay}"
AutomationProperties.AutomationId="SecondaryCommandButton"
AutomationProperties.Name="{x:Bind ViewModel.SecondaryCommand.Name, Mode=OneWay}"
Click="SecondaryButton_Clicked"
Style="{StaticResource SubtleButtonStyle}"
Visibility="{x:Bind ViewModel.HasSecondaryCommand, Mode=OneWay}">
<StackPanel Orientation="Horizontal" Spacing="8">
<TextBlock
MaxWidth="160"
VerticalAlignment="Center"
MaxLines="1"
Style="{StaticResource CaptionTextBlockStyle}"
Text="{x:Bind ViewModel.SecondaryCommand.Name, Mode=OneWay}"
TextTrimming="CharacterEllipsis"
TextWrapping="NoWrap" />
<StackPanel Orientation="Horizontal" Spacing="4">
<Border Padding="4,2,4,2" Style="{StaticResource HotkeyStyle}">
<TextBlock x:Uid="CommandBar_SecondaryButton_HotkeyCtrl" Style="{StaticResource HotkeyTextBlockStyle}" />
</Border>
<Border Style="{StaticResource HotkeyStyle}">
<FontIcon Glyph="&#xE751;" Style="{StaticResource HotkeyFontIconStyle}" />
</Border>
</StackPanel>
</StackPanel>
</Button>
<Button
x:Name="MoreCommandsButton"
x:Uid="MoreCommandsButton"
Padding="6,4,4,4"
AutomationProperties.AutomationId="MoreContextMenuButton"
Click="MoreCommandsButton_Clicked"
Style="{StaticResource SubtleButtonStyle}"
Visibility="{x:Bind ViewModel.ShouldShowContextMenu, Mode=OneWay}">
<StackPanel Orientation="Horizontal" Spacing="8">
<TextBlock
x:Uid="MoreCommandsButton_Label"
VerticalAlignment="Center"
Style="{StaticResource CaptionTextBlockStyle}"
TextTrimming="WordEllipsis"
TextWrapping="NoWrap" />
<StackPanel Orientation="Horizontal" Spacing="4">
<Border Padding="4,2,4,2" Style="{StaticResource HotkeyStyle}">
<TextBlock x:Uid="CommandBar_MoreCommandsButtonButton_HotkeyCtrl" Style="{StaticResource HotkeyTextBlockStyle}" />
</Border>
<Border Padding="4,2,4,2" Style="{StaticResource HotkeyStyle}">
<TextBlock x:Uid="CommandBar_MoreCommandsButtonButton_HotkeyCtrl2" Style="{StaticResource HotkeyTextBlockStyle}" />
</Border>
</StackPanel>
</StackPanel>
</Button>
</StackPanel>
</Grid>
</UserControl>