ExtensionsPage.xaml
1 <?xml version="1.0" encoding="utf-8" ?> 2 <Page 3 x:Class="Microsoft.CmdPal.UI.Settings.ExtensionsPage" 4 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 5 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 6 xmlns:controls="using:CommunityToolkit.WinUI.Controls" 7 xmlns:converters="using:CommunityToolkit.WinUI.Converters" 8 xmlns:cpcontrols="using:Microsoft.CmdPal.UI.Controls" 9 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 10 xmlns:helpers="using:Microsoft.CmdPal.UI.Helpers" 11 xmlns:local="using:Microsoft.CmdPal.UI.Settings" 12 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 13 xmlns:ui="using:CommunityToolkit.WinUI" 14 xmlns:viewModels="using:Microsoft.CmdPal.UI.ViewModels" 15 mc:Ignorable="d"> 16 17 <Page.Resources> 18 <ResourceDictionary> 19 <ResourceDictionary.ThemeDictionaries> 20 <!-- ControlFillColorQuarternaryBrush does not exist (yet) in WinUI, only in Windows Visual Library (Figma) --> 21 <ResourceDictionary x:Key="Default"> 22 <LinearGradientBrush x:Key="CardGradient2Brush" StartPoint="0,0" EndPoint="0.5, 1"> 23 <GradientStop Offset="0" Color="#38C8AEC4" /> 24 <GradientStop Offset="1" Color="#383286EE" /> 25 </LinearGradientBrush> 26 <ImageSource x:Key="StoreLogo">ms-appx:///Assets/StoreLogo.dark.svg</ImageSource> 27 </ResourceDictionary> 28 <ResourceDictionary x:Key="Light"> 29 <LinearGradientBrush x:Key="CardGradient2Brush" StartPoint="0,0" EndPoint="1, 1"> 30 <!--<GradientStop Offset="0" Color="#E6F0FC" /> 31 <GradientStop Offset="0.4" Color="#E6F0FC" /> 32 <GradientStop Offset="1" Color="#F0F0F7" />--> 33 <GradientStop Offset="0.0" Color="#FFF6F9FF" /> 34 <!-- Light cool white --> 35 <GradientStop Offset="0.4" Color="#FFEFF5FF" /> 36 <!-- Hinted lavender/blue --> 37 <GradientStop Offset="0.7" Color="#FFF7FAFD" /> 38 <!-- Very soft neutral white --> 39 <GradientStop Offset="1.0" Color="#FFF5F8FA" /> 40 <!-- Slight bluish-gray tint --> 41 <!-- Faint peach glow --> 42 <!-- Soft peach --> 43 </LinearGradientBrush> 44 <ImageSource x:Key="StoreLogo">ms-appx:///Assets/StoreLogo.light.svg</ImageSource> 45 </ResourceDictionary> 46 <ResourceDictionary x:Key="HighContrast"> 47 <SolidColorBrush x:Key="CardGradient2Brush" Color="Transparent" /> 48 <SolidColorBrush x:Key="CardGradient1Brush" Color="Transparent" /> 49 <ImageSource x:Key="StoreLogo">ms-appx:///Assets/StoreLogo.dark.svg</ImageSource> 50 </ResourceDictionary> 51 </ResourceDictionary.ThemeDictionaries> 52 <converters:BoolNegationConverter x:Key="InvertedBoolConverter" /> 53 <converters:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" /> 54 </ResourceDictionary> 55 </Page.Resources> 56 57 <Grid> 58 <Grid.RowDefinitions> 59 <RowDefinition Height="Auto" /> 60 <RowDefinition Height="*" /> 61 </Grid.RowDefinitions> 62 63 <ScrollViewer x:Name="RootScrollViewer" Grid.Row="1"> 64 <Grid Padding="16"> 65 <StackPanel 66 MaxWidth="1000" 67 HorizontalAlignment="Stretch" 68 Spacing="{StaticResource SettingsCardSpacing}"> 69 <!-- Banner --> 70 <Grid 71 Padding="16" 72 Background="{ThemeResource CardGradient2Brush}" 73 BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}" 74 BorderThickness="1" 75 CornerRadius="8"> 76 <Grid.RowDefinitions> 77 <RowDefinition Height="Auto" /> 78 <RowDefinition Height="Auto" /> 79 </Grid.RowDefinitions> 80 <Grid.ColumnDefinitions> 81 <ColumnDefinition Width="*" /> 82 <ColumnDefinition Width="Auto" /> 83 </Grid.ColumnDefinitions> 84 <StackPanel x:Name="BannerDescriptionPanel" Orientation="Vertical"> 85 <TextBlock x:Uid="Settings_ExtensionsPage_Banner_Header" FontWeight="SemiBold" /> 86 <TextBlock 87 x:Uid="Settings_ExtensionsPage_Banner_Description" 88 Grid.Row="1" 89 MaxWidth="520" 90 HorizontalAlignment="Left" 91 TextWrapping="Wrap" /> 92 <HyperlinkButton 93 x:Uid="Settings_ExtensionsPage_Banner_Hyperlink" 94 Padding="0" 95 Content="Learn how to create your own extensions" 96 NavigateUri="https://learn.microsoft.com/windows/powertoys/command-palette/overview" /> 97 </StackPanel> 98 <StackPanel 99 x:Name="ButtonPanel" 100 Grid.Column="1" 101 Orientation="Horizontal" 102 Spacing="8"> 103 <Button x:Uid="Settings_ExtensionsPage_FindExtensions_MicrosoftStore" Command="{x:Bind viewModel.Extensions.OpenStoreWithExtensionCommand}"> 104 <StackPanel Orientation="Horizontal" Spacing="8"> 105 <Viewbox Width="16"> 106 <Image AutomationProperties.AccessibilityView="Raw" Source="{ThemeResource StoreLogo}" /> 107 </Viewbox> 108 <TextBlock Text="Microsoft Store" /> 109 </StackPanel> 110 </Button> 111 <!--<Button x:Uid="Settings_ExtensionsPage_FindExtensions_WinGet" Command="{x:Bind viewModel.Extensions.OpenStoreWithExtensionCommand}"> 112 <StackPanel Orientation="Horizontal" Spacing="8"> 113 <Viewbox Width="16"> 114 <Image AutomationProperties.AccessibilityView="Raw" Source="ms-appx:///Assets/WinGet.svg" /> 115 </Viewbox> 116 <TextBlock Text="WinGet" /> 117 </StackPanel> 118 </Button>--> 119 </StackPanel> 120 </Grid> 121 122 <!-- Search --> 123 <Grid Padding="0,24,0,8" ColumnSpacing="8"> 124 <Grid.ColumnDefinitions> 125 <ColumnDefinition Width="*" MaxWidth="320" /> 126 <ColumnDefinition Width="*" /> 127 </Grid.ColumnDefinitions> 128 <AutoSuggestBox 129 x:Name="SearchBox" 130 x:Uid="Settings_ExtensionsPage_SearchBox_Placeholder" 131 HorizontalAlignment="Stretch" 132 Text="{x:Bind viewModel.Extensions.SearchText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"> 133 <AutoSuggestBox.QueryIcon> 134 <SymbolIcon Symbol="Find" /> 135 </AutoSuggestBox.QueryIcon> 136 <AutoSuggestBox.KeyboardAccelerators> 137 <KeyboardAccelerator 138 Key="F" 139 Invoked="OnFindInvoked" 140 Modifiers="Control" /> 141 </AutoSuggestBox.KeyboardAccelerators> 142 </AutoSuggestBox> 143 144 <StackPanel 145 Grid.Column="1" 146 HorizontalAlignment="Right" 147 VerticalAlignment="Center" 148 Orientation="Horizontal" 149 Spacing="8"> 150 <TextBlock 151 x:Name="ItemCounterTextBlock" 152 VerticalAlignment="Center" 153 Style="{StaticResource BodyTextBlockStyle}" 154 Text="{x:Bind viewModel.Extensions.ItemCounterText, Mode=OneWay}" /> 155 <StackPanel 156 VerticalAlignment="Center" 157 Orientation="Horizontal" 158 Spacing="8" 159 Visibility="{x:Bind viewModel.Extensions.ShowManualReloadOverlay, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}"> 160 <ProgressRing 161 Width="16" 162 Height="16" 163 IsActive="True" /> 164 <TextBlock 165 x:Uid="Settings_ExtensionsPage_Reloading_Text" 166 VerticalAlignment="Center" 167 Style="{StaticResource BodyTextBlockStyle}" /> 168 </StackPanel> 169 <Button 170 x:Name="MoreButton" 171 x:Uid="Settings_ExtensionsPage_More_Button" 172 Style="{StaticResource SubtleButtonStyle}"> 173 <Button.Flyout> 174 <MenuFlyout Placement="BottomEdgeAlignedRight"> 175 <MenuFlyoutItem x:Uid="Settings_ExtensionsPage_More_Reload_MenuFlyoutItem" Command="{x:Bind viewModel.Extensions.ReloadExtensionsCommand}"> 176 <MenuFlyoutItem.Icon> 177 <FontIcon Glyph="" /> 178 </MenuFlyoutItem.Icon> 179 </MenuFlyoutItem> 180 <MenuFlyoutSeparator /> 181 <MenuFlyoutItem x:Uid="Settings_ExtensionsPage_More_ReorderFallbacks_MenuFlyoutItem" Click="MenuFlyoutItem_OnClick"> 182 <MenuFlyoutItem.Icon> 183 <FontIcon Glyph="" /> 184 </MenuFlyoutItem.Icon> 185 </MenuFlyoutItem> 186 </MenuFlyout> 187 </Button.Flyout> 188 <FontIcon 189 AutomationProperties.AccessibilityView="Raw" 190 FontSize="16" 191 Glyph="" /> 192 </Button> 193 </StackPanel> 194 </Grid> 195 196 <!-- Empty state when no results match the current search --> 197 <Grid 198 x:Name="NoResultsPanel" 199 Padding="48" 200 x:Load="{x:Bind viewModel.Extensions.ShowNoResultsPanel, Mode=OneWay}" 201 CornerRadius="4"> 202 <StackPanel 203 HorizontalAlignment="Center" 204 VerticalAlignment="Center" 205 Spacing="8"> 206 <TextBlock 207 x:Uid="Settings_ExtensionsPage_NoResults_Primary" 208 Style="{StaticResource BodyStrongTextBlockStyle}" 209 TextAlignment="Center" /> 210 <TextBlock 211 x:Uid="Settings_ExtensionsPage_NoResults_Secondary" 212 Foreground="{ThemeResource TextFillColorSecondaryBrush}" 213 TextAlignment="Center" /> 214 </StackPanel> 215 </Grid> 216 <ItemsRepeater 217 x:Name="ProvidersRepeater" 218 x:Load="{x:Bind viewModel.Extensions.HasResults, Mode=OneWay}" 219 ItemsSource="{x:Bind viewModel.Extensions.FilteredProviders, Mode=OneWay}" 220 Layout="{StaticResource VerticalStackLayout}"> 221 <ItemsRepeater.ItemTemplate> 222 <DataTemplate x:DataType="viewModels:ProviderSettingsViewModel"> 223 <controls:SettingsCard 224 Click="SettingsCard_Click" 225 DataContext="{x:Bind}" 226 Description="{x:Bind ExtensionSubtext, Mode=OneWay}" 227 Header="{x:Bind DisplayName, Mode=OneWay}" 228 IsClickEnabled="True"> 229 <controls:SettingsCard.HeaderIcon> 230 <cpcontrols:ContentIcon> 231 <cpcontrols:ContentIcon.Content> 232 <controls:SwitchPresenter 233 AutomationProperties.AccessibilityView="Raw" 234 TargetType="x:Boolean" 235 Value="{x:Bind Icon.IsSet, FallbackValue=x:False, Mode=OneWay}"> 236 <controls:Case Value="True"> 237 <cpcontrols:IconBox 238 Width="20" 239 Height="20" 240 AutomationProperties.AccessibilityView="Raw" 241 SourceKey="{x:Bind Icon, Mode=OneWay}" 242 SourceRequested="{x:Bind helpers:IconCacheProvider.SourceRequested20}" /> 243 </controls:Case> 244 <controls:Case Value="False"> 245 <Image 246 Width="20" 247 Height="20" 248 AutomationProperties.AccessibilityView="Raw" 249 Source="ms-appx:///Assets/Icons/ExtensionIconPlaceholder.png" /> 250 </controls:Case> 251 </controls:SwitchPresenter> 252 </cpcontrols:ContentIcon.Content> 253 </cpcontrols:ContentIcon> 254 </controls:SettingsCard.HeaderIcon> 255 <ToggleSwitch IsOn="{x:Bind IsEnabled, Mode=TwoWay}" /> 256 </controls:SettingsCard> 257 </DataTemplate> 258 </ItemsRepeater.ItemTemplate> 259 </ItemsRepeater> 260 </StackPanel> 261 </Grid> 262 </ScrollViewer> 263 <cpcontrols:FallbackRankerDialog x:Name="FallbackRankerDialog" /> 264 <VisualStateManager.VisualStateGroups> 265 <VisualStateGroup x:Name="LayoutVisualStates"> 266 <VisualState x:Name="WideLayout"> 267 <VisualState.StateTriggers> 268 <AdaptiveTrigger MinWindowWidth="720" /> 269 </VisualState.StateTriggers> 270 </VisualState> 271 <VisualState x:Name="NarrowLayout"> 272 <VisualState.StateTriggers> 273 <AdaptiveTrigger MinWindowWidth="0" /> 274 </VisualState.StateTriggers> 275 <VisualState.Setters> 276 <Setter Target="ButtonPanel.(Grid.Row)" Value="1" /> 277 <Setter Target="BannerDescriptionPanel.(Grid.ColumnSpan)" Value="2" /> 278 <Setter Target="ButtonPanel.(Grid.Column)" Value="0" /> 279 <Setter Target="ButtonPanel.Margin" Value="0,12,0,0" /> 280 </VisualState.Setters> 281 </VisualState> 282 </VisualStateGroup> 283 </VisualStateManager.VisualStateGroups> 284 </Grid> 285 </Page>