PowerToys/src/modules/cmdpal/Microsoft.CmdPal.UI/Pages/ShellPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<Page
    x:Class="Microsoft.CmdPal.UI.Pages.ShellPage"
    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:h="using:Microsoft.CmdPal.UI.Helpers"
    xmlns:help="using:Microsoft.CmdPal.UI.Helpers"
    xmlns:markdownImageProviders="using:Microsoft.CmdPal.UI.Helpers.MarkdownImageProviders"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:tkcontrols="using:CommunityToolkit.WinUI.Controls"
    xmlns:toolkit="using:CommunityToolkit.WinUI.Controls"
    xmlns:ui="using:CommunityToolkit.WinUI"
    xmlns:viewModels="using:Microsoft.CmdPal.UI.ViewModels"
    Background="Transparent"
    mc:Ignorable="d">

    <Page.Resources>
        <ResourceDictionary>
            <converters:StringVisibilityConverter
                x:Key="StringNotEmptyToVisibilityConverter"
                EmptyValue="Collapsed"
                NotEmptyValue="Visible" />

            <cmdpalUI:DetailsSizeToGridLengthConverter x:Key="SizeToWidthConverter" />
            <cmdpalUI:MessageStateToSeverityConverter x:Key="MessageStateToSeverityConverter" />

            <cmdpalUI:DetailsDataTemplateSelector
                x:Key="DetailsDataTemplateSelector"
                CommandTemplate="{StaticResource DetailsCommandsTemplate}"
                LinkTemplate="{StaticResource DetailsLinkTemplate}"
                SeparatorTemplate="{StaticResource DetailsSeparatorTemplate}"
                TagTemplate="{StaticResource DetailsTagsTemplate}" />

            <converters:BoolToVisibilityConverter
                x:Key="BoolToInvertedVisibilityConverter"
                FalseValue="Visible"
                TrueValue="Collapsed" />

            <Style
                x:Key="DetailKeyTextBlockStyle"
                BasedOn="{StaticResource CaptionTextBlockStyle}"
                TargetType="TextBlock">
                <Setter Property="IsTextSelectionEnabled" Value="True" />
                <Setter Property="TextWrapping" Value="WrapWholeWords" />
                <Setter Property="Foreground" Value="{ThemeResource TextFillColorSecondaryBrush}" />
            </Style>

            <Style
                x:Key="SeparatorKeyTextBlockStyle"
                BasedOn="{StaticResource BodyStrongTextBlockStyle}"
                TargetType="TextBlock">
                <Setter Property="IsTextSelectionEnabled" Value="True" />
                <Setter Property="TextWrapping" Value="WrapWholeWords" />
            </Style>

            <Style
                x:Key="DetailValueTextBlockStyle"
                BasedOn="{StaticResource BodyTextBlockStyle}"
                TargetType="TextBlock">
                <Setter Property="IsTextSelectionEnabled" Value="True" />
                <Setter Property="TextWrapping" Value="WrapWholeWords" />
            </Style>

            <DataTemplate x:Key="TagTemplate" x:DataType="viewModels:TagViewModel">
                <cpcontrols:Tag
                    HorizontalAlignment="Left"
                    AutomationProperties.Name="{x:Bind Text, Mode=OneWay}"
                    BackgroundColor="{x:Bind Background, Mode=OneWay}"
                    FontSize="12"
                    ForegroundColor="{x:Bind Foreground, Mode=OneWay}"
                    Icon="{x:Bind Icon, Mode=OneWay}"
                    Text="{x:Bind Text, Mode=OneWay}"
                    ToolTipService.ToolTip="{x:Bind ToolTip, Mode=OneWay}" />
            </DataTemplate>

            <DataTemplate x:Key="CommandTemplate" x:DataType="viewModels:CommandViewModel">
                <StackPanel Orientation="Vertical">
                    <Button
                        Name="Command"
                        HorizontalAlignment="Stretch"
                        HorizontalContentAlignment="Left"
                        Click="Command_Click"
                        Style="{StaticResource SubtleButtonStyle}">
                        <StackPanel VerticalAlignment="Center" Orientation="Horizontal">
                            <cpcontrols:IconBox
                                Width="16"
                                Height="16"
                                Margin="0,3,8,0"
                                SourceKey="{x:Bind Icon, Mode=OneWay}"
                                SourceRequested="{x:Bind help:IconProvider.SourceRequested20}" />
                            <TextBlock Style="{StaticResource BodyTextBlockStyle}" Text="{x:Bind Name}" />
                        </StackPanel>
                    </Button>
                </StackPanel>
            </DataTemplate>

            <DataTemplate x:Key="DetailsLinkTemplate" x:DataType="viewModels:DetailsLinkViewModel">
                <StackPanel Orientation="Vertical">
                    <TextBlock Style="{StaticResource DetailKeyTextBlockStyle}" Text="{x:Bind Key, Mode=OneWay}" />
                    <TextBlock
                        Style="{StaticResource DetailValueTextBlockStyle}"
                        Text="{x:Bind Text, Mode=OneWay}"
                        Visibility="{x:Bind IsText, Mode=OneWay}" />
                    <HyperlinkButton
                        Padding="0"
                        Command="{x:Bind NavigateCommand, Mode=OneWay}"
                        NavigateUri="{x:Bind Link, Mode=OneWay}"
                        Visibility="{x:Bind IsLink, Mode=OneWay}">
                        <TextBlock Text="{x:Bind Text, Mode=OneWay}" TextWrapping="Wrap" />
                    </HyperlinkButton>
                </StackPanel>
            </DataTemplate>
            <DataTemplate x:Key="DetailsCommandsTemplate" x:DataType="viewModels:DetailsCommandsViewModel">
                <StackPanel Orientation="Vertical" Spacing="4">
                    <TextBlock Style="{StaticResource DetailKeyTextBlockStyle}" Text="{x:Bind Key, Mode=OneWay}" />
                    <ItemsControl
                        ItemTemplate="{StaticResource CommandTemplate}"
                        ItemsSource="{x:Bind Commands, Mode=OneWay}"
                        Visibility="{x:Bind HasCommands, Mode=OneWay}" />
                </StackPanel>
            </DataTemplate>
            <DataTemplate x:Key="DetailsSeparatorTemplate" x:DataType="viewModels:DetailsSeparatorViewModel">
                <StackPanel Margin="0,8,8,0" Orientation="Vertical">
                    <TextBlock
                        Margin="0,8,0,0"
                        Style="{StaticResource SeparatorKeyTextBlockStyle}"
                        Text="{x:Bind Key, Mode=OneWay}"
                        Visibility="{x:Bind help:BindTransformers.EmptyOrWhitespaceToCollapsed(Key), Mode=OneWay, FallbackValue=Collapsed}" />
                    <Border
                        Margin="0,0,0,0"
                        BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
                        BorderThickness="0,0,0,1"
                        Visibility="{x:Bind help:BindTransformers.EmptyOrWhitespaceToVisible(Key), Mode=OneWay, FallbackValue=Collapsed}" />
                </StackPanel>
            </DataTemplate>
            <DataTemplate x:Key="DetailsTagsTemplate" x:DataType="viewModels:DetailsTagsViewModel">
                <StackPanel Orientation="Vertical" Spacing="4">
                    <TextBlock Style="{StaticResource DetailKeyTextBlockStyle}" Text="{x:Bind Key, Mode=OneWay}" />
                    <ItemsControl
                        ItemTemplate="{StaticResource TagTemplate}"
                        ItemsSource="{x:Bind Tags, Mode=OneWay}"
                        Visibility="{x:Bind HasTags, Mode=OneWay}">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <toolkit:WrapPanel
                                    x:Name="TagsWrapPanel"
                                    MinWidth="0"
                                    Padding="0"
                                    HorizontalSpacing="4"
                                    Orientation="Horizontal"
                                    VerticalSpacing="4" />
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                    </ItemsControl>
                </StackPanel>
            </DataTemplate>
            <tkcontrols:MarkdownThemes
                x:Key="DefaultMarkdownThemeConfig"
                H3FontSize="12"
                H3FontWeight="Normal" />
            <markdownImageProviders:ImageProvider x:Key="ImageProvider" />
            <tkcontrols:MarkdownConfig
                x:Key="DefaultMarkdownConfig"
                ImageProvider="{StaticResource ImageProvider}"
                Themes="{StaticResource DefaultMarkdownThemeConfig}" />
        </ResourceDictionary>
    </Page.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <Grid Grid.Row="0" Background="{ThemeResource LayerOnAcrylicPrimaryBackgroundBrush}">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <!--  Back button and search box  -->
            <Grid
                x:Name="TopBarGrid"
                Padding="0,12,0,12"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch"
                BorderBrush="{ThemeResource CmdPal.TopBarBorderBrush}"
                BorderThickness="0,0,0,1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>

                <!--  Back button  -->
                <StackPanel Orientation="Horizontal">
                    <!--
                        This border is to hold a bit of padding we need when
                        the back button is hidden
                    -->
                    <Border Margin="20,0,0,0" Visibility="{x:Bind ViewModel.CurrentPage.HasBackButton, Mode=OneWay, Converter={StaticResource BoolToInvertedVisibilityConverter}}" />
                    <Image
                        Width="20"
                        Margin="0,0,6,0"
                        HorizontalAlignment="Center"
                        ui:VisualExtensions.NormalizedCenterPoint="0.5,0.5"
                        AutomationProperties.AccessibilityView="Raw"
                        Source="ms-appx:///Assets/icon.svg"
                        Visibility="{x:Bind ViewModel.CurrentPage.IsRootPage, Mode=OneWay}">
                        <animations:Implicit.ShowAnimations>
                            <animations:OpacityAnimation
                                EasingMode="EaseIn"
                                EasingType="Cubic"
                                From="0"
                                To="1.0"
                                Duration="0:0:0.187" />
                            <animations:ScaleAnimation
                                EasingMode="EaseIn"
                                EasingType="Cubic"
                                From="0.5"
                                To="1"
                                Duration="0:0:0.187" />
                        </animations:Implicit.ShowAnimations>
                        <animations:Implicit.HideAnimations>
                            <animations:OpacityAnimation
                                EasingMode="EaseOut"
                                EasingType="Cubic"
                                From="1.0"
                                To="0"
                                Duration="0:0:0.187" />
                            <animations:ScaleAnimation
                                EasingMode="EaseOut"
                                EasingType="Cubic"
                                From="1"
                                To="0.5"
                                Duration="0:0:0.187" />
                        </animations:Implicit.HideAnimations>
                    </Image>
                    <Button
                        x:Name="BackButton"
                        x:Uid="BackButton"
                        Margin="4,0,4,0"
                        Padding="4"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        ui:VisualExtensions.NormalizedCenterPoint="0.5,0.5"
                        Click="BackButton_Clicked"
                        Content="{ui:FontIcon Glyph=&#xE76B;,
                                              FontSize=14}"
                        FontSize="16"
                        Style="{StaticResource SubtleButtonStyle}"
                        Visibility="{x:Bind ViewModel.CurrentPage.HasBackButton, Mode=OneWay}">
                        <animations:Implicit.ShowAnimations>
                            <animations:OpacityAnimation
                                EasingMode="EaseIn"
                                EasingType="Cubic"
                                From="0"
                                To="1.0"
                                Duration="0:0:0.333" />
                            <animations:ScaleAnimation
                                From="0.5"
                                To="1"
                                Duration="0:0:0.333" />
                            <animations:TranslationAnimation
                                From="16,0,0"
                                To="0,0,0"
                                Duration="0:0:0.333" />
                        </animations:Implicit.ShowAnimations>
                        <animations:Implicit.HideAnimations>
                            <animations:OpacityAnimation
                                EasingMode="EaseOut"
                                EasingType="Cubic"
                                From="1.0"
                                To="0"
                                Duration="0:0:0.333" />
                            <animations:ScaleAnimation
                                EasingMode="EaseOut"
                                EasingType="Cubic"
                                From="1"
                                To="0.5"
                                Duration="0:0:0.333" />
                            <animations:TranslationAnimation
                                EasingMode="EaseOut"
                                EasingType="Cubic"
                                From="0,0,0"
                                To="16,0,0"
                                Duration="0:0:0.187" />
                        </animations:Implicit.HideAnimations>
                    </Button>
                    <cpcontrols:IconBox
                        Grid.Column="1"
                        Width="20"
                        Margin="4,0,4,0"
                        VerticalAlignment="Center"
                        ui:VisualExtensions.NormalizedCenterPoint="0.5,0.5"
                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                        SourceKey="{x:Bind ViewModel.CurrentPage.Icon, Mode=OneWay}"
                        SourceRequested="{x:Bind help:IconProvider.SourceRequested20}"
                        Visibility="{x:Bind ViewModel.CurrentPage.IsRootPage, Mode=OneWay, Converter={StaticResource BoolToInvertedVisibilityConverter}}">
                        <animations:Implicit.ShowAnimations>
                            <animations:OpacityAnimation
                                From="0"
                                To="1.0"
                                Duration="0:0:0.333" />
                            <animations:ScaleAnimation
                                From="0.8"
                                To="1"
                                Duration="0:0:0.333" />
                            <animations:TranslationAnimation
                                From="8,0,0"
                                To="0,0,0"
                                Duration="0:0:0.187" />
                        </animations:Implicit.ShowAnimations>
                        <animations:Implicit.HideAnimations>
                            <animations:OpacityAnimation
                                From="1.0"
                                To="0"
                                Duration="0:0:0.333" />
                            <animations:ScaleAnimation
                                From="1"
                                To="0.8"
                                Duration="0:0:0.333" />
                            <animations:TranslationAnimation
                                From="0,0,0"
                                To="8,0,0"
                                Duration="0:0:0.187" />
                        </animations:Implicit.HideAnimations>
                    </cpcontrols:IconBox>
                </StackPanel>
                <!--  Search box: wrapped in a grid to enable RepositionThemeTransitions  -->
                <Grid Grid.Column="1" HorizontalAlignment="Stretch">
                    <cpcontrols:SearchBar
                        x:Name="SearchBox"
                        HorizontalAlignment="Stretch"
                        CurrentPageViewModel="{x:Bind ViewModel.CurrentPage, Mode=OneWay}" />
                    <Grid.Transitions>
                        <TransitionCollection>
                            <RepositionThemeTransition />
                        </TransitionCollection>
                    </Grid.Transitions>
                </Grid>
                <!--  Filter: wrapped in a grid to enable RepositionThemeTransitions  -->
                <Grid Grid.Column="2" HorizontalAlignment="Right">
                    <cpcontrols:FiltersDropDown
                        x:Name="FiltersDropDown"
                        HorizontalAlignment="Right"
                        CurrentPageViewModel="{x:Bind ViewModel.CurrentPage, Mode=OneWay}" />
                </Grid>
            </Grid>

            <ProgressBar
                Grid.ColumnSpan="2"
                VerticalAlignment="Bottom"
                IsIndeterminate="True"
                Visibility="{x:Bind ViewModel.CurrentPage.IsLoading, Mode=OneWay}">
                <animations:Implicit.ShowAnimations>
                    <animations:OpacityAnimation
                        From="0"
                        To="1.0"
                        Duration="0:0:0.333" />
                </animations:Implicit.ShowAnimations>
                <animations:Implicit.HideAnimations>
                    <animations:OpacityAnimation
                        From="1.0"
                        To="0"
                        Duration="0:0:0.333" />
                </animations:Implicit.HideAnimations>
            </ProgressBar>

            <Grid x:Name="ContentGrid" Grid.Row="1">

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="{x:Bind ViewModel.Details.Size, Mode=OneWay, Converter={StaticResource SizeToWidthConverter}}" />
                    <ColumnDefinition x:Name="DetailsColumn" Width="Auto" />
                </Grid.ColumnDefinitions>

                <Frame
                    Name="RootFrame"
                    AutomationProperties.AutomationControlType="Pane"
                    AutomationProperties.LandmarkType="Navigation"
                    AutomationProperties.LiveSetting="Assertive"
                    IsNavigationStackEnabled="True"
                    Navigated="RootFrame_Navigated" />

                <ScrollViewer
                    x:Name="DetailsContent"
                    Grid.Column="1"
                    Margin="4"
                    HorizontalAlignment="Stretch"
                    ui:VisualExtensions.NormalizedCenterPoint="0.5,0.5"
                    Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                    BorderBrush="{ThemeResource CmdPal.DividerStrokeColorDefaultBrush}"
                    BorderThickness="1"
                    CornerRadius="{StaticResource ControlCornerRadius}"
                    Visibility="Collapsed">
                    <animations:Implicit.ShowAnimations>
                        <animations:OpacityAnimation
                            From="0"
                            To="1.0"
                            Duration="0:0:0.187" />
                        <animations:TranslationAnimation
                            From="24,0,0"
                            To="0,0,0"
                            Duration="0:0:0.187" />
                    </animations:Implicit.ShowAnimations>
                    <animations:Implicit.HideAnimations>
                        <animations:OpacityAnimation
                            From="1.0"
                            To="0"
                            Duration="0:0:0.187" />
                        <animations:TranslationAnimation
                            From="0,0,0"
                            To="24,0,0"
                            Duration="0:0:0.187" />
                    </animations:Implicit.HideAnimations>
                    <Grid Margin="16">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>

                        <cpcontrols:IconBox
                            x:Name="HeroImageBorder"
                            Width="64"
                            Margin="0,0,16,16"
                            HorizontalAlignment="Left"
                            AutomationProperties.AccessibilityView="Raw"
                            SourceKey="{x:Bind ViewModel.Details.HeroImage, Mode=OneWay}"
                            SourceRequested="{x:Bind help:IconProvider.SourceRequested64}"
                            Visibility="{x:Bind HasHeroImage, Mode=OneWay}" />

                        <TextBlock
                            Grid.Row="1"
                            FontSize="18"
                            FontWeight="SemiBold"
                            Text="{x:Bind ViewModel.Details.Title, Mode=OneWay}"
                            TextWrapping="WrapWholeWords"
                            Visibility="{x:Bind ViewModel.Details.Title, Converter={StaticResource StringNotEmptyToVisibilityConverter}, Mode=OneWay}" />

                        <tkcontrols:MarkdownTextBlock
                            Grid.Row="2"
                            Margin="0,4,0,24"
                            Background="Transparent"
                            Config="{StaticResource DefaultMarkdownConfig}"
                            Text="{x:Bind ViewModel.Details.Body, Mode=OneWay}"
                            UseEmphasisExtras="True"
                            UsePipeTables="True" />

                        <ItemsRepeater
                            Grid.Row="3"
                            ItemTemplate="{StaticResource DetailsDataTemplateSelector}"
                            ItemsSource="{x:Bind ViewModel.Details.Metadata, Mode=OneWay}">
                            <ItemsRepeater.Layout>
                                <StackLayout Spacing="12" />
                            </ItemsRepeater.Layout>
                        </ItemsRepeater>
                    </Grid>
                </ScrollViewer>
                <!--  /DetailsContent  -->
            </Grid>
            <ScrollView
                Grid.Row="2"
                Grid.ColumnSpan="2"
                MaxHeight="120"
                Background="{ThemeResource SystemControlErrorBackgroundColor}"
                BorderBrush="{ThemeResource SystemControlErrorTextForegroundBrush}"
                BorderThickness="0,1,0,1"
                CornerRadius="0"
                Visibility="{x:Bind ViewModel.CurrentPage.ErrorMessage, Converter={StaticResource StringNotEmptyToVisibilityConverter}, Mode=OneWay}">
                <TextBlock Margin="16,8,16,16" IsTextSelectionEnabled="True">
                    <Run
                        FontWeight="SemiBold"
                        Foreground="{ThemeResource SystemErrorTextColor}"
                        Text="Error(s) on page:" />
                    <LineBreak /><Run Text="{x:Bind ViewModel.CurrentPage.ErrorMessage, Mode=OneWay}" />
                </TextBlock>
            </ScrollView>
        </Grid>

        <!--
            Horrifying: You may ask yourself - why is there a Background on this InfoBar?
            
            Well, as it turns out, the Informational InfoBar has a transparent
            background. It just cannot be bothered. So, we need to manually give
            it one to actually obscure the text beneath it. And you can't just give
            the InfoBar itself a Background, because then the other Severity's
            won't get colorized.
            
            See https://github.com/microsoft/microsoft-ui-xaml/issues/5741
        -->
        <StackPanel
            Grid.Row="0"
            Margin="16,8,16,8"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Bottom"
            Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
            CornerRadius="{ThemeResource ControlCornerRadius}">
            <InfoBar
                CornerRadius="{ThemeResource ControlCornerRadius}"
                IsOpen="{x:Bind ViewModel.CurrentPage.HasStatusMessage, Mode=OneWay}"
                Message="{x:Bind ViewModel.CurrentPage.MostRecentStatusMessage.Message, Mode=OneWay}"
                Severity="{x:Bind ViewModel.CurrentPage.MostRecentStatusMessage.State, Mode=OneWay, Converter={StaticResource MessageStateToSeverityConverter}}">

                <InfoBar.Content>
                    <ProgressBar
                        Margin="0,-20,0,0"
                        IsIndeterminate="{x:Bind ViewModel.CurrentPage.MostRecentStatusMessage.Progress.IsIndeterminate, Mode=OneWay}"
                        Visibility="{x:Bind ViewModel.CurrentPage.MostRecentStatusMessage.HasProgress, Mode=OneWay}"
                        Value="{x:Bind ViewModel.CurrentPage.MostRecentStatusMessage.Progress.ProgressPercent, Mode=OneWay}" />
                    <!--  Margin="0,0,0,6" MaxWidth="200"/>  -->
                </InfoBar.Content>
            </InfoBar>
        </StackPanel>

        <Grid
            Grid.Row="1"
            Background="{ThemeResource LayerOnAcrylicSecondaryBackgroundBrush}"
            BorderBrush="{ThemeResource CmdPal.DividerStrokeColorDefaultBrush}"
            BorderThickness="0,1,0,0">
            <cpcontrols:CommandBar CurrentPageViewModel="{x:Bind ViewModel.CurrentPage, Mode=OneWay}" />
        </Grid>

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="DetailsCollapsed" />
                <VisualState x:Name="DetailsVisible">
                    <VisualState.StateTriggers>
                        <StateTrigger IsActive="{x:Bind ViewModel.IsDetailsVisible, Mode=OneWay}" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="DetailsContent.Visibility" Value="Visible" />
                        <Setter Target="DetailsColumn.Width" Value="2*" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup>
                <!--
                    Why disable it and make it transparent?
                    To prevent the container from collapsing, ensuring the layout metrics remain unchanged.
                -->
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0:0:0.187" To="SearchBarCollapsed" />
                </VisualStateGroup.Transitions>
                <VisualState x:Name="SearchBarVisible" />
                <VisualState x:Name="SearchBarCollapsed">
                    <VisualState.StateTriggers>
                        <StateTrigger IsActive="{x:Bind h:BindTransformers.Negate(ViewModel.IsSearchBoxVisible), Mode=OneWay}" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="SearchBox.IsEnabled" Value="False" />
                        <Setter Target="SearchBox.Opacity" Value="0" />
                        <Setter Target="TopBarGrid.BorderBrush" Value="Transparent" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</Page>