1  <?xml version="1.0" encoding="utf-8" ?>
  2  <Page
  3      x:Class="Microsoft.CmdPal.UI.Pages.ShellPage"
  4      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  5      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  6      xmlns:animations="using:CommunityToolkit.WinUI.Animations"
  7      xmlns:cmdpalUI="using:Microsoft.CmdPal.UI"
  8      xmlns:converters="using:CommunityToolkit.WinUI.Converters"
  9      xmlns:coreViewModels="using:Microsoft.CmdPal.Core.ViewModels"
 10      xmlns:cpcontrols="using:Microsoft.CmdPal.UI.Controls"
 11      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 12      xmlns:h="using:Microsoft.CmdPal.UI.Helpers"
 13      xmlns:help="using:Microsoft.CmdPal.UI.Helpers"
 14      xmlns:markdownImageProviders="using:Microsoft.CmdPal.UI.Helpers.MarkdownImageProviders"
 15      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 16      xmlns:tkcontrols="using:CommunityToolkit.WinUI.Controls"
 17      xmlns:toolkit="using:CommunityToolkit.WinUI.Controls"
 18      xmlns:ui="using:CommunityToolkit.WinUI"
 19      Background="Transparent"
 20      mc:Ignorable="d">
 21  
 22      <Page.Resources>
 23          <ResourceDictionary>
 24              <converters:StringVisibilityConverter
 25                  x:Key="StringNotEmptyToVisibilityConverter"
 26                  EmptyValue="Collapsed"
 27                  NotEmptyValue="Visible" />
 28  
 29              <cmdpalUI:DetailsSizeToGridLengthConverter x:Key="SizeToWidthConverter" />
 30              <cmdpalUI:MessageStateToSeverityConverter x:Key="MessageStateToSeverityConverter" />
 31  
 32              <cmdpalUI:DetailsDataTemplateSelector
 33                  x:Key="DetailsDataTemplateSelector"
 34                  CommandTemplate="{StaticResource DetailsCommandsTemplate}"
 35                  LinkTemplate="{StaticResource DetailsLinkTemplate}"
 36                  SeparatorTemplate="{StaticResource DetailsSeparatorTemplate}"
 37                  TagTemplate="{StaticResource DetailsTagsTemplate}" />
 38  
 39              <converters:BoolToVisibilityConverter
 40                  x:Key="BoolToInvertedVisibilityConverter"
 41                  FalseValue="Visible"
 42                  TrueValue="Collapsed" />
 43  
 44              <Style
 45                  x:Key="DetailKeyTextBlockStyle"
 46                  BasedOn="{StaticResource CaptionTextBlockStyle}"
 47                  TargetType="TextBlock">
 48                  <Setter Property="IsTextSelectionEnabled" Value="True" />
 49                  <Setter Property="TextWrapping" Value="WrapWholeWords" />
 50                  <Setter Property="Foreground" Value="{ThemeResource TextFillColorSecondaryBrush}" />
 51              </Style>
 52  
 53              <Style
 54                  x:Key="SeparatorKeyTextBlockStyle"
 55                  BasedOn="{StaticResource BodyStrongTextBlockStyle}"
 56                  TargetType="TextBlock">
 57                  <Setter Property="IsTextSelectionEnabled" Value="True" />
 58                  <Setter Property="TextWrapping" Value="WrapWholeWords" />
 59              </Style>
 60  
 61              <Style
 62                  x:Key="DetailValueTextBlockStyle"
 63                  BasedOn="{StaticResource BodyTextBlockStyle}"
 64                  TargetType="TextBlock">
 65                  <Setter Property="IsTextSelectionEnabled" Value="True" />
 66                  <Setter Property="TextWrapping" Value="WrapWholeWords" />
 67              </Style>
 68  
 69              <DataTemplate x:Key="TagTemplate" x:DataType="coreViewModels:TagViewModel">
 70                  <cpcontrols:Tag
 71                      HorizontalAlignment="Left"
 72                      AutomationProperties.Name="{x:Bind Text, Mode=OneWay}"
 73                      BackgroundColor="{x:Bind Background, Mode=OneWay}"
 74                      FontSize="12"
 75                      ForegroundColor="{x:Bind Foreground, Mode=OneWay}"
 76                      Icon="{x:Bind Icon, Mode=OneWay}"
 77                      Text="{x:Bind Text, Mode=OneWay}"
 78                      ToolTipService.ToolTip="{x:Bind ToolTip, Mode=OneWay}" />
 79              </DataTemplate>
 80  
 81              <DataTemplate x:Key="CommandTemplate" x:DataType="coreViewModels:CommandViewModel">
 82                  <StackPanel Orientation="Vertical">
 83                      <Button
 84                          Name="Command"
 85                          HorizontalAlignment="Stretch"
 86                          HorizontalContentAlignment="Left"
 87                          Click="Command_Click"
 88                          Style="{StaticResource SubtleButtonStyle}">
 89                          <StackPanel VerticalAlignment="Center" Orientation="Horizontal">
 90                              <cpcontrols:IconBox
 91                                  Width="16"
 92                                  Height="16"
 93                                  Margin="0,3,8,0"
 94                                  SourceKey="{x:Bind Icon, Mode=OneWay}"
 95                                  SourceRequested="{x:Bind help:IconCacheProvider.SourceRequested20}" />
 96                              <TextBlock Style="{StaticResource BodyTextBlockStyle}" Text="{x:Bind Name}" />
 97                          </StackPanel>
 98                      </Button>
 99                  </StackPanel>
100              </DataTemplate>
101  
102              <DataTemplate x:Key="DetailsLinkTemplate" x:DataType="coreViewModels:DetailsLinkViewModel">
103                  <StackPanel Orientation="Vertical">
104                      <TextBlock Style="{StaticResource DetailKeyTextBlockStyle}" Text="{x:Bind Key, Mode=OneWay}" />
105                      <TextBlock
106                          Style="{StaticResource DetailValueTextBlockStyle}"
107                          Text="{x:Bind Text, Mode=OneWay}"
108                          Visibility="{x:Bind IsText, Mode=OneWay}" />
109                      <HyperlinkButton
110                          Padding="0"
111                          Command="{x:Bind NavigateCommand, Mode=OneWay}"
112                          NavigateUri="{x:Bind Link, Mode=OneWay}"
113                          Visibility="{x:Bind IsLink, Mode=OneWay}">
114                          <TextBlock Text="{x:Bind Text, Mode=OneWay}" TextWrapping="Wrap" />
115                      </HyperlinkButton>
116                  </StackPanel>
117              </DataTemplate>
118              <DataTemplate x:Key="DetailsCommandsTemplate" x:DataType="coreViewModels:DetailsCommandsViewModel">
119                  <StackPanel Orientation="Vertical" Spacing="4">
120                      <TextBlock Style="{StaticResource DetailKeyTextBlockStyle}" Text="{x:Bind Key, Mode=OneWay}" />
121                      <ItemsControl
122                          ItemTemplate="{StaticResource CommandTemplate}"
123                          ItemsSource="{x:Bind Commands, Mode=OneWay}"
124                          Visibility="{x:Bind HasCommands, Mode=OneWay}" />
125                  </StackPanel>
126              </DataTemplate>
127              <DataTemplate x:Key="DetailsSeparatorTemplate" x:DataType="coreViewModels:DetailsSeparatorViewModel">
128                  <StackPanel Margin="0,8,8,0" Orientation="Vertical">
129                      <TextBlock
130                          Margin="0,8,0,0"
131                          Style="{StaticResource SeparatorKeyTextBlockStyle}"
132                          Text="{x:Bind Key, Mode=OneWay}"
133                          Visibility="{x:Bind help:BindTransformers.EmptyOrWhitespaceToCollapsed(Key), Mode=OneWay, FallbackValue=Collapsed}" />
134                      <Border
135                          Margin="0,0,0,0"
136                          BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
137                          BorderThickness="0,0,0,1"
138                          Visibility="{x:Bind help:BindTransformers.EmptyOrWhitespaceToVisible(Key), Mode=OneWay, FallbackValue=Collapsed}" />
139                  </StackPanel>
140              </DataTemplate>
141              <DataTemplate x:Key="DetailsTagsTemplate" x:DataType="coreViewModels:DetailsTagsViewModel">
142                  <StackPanel Orientation="Vertical" Spacing="4">
143                      <TextBlock Style="{StaticResource DetailKeyTextBlockStyle}" Text="{x:Bind Key, Mode=OneWay}" />
144                      <ItemsControl
145                          ItemTemplate="{StaticResource TagTemplate}"
146                          ItemsSource="{x:Bind Tags, Mode=OneWay}"
147                          Visibility="{x:Bind HasTags, Mode=OneWay}">
148                          <ItemsControl.ItemsPanel>
149                              <ItemsPanelTemplate>
150                                  <toolkit:WrapPanel
151                                      x:Name="TagsWrapPanel"
152                                      MinWidth="0"
153                                      Padding="0"
154                                      HorizontalSpacing="4"
155                                      Orientation="Horizontal"
156                                      VerticalSpacing="4" />
157                              </ItemsPanelTemplate>
158                          </ItemsControl.ItemsPanel>
159                      </ItemsControl>
160                  </StackPanel>
161              </DataTemplate>
162              <tkcontrols:MarkdownThemes
163                  x:Key="DefaultMarkdownThemeConfig"
164                  H3FontSize="12"
165                  H3FontWeight="Normal" />
166              <markdownImageProviders:ImageProvider x:Key="ImageProvider" />
167              <tkcontrols:MarkdownConfig
168                  x:Key="DefaultMarkdownConfig"
169                  ImageProvider="{StaticResource ImageProvider}"
170                  Themes="{StaticResource DefaultMarkdownThemeConfig}" />
171          </ResourceDictionary>
172      </Page.Resources>
173  
174      <Grid>
175          <Grid.RowDefinitions>
176              <RowDefinition Height="*" />
177              <RowDefinition Height="Auto" />
178          </Grid.RowDefinitions>
179  
180          <Grid Grid.Row="0" Background="{ThemeResource LayerOnAcrylicPrimaryBackgroundBrush}">
181              <Grid.RowDefinitions>
182                  <RowDefinition Height="Auto" />
183                  <RowDefinition Height="*" />
184                  <RowDefinition Height="Auto" />
185              </Grid.RowDefinitions>
186  
187              <!--  Back button and search box  -->
188              <Grid
189                  x:Name="TopBarGrid"
190                  Padding="0,12,0,12"
191                  HorizontalAlignment="Stretch"
192                  VerticalAlignment="Stretch"
193                  BorderBrush="{ThemeResource CmdPal.TopBarBorderBrush}"
194                  BorderThickness="0,0,0,1">
195                  <Grid.ColumnDefinitions>
196                      <ColumnDefinition Width="Auto" />
197                      <ColumnDefinition Width="*" />
198                      <ColumnDefinition Width="Auto" />
199                  </Grid.ColumnDefinitions>
200  
201                  <!--  Back button  -->
202                  <StackPanel Orientation="Horizontal">
203                      <Image
204                          Width="20"
205                          Margin="20,0,6,0"
206                          HorizontalAlignment="Center"
207                          ui:VisualExtensions.NormalizedCenterPoint="0.5,0.5"
208                          AutomationProperties.AccessibilityView="Raw"
209                          Source="ms-appx:///Assets/icon.svg"
210                          Visibility="{x:Bind ViewModel.CurrentPage.IsNested, Mode=OneWay, Converter={StaticResource BoolToInvertedVisibilityConverter}}">
211                          <animations:Implicit.ShowAnimations>
212                              <animations:OpacityAnimation
213                                  EasingMode="EaseIn"
214                                  EasingType="Cubic"
215                                  From="0"
216                                  To="1.0"
217                                  Duration="0:0:0.187" />
218                              <animations:ScaleAnimation
219                                  EasingMode="EaseIn"
220                                  EasingType="Cubic"
221                                  From="0.5"
222                                  To="1"
223                                  Duration="0:0:0.187" />
224                          </animations:Implicit.ShowAnimations>
225                          <animations:Implicit.HideAnimations>
226                              <animations:OpacityAnimation
227                                  EasingMode="EaseOut"
228                                  EasingType="Cubic"
229                                  From="1.0"
230                                  To="0"
231                                  Duration="0:0:0.187" />
232                              <animations:ScaleAnimation
233                                  EasingMode="EaseOut"
234                                  EasingType="Cubic"
235                                  From="1"
236                                  To="0.5"
237                                  Duration="0:0:0.187" />
238                          </animations:Implicit.HideAnimations>
239                      </Image>
240                      <Button
241                          x:Name="BackButton"
242                          x:Uid="BackButton"
243                          Margin="4,0,4,0"
244                          Padding="4"
245                          HorizontalAlignment="Center"
246                          VerticalAlignment="Center"
247                          ui:VisualExtensions.NormalizedCenterPoint="0.5,0.5"
248                          Click="BackButton_Clicked"
249                          Content="{ui:FontIcon Glyph=&#xE76B;,
250                                                FontSize=14}"
251                          FontSize="16"
252                          Style="{StaticResource SubtleButtonStyle}"
253                          Visibility="{x:Bind ViewModel.CurrentPage.IsNested, Mode=OneWay}">
254                          <animations:Implicit.ShowAnimations>
255                              <animations:OpacityAnimation
256                                  EasingMode="EaseIn"
257                                  EasingType="Cubic"
258                                  From="0"
259                                  To="1.0"
260                                  Duration="0:0:0.333" />
261                              <animations:ScaleAnimation
262                                  From="0.5"
263                                  To="1"
264                                  Duration="0:0:0.333" />
265                              <animations:TranslationAnimation
266                                  From="16,0,0"
267                                  To="0,0,0"
268                                  Duration="0:0:0.333" />
269                          </animations:Implicit.ShowAnimations>
270                          <animations:Implicit.HideAnimations>
271                              <animations:OpacityAnimation
272                                  EasingMode="EaseOut"
273                                  EasingType="Cubic"
274                                  From="1.0"
275                                  To="0"
276                                  Duration="0:0:0.333" />
277                              <animations:ScaleAnimation
278                                  EasingMode="EaseOut"
279                                  EasingType="Cubic"
280                                  From="1"
281                                  To="0.5"
282                                  Duration="0:0:0.333" />
283                              <animations:TranslationAnimation
284                                  EasingMode="EaseOut"
285                                  EasingType="Cubic"
286                                  From="0,0,0"
287                                  To="16,0,0"
288                                  Duration="0:0:0.187" />
289                          </animations:Implicit.HideAnimations>
290                      </Button>
291                      <cpcontrols:IconBox
292                          Grid.Column="1"
293                          Width="20"
294                          Margin="4,0,4,0"
295                          VerticalAlignment="Center"
296                          ui:VisualExtensions.NormalizedCenterPoint="0.5,0.5"
297                          Foreground="{ThemeResource TextFillColorSecondaryBrush}"
298                          SourceKey="{x:Bind ViewModel.CurrentPage.Icon, Mode=OneWay}"
299                          SourceRequested="{x:Bind help:IconCacheProvider.SourceRequested20}"
300                          Visibility="{x:Bind ViewModel.CurrentPage.IsNested, Mode=OneWay}">
301                          <animations:Implicit.ShowAnimations>
302                              <animations:OpacityAnimation
303                                  From="0"
304                                  To="1.0"
305                                  Duration="0:0:0.333" />
306                              <animations:ScaleAnimation
307                                  From="0.8"
308                                  To="1"
309                                  Duration="0:0:0.333" />
310                              <animations:TranslationAnimation
311                                  From="8,0,0"
312                                  To="0,0,0"
313                                  Duration="0:0:0.187" />
314                          </animations:Implicit.ShowAnimations>
315                          <animations:Implicit.HideAnimations>
316                              <animations:OpacityAnimation
317                                  From="1.0"
318                                  To="0"
319                                  Duration="0:0:0.333" />
320                              <animations:ScaleAnimation
321                                  From="1"
322                                  To="0.8"
323                                  Duration="0:0:0.333" />
324                              <animations:TranslationAnimation
325                                  From="0,0,0"
326                                  To="8,0,0"
327                                  Duration="0:0:0.187" />
328                          </animations:Implicit.HideAnimations>
329                      </cpcontrols:IconBox>
330                  </StackPanel>
331                  <!--  Search box: wrapped in a grid to enable RepositionThemeTransitions  -->
332                  <Grid Grid.Column="1" HorizontalAlignment="Stretch">
333                      <cpcontrols:SearchBar
334                          x:Name="SearchBox"
335                          HorizontalAlignment="Stretch"
336                          CurrentPageViewModel="{x:Bind ViewModel.CurrentPage, Mode=OneWay}" />
337                      <Grid.Transitions>
338                          <TransitionCollection>
339                              <RepositionThemeTransition />
340                          </TransitionCollection>
341                      </Grid.Transitions>
342                  </Grid>
343                  <!--  Filter: wrapped in a grid to enable RepositionThemeTransitions  -->
344                  <Grid Grid.Column="2" HorizontalAlignment="Right">
345                      <cpcontrols:FiltersDropDown
346                          x:Name="FiltersDropDown"
347                          HorizontalAlignment="Right"
348                          CurrentPageViewModel="{x:Bind ViewModel.CurrentPage, Mode=OneWay}" />
349                  </Grid>
350              </Grid>
351  
352              <ProgressBar
353                  Grid.ColumnSpan="2"
354                  VerticalAlignment="Bottom"
355                  IsIndeterminate="True"
356                  Visibility="{x:Bind ViewModel.CurrentPage.IsLoading, Mode=OneWay}">
357                  <animations:Implicit.ShowAnimations>
358                      <animations:OpacityAnimation
359                          From="0"
360                          To="1.0"
361                          Duration="0:0:0.333" />
362                  </animations:Implicit.ShowAnimations>
363                  <animations:Implicit.HideAnimations>
364                      <animations:OpacityAnimation
365                          From="1.0"
366                          To="0"
367                          Duration="0:0:0.333" />
368                  </animations:Implicit.HideAnimations>
369              </ProgressBar>
370  
371              <Grid x:Name="ContentGrid" Grid.Row="1">
372  
373                  <Grid.ColumnDefinitions>
374                      <ColumnDefinition Width="{x:Bind ViewModel.Details.Size, Mode=OneWay, Converter={StaticResource SizeToWidthConverter}}" />
375                      <ColumnDefinition x:Name="DetailsColumn" Width="Auto" />
376                  </Grid.ColumnDefinitions>
377  
378                  <Frame
379                      Name="RootFrame"
380                      AutomationProperties.AutomationControlType="Pane"
381                      AutomationProperties.LandmarkType="Navigation"
382                      AutomationProperties.LiveSetting="Assertive"
383                      IsNavigationStackEnabled="True"
384                      Navigated="RootFrame_Navigated" />
385  
386                  <ScrollViewer
387                      x:Name="DetailsContent"
388                      Grid.Column="1"
389                      Margin="4"
390                      HorizontalAlignment="Stretch"
391                      ui:VisualExtensions.NormalizedCenterPoint="0.5,0.5"
392                      Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
393                      BorderBrush="{ThemeResource CmdPal.DividerStrokeColorDefaultBrush}"
394                      BorderThickness="1"
395                      CornerRadius="{StaticResource ControlCornerRadius}"
396                      Visibility="Collapsed">
397                      <animations:Implicit.ShowAnimations>
398                          <animations:OpacityAnimation
399                              From="0"
400                              To="1.0"
401                              Duration="0:0:0.187" />
402                          <animations:TranslationAnimation
403                              From="24,0,0"
404                              To="0,0,0"
405                              Duration="0:0:0.187" />
406                      </animations:Implicit.ShowAnimations>
407                      <animations:Implicit.HideAnimations>
408                          <animations:OpacityAnimation
409                              From="1.0"
410                              To="0"
411                              Duration="0:0:0.187" />
412                          <animations:TranslationAnimation
413                              From="0,0,0"
414                              To="24,0,0"
415                              Duration="0:0:0.187" />
416                      </animations:Implicit.HideAnimations>
417                      <Grid Margin="16">
418                          <Grid.RowDefinitions>
419                              <RowDefinition Height="Auto" />
420                              <RowDefinition Height="Auto" />
421                              <RowDefinition Height="Auto" />
422                              <RowDefinition Height="*" />
423                          </Grid.RowDefinitions>
424  
425                          <cpcontrols:IconBox
426                              x:Name="HeroImageBorder"
427                              Width="64"
428                              Margin="0,0,16,16"
429                              HorizontalAlignment="Left"
430                              AutomationProperties.AccessibilityView="Raw"
431                              SourceKey="{x:Bind ViewModel.Details.HeroImage, Mode=OneWay}"
432                              SourceRequested="{x:Bind help:IconCacheProvider.SourceRequested64}"
433                              Visibility="{x:Bind HasHeroImage, Mode=OneWay}" />
434  
435                          <TextBlock
436                              Grid.Row="1"
437                              FontSize="18"
438                              FontWeight="SemiBold"
439                              Text="{x:Bind ViewModel.Details.Title, Mode=OneWay}"
440                              TextWrapping="WrapWholeWords"
441                              Visibility="{x:Bind ViewModel.Details.Title, Converter={StaticResource StringNotEmptyToVisibilityConverter}, Mode=OneWay}" />
442  
443                          <tkcontrols:MarkdownTextBlock
444                              Grid.Row="2"
445                              Margin="0,4,0,24"
446                              Background="Transparent"
447                              Config="{StaticResource DefaultMarkdownConfig}"
448                              Text="{x:Bind ViewModel.Details.Body, Mode=OneWay}"
449                              UseEmphasisExtras="True"
450                              UsePipeTables="True" />
451  
452                          <ItemsRepeater
453                              Grid.Row="3"
454                              ItemTemplate="{StaticResource DetailsDataTemplateSelector}"
455                              ItemsSource="{x:Bind ViewModel.Details.Metadata, Mode=OneWay}">
456                              <ItemsRepeater.Layout>
457                                  <StackLayout Spacing="12" />
458                              </ItemsRepeater.Layout>
459                          </ItemsRepeater>
460                      </Grid>
461                  </ScrollViewer>
462                  <!--  /DetailsContent  -->
463              </Grid>
464              <ScrollView
465                  Grid.Row="2"
466                  Grid.ColumnSpan="2"
467                  MaxHeight="120"
468                  Background="{ThemeResource SystemControlErrorBackgroundColor}"
469                  BorderBrush="{ThemeResource SystemControlErrorTextForegroundBrush}"
470                  BorderThickness="0,1,0,1"
471                  CornerRadius="0"
472                  Visibility="{x:Bind ViewModel.CurrentPage.ErrorMessage, Converter={StaticResource StringNotEmptyToVisibilityConverter}, Mode=OneWay}">
473                  <TextBlock Margin="16,8,16,16" IsTextSelectionEnabled="True">
474                      <Run
475                          FontWeight="SemiBold"
476                          Foreground="{ThemeResource SystemErrorTextColor}"
477                          Text="Error(s) on page:" />
478                      <LineBreak /><Run Text="{x:Bind ViewModel.CurrentPage.ErrorMessage, Mode=OneWay}" />
479                  </TextBlock>
480              </ScrollView>
481          </Grid>
482  
483          <!--
484              Horrifying: You may ask yourself - why is there a Background on this InfoBar?
485              
486              Well, as it turns out, the Informational InfoBar has a transparent
487              background. It just cannot be bothered. So, we need to manually give
488              it one to actually obscure the text beneath it. And you can't just give
489              the InfoBar itself a Background, because then the other Severity's
490              won't get colorized.
491              
492              See https://github.com/microsoft/microsoft-ui-xaml/issues/5741
493          -->
494          <StackPanel
495              Grid.Row="0"
496              Margin="16,8,16,8"
497              HorizontalAlignment="Stretch"
498              VerticalAlignment="Bottom"
499              Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
500              CornerRadius="{ThemeResource ControlCornerRadius}">
501              <InfoBar
502                  CornerRadius="{ThemeResource ControlCornerRadius}"
503                  IsOpen="{x:Bind ViewModel.CurrentPage.HasStatusMessage, Mode=OneWay}"
504                  Message="{x:Bind ViewModel.CurrentPage.MostRecentStatusMessage.Message, Mode=OneWay}"
505                  Severity="{x:Bind ViewModel.CurrentPage.MostRecentStatusMessage.State, Mode=OneWay, Converter={StaticResource MessageStateToSeverityConverter}}">
506  
507                  <InfoBar.Content>
508                      <ProgressBar
509                          Margin="0,-20,0,0"
510                          IsIndeterminate="{x:Bind ViewModel.CurrentPage.MostRecentStatusMessage.Progress.IsIndeterminate, Mode=OneWay}"
511                          Visibility="{x:Bind ViewModel.CurrentPage.MostRecentStatusMessage.HasProgress, Mode=OneWay}"
512                          Value="{x:Bind ViewModel.CurrentPage.MostRecentStatusMessage.Progress.ProgressPercent, Mode=OneWay}" />
513                      <!--  Margin="0,0,0,6" MaxWidth="200"/>  -->
514                  </InfoBar.Content>
515              </InfoBar>
516          </StackPanel>
517  
518          <Grid
519              Grid.Row="1"
520              Background="{ThemeResource LayerOnAcrylicSecondaryBackgroundBrush}"
521              BorderBrush="{ThemeResource CmdPal.DividerStrokeColorDefaultBrush}"
522              BorderThickness="0,1,0,0">
523              <cpcontrols:CommandBar CurrentPageViewModel="{x:Bind ViewModel.CurrentPage, Mode=OneWay}" />
524          </Grid>
525  
526          <VisualStateManager.VisualStateGroups>
527              <VisualStateGroup>
528                  <VisualState x:Name="DetailsCollapsed" />
529                  <VisualState x:Name="DetailsVisible">
530                      <VisualState.StateTriggers>
531                          <StateTrigger IsActive="{x:Bind ViewModel.IsDetailsVisible, Mode=OneWay}" />
532                      </VisualState.StateTriggers>
533                      <VisualState.Setters>
534                          <Setter Target="DetailsContent.Visibility" Value="Visible" />
535                          <Setter Target="DetailsColumn.Width" Value="2*" />
536                      </VisualState.Setters>
537                  </VisualState>
538              </VisualStateGroup>
539              <VisualStateGroup>
540                  <!--
541                      Why disable it and make it transparent?
542                      To prevent the container from collapsing, ensuring the layout metrics remain unchanged.
543                  -->
544                  <VisualStateGroup.Transitions>
545                      <VisualTransition GeneratedDuration="0:0:0.187" To="SearchBarCollapsed" />
546                  </VisualStateGroup.Transitions>
547                  <VisualState x:Name="SearchBarVisible" />
548                  <VisualState x:Name="SearchBarCollapsed">
549                      <VisualState.StateTriggers>
550                          <StateTrigger IsActive="{x:Bind h:BindTransformers.Negate(ViewModel.IsSearchBoxVisible), Mode=OneWay}" />
551                      </VisualState.StateTriggers>
552                      <VisualState.Setters>
553                          <Setter Target="SearchBox.IsEnabled" Value="False" />
554                          <Setter Target="SearchBox.Opacity" Value="0" />
555                          <Setter Target="TopBarGrid.BorderBrush" Value="Transparent" />
556                      </VisualState.Setters>
557                  </VisualState>
558              </VisualStateGroup>
559          </VisualStateManager.VisualStateGroups>
560      </Grid>
561  </Page>