BetterLyrics/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Views/MusicGalleryPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<Page
    x:Class="BetterLyrics.WinUI3.Views.MusicGalleryPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:atl="using:ATL"
    xmlns:controls="using:CommunityToolkit.WinUI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:dev="using:DevWinUI"
    xmlns:ext="using:BetterLyrics.WinUI3.Extensions"
    xmlns:helper="using:BetterLyrics.WinUI3.Helper"
    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
    xmlns:labs="using:CommunityToolkit.Labs.WinUI"
    xmlns:local="using:BetterLyrics.WinUI3.Views"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:media="using:CommunityToolkit.WinUI.Media"
    xmlns:models="using:BetterLyrics.WinUI3.Models"
    xmlns:muxm="using:Microsoft.UI.Xaml.Media"
    xmlns:uc="using:BetterLyrics.WinUI3.Controls"
    xmlns:ui="using:CommunityToolkit.WinUI"
    Loaded="Page_Loaded"
    Unloaded="Page_Unloaded"
    mc:Ignorable="d">
    <Page.Resources>
        <CollectionViewSource
            x:Name="GroupedTracksCVS"
            IsSourceGrouped="True"
            Source="{x:Bind ViewModel.GroupedTracks, Mode=OneWay}" />
    </Page.Resources>

    <Grid>
        <Grid Padding="12,16,12,64" ColumnSpacing="12">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="3*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <ScrollViewer Grid.Column="0">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>

                    <TextBlock
                        x:Uid="MusicGalleryPagePlaylist"
                        Grid.Row="0"
                        Margin="1,0,0,6"
                        Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />

                    <Grid Grid.Row="1">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <!--  播放列表  -->
                        <ListView
                            x:Name="StarredPlaylistsListView"
                            Grid.Row="0"
                            ItemsSource="{x:Bind ViewModel.AppSettings.StarredPlaylists, Mode=OneWay}"
                            SelectedIndex="{x:Bind ViewModel.SelectedSongsTabInfoIndex, Mode=TwoWay}">
                            <ListView.ItemTemplate>
                                <DataTemplate x:DataType="models:SongsTabInfo">
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="1*" />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>
                                        <Grid
                                            Grid.Column="0"
                                            ColumnSpacing="6"
                                            Tapped="PlaylistGrid_Tapped">
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="Auto" />
                                                <ColumnDefinition Width="*" />
                                            </Grid.ColumnDefinitions>
                                            <FontIcon
                                                Grid.Column="0"
                                                FontFamily="{StaticResource IconFontFamily}"
                                                FontSize="16"
                                                Glyph="{x:Bind Icon}" />
                                            <TextBlock
                                                Grid.Column="1"
                                                Margin="0,8"
                                                VerticalAlignment="Center"
                                                Style="{StaticResource BodyTextBlockStyle}"
                                                Text="{x:Bind Name}"
                                                TextWrapping="Wrap" />
                                        </Grid>
                                        <!--  从播放列表移除  -->
                                        <Button
                                            Grid.Column="1"
                                            Click="RemoveFromPlaylistButton_Click"
                                            Content="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                                                  FontSize=16,
                                                                  Glyph=&#xE711;}"
                                            Style="{StaticResource GhostButtonStyle}"
                                            Visibility="{x:Bind IsDefault, Converter={StaticResource BoolNegationToVisibilityConverter}}">
                                            <ToolTipService.ToolTip>
                                                <TextBlock x:Uid="MusicGalleryPageRemoveFromCustomList" />
                                            </ToolTipService.ToolTip>
                                        </Button>
                                    </Grid>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                        <NavigationViewItemSeparator Grid.Row="1" />
                        <!--  命令区域  -->
                        <Grid Grid.Row="2">
                            <StackPanel>
                                <!--  创建播放列表  -->
                                <Button
                                    HorizontalAlignment="Stretch"
                                    HorizontalContentAlignment="Stretch"
                                    Background="Transparent"
                                    BorderBrush="Transparent"
                                    Command="{x:Bind ViewModel.CreatePlaylistCommand}">
                                    <Button.Content>
                                        <StackPanel
                                            Padding="4,0"
                                            VerticalAlignment="Center"
                                            Orientation="Horizontal"
                                            Spacing="6">
                                            <FontIcon
                                                FontFamily="{StaticResource IconFontFamily}"
                                                FontSize="16"
                                                Glyph="&#xE710;" />
                                            <TextBlock x:Uid="MusicGalleryPageNewPlaylist" />
                                        </StackPanel>
                                    </Button.Content>
                                </Button>
                                <!--  导入播放列表  -->
                                <Button
                                    HorizontalAlignment="Stretch"
                                    HorizontalContentAlignment="Stretch"
                                    Background="Transparent"
                                    BorderBrush="Transparent"
                                    Command="{x:Bind ViewModel.ImportPlaylistCommand}">
                                    <Button.Content>
                                        <StackPanel
                                            Padding="4,0"
                                            VerticalAlignment="Center"
                                            Orientation="Horizontal"
                                            Spacing="6">
                                            <FontIcon
                                                FontFamily="{StaticResource IconFontFamily}"
                                                FontSize="16"
                                                Glyph="&#xE896;" />
                                            <TextBlock x:Uid="MusicGalleryPageImportFromFile" />
                                        </StackPanel>
                                    </Button.Content>
                                </Button>
                            </StackPanel>
                        </Grid>
                    </Grid>

                    <NavigationViewItemSeparator Grid.Row="2" />

                    <TextBlock
                        x:Uid="MusicGalleryPageFolder"
                        Grid.Row="3"
                        Margin="1,4,0,6"
                        Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />

                    <TreeView
                        x:Name="FolderTreeView"
                        Grid.Row="4"
                        AllowDrop="False"
                        CanDrag="False"
                        CanDragItems="False"
                        ItemInvoked="FolderTreeView_ItemInvoked"
                        ItemsSource="{x:Bind ViewModel.FolderRoots, Mode=OneWay}"
                        SelectionMode="Single">

                        <TreeView.ItemTemplate>
                            <DataTemplate x:DataType="models:FolderNode">
                                <TreeViewItem IsExpanded="{x:Bind IsExpanded, Mode=TwoWay}" ItemsSource="{x:Bind SubFolders}">
                                    <StackPanel Orientation="Horizontal" Spacing="10">
                                        <FontIcon FontSize="16" Glyph="{x:Bind SourceType, Converter={StaticResource FileSourceTypeToIconConverter}}" />
                                        <TextBlock VerticalAlignment="Center" Text="{x:Bind FolderName}" />
                                    </StackPanel>
                                </TreeViewItem>
                            </DataTemplate>
                        </TreeView.ItemTemplate>
                    </TreeView>

                </Grid>
            </ScrollViewer>

            <Grid x:Name="SongViewer" Grid.Column="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.Tag>
                    <Flyout
                        x:Name="SongFileInfoFlyout"
                        FlyoutPresenterStyle="{StaticResource FlyoutGhostStyle}"
                        Placement="Bottom"
                        ShouldConstrainToRootBounds="False">
                        <ScrollViewer MaxWidth="300" MaxHeight="600">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <controls:OpacityMaskView Grid.Row="0" MaxHeight="300">
                                    <controls:OpacityMaskView.OpacityMask>
                                        <Rectangle>
                                            <Rectangle.Fill>
                                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                                    <GradientStop Offset="0" Color="White" />
                                                    <GradientStop Offset="1" Color="Transparent" />
                                                </LinearGradientBrush>
                                            </Rectangle.Fill>
                                        </Rectangle>
                                    </controls:OpacityMaskView.OpacityMask>
                                    <Image Source="{x:Bind ViewModel.TrackRightTapped.LocalAlbumArtPath, Mode=OneWay, Converter={StaticResource PathToImageConverter}}" Stretch="Uniform" />
                                </controls:OpacityMaskView>
                                <StackPanel
                                    Grid.Row="1"
                                    Padding="12"
                                    Spacing="6">
                                    <uc:PropertyRow x:Uid="MusicGalleryPageFileInfoTitle" Value="{x:Bind ViewModel.TrackRightTapped.Title, Mode=OneWay}" />
                                    <uc:PropertyRow x:Uid="MusicGalleryPageFileArtist" Value="{x:Bind ViewModel.TrackRightTapped.Artist, Mode=OneWay}" />
                                    <uc:PropertyRow x:Uid="MusicGalleryPageFileAlbum" Value="{x:Bind ViewModel.TrackRightTapped.Album, Mode=OneWay}" />
                                    <uc:PropertyRow x:Uid="MusicGalleryPageFileInfoYear" Value="{x:Bind ViewModel.TrackRightTapped.Year, Mode=OneWay}" />
                                    <uc:PropertyRow x:Uid="MusicGalleryPageFileInfoDuration" Value="{x:Bind ViewModel.TrackRightTapped.Duration, Converter={StaticResource SecondsToFormattedTimeConverter}, Mode=OneWay}" />
                                    <uc:PropertyRow x:Uid="MusicGalleryPageFileInfoBitrate" Value="{x:Bind ViewModel.TrackRightTapped.Bitrate, Mode=OneWay}" />
                                    <uc:PropertyRow x:Uid="MusicGalleryPageFileInfoSampleRate" Value="{x:Bind ViewModel.TrackRightTapped.SampleRate, Mode=OneWay}" />
                                    <uc:PropertyRow x:Uid="MusicGalleryPageFileInfoBitDepth" Value="{x:Bind ViewModel.TrackRightTapped.BitDepth, Mode=OneWay}" />
                                    <uc:PropertyRow x:Uid="MusicGalleryPageFileInfoFormat" Value="{x:Bind ViewModel.TrackRightTapped.AudioFormatName, Mode=OneWay}" />
                                    <uc:PropertyRow x:Uid="MusicGalleryPageFileInfoEncoder" Value="{x:Bind ViewModel.TrackRightTapped.Encoder, Mode=OneWay}" />
                                    <uc:PropertyRow x:Uid="MusicGalleryPageFileInfoPath" Value="{x:Bind ViewModel.TrackRightTapped.DecodedAbsoluteUri, Mode=OneWay}" />
                                    <uc:PropertyRow x:Uid="MusicGalleryPageFileInfoLyrics" Value="{x:Bind ViewModel.TrackRightTapped.RawLyrics, Mode=OneWay}" />
                                </StackPanel>
                            </Grid>
                        </ScrollViewer>
                    </Flyout>
                </Grid.Tag>

                <StackPanel Grid.Row="0" Spacing="6">

                    <AutoSuggestBox
                        x:Name="SongSearchBox"
                        x:Uid="MusicGalleryPageSongSearchBox"
                        HorizontalAlignment="Stretch"
                        QueryIcon="Find"
                        Text="{x:Bind ViewModel.SongSearchQuery, Mode=TwoWay}" />

                    <Grid>

                        <StackPanel
                            HorizontalAlignment="Left"
                            Orientation="Horizontal"
                            Spacing="6">

                            <CheckBox
                                x:Name="SelectAllCheckBox"
                                MinWidth="20"
                                VerticalAlignment="Center"
                                Checked="SelectAllCheckBox_Checked"
                                Unchecked="SelectAllCheckBox_Unchecked"
                                Visibility="{Binding ElementName=SongListViewSelectionModeToggleButton, Path=IsChecked, Converter={StaticResource BoolToVisibilityConverter}, Mode=OneWay}" />

                            <StackPanel VerticalAlignment="Center" Orientation="Horizontal">
                                <TextBlock Foreground="{ThemeResource TextFillColorSecondaryBrush}" Text="{x:Bind ViewModel.SelectedTracks.Count, Mode=OneWay}" />
                                <TextBlock Foreground="{ThemeResource TextFillColorSecondaryBrush}" Text="/" />
                                <TextBlock Text="{x:Bind GroupedTracksCVS.View.Count, Mode=OneWay}" />
                            </StackPanel>
                            <StackPanel VerticalAlignment="Center" Orientation="Horizontal">
                                <TextBlock Text="{x:Bind ViewModel.SelectedTracksTotalDuration, Mode=OneWay, Converter={StaticResource SecondsToFormattedTimeConverter}}" />
                            </StackPanel>

                        </StackPanel>
                        <StackPanel
                            HorizontalAlignment="Right"
                            Orientation="Horizontal"
                            Spacing="6">
                            <StackPanel Orientation="Horizontal" Spacing="12">
                                <TextBlock
                                    x:Uid="MusicGalleryPageSortType"
                                    VerticalAlignment="Center"
                                    Style="{StaticResource BodyStrongTextBlockStyle}" />
                                <controls:Segmented
                                    x:Name="Segmented"
                                    SelectedIndex="{x:Bind ViewModel.SongOrderType, Converter={StaticResource EnumToIntConverter}, Mode=TwoWay}"
                                    SelectionMode="Single">
                                    <controls:SegmentedItem x:Uid="MusicGalleryPageSortByTitle" Icon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xEC4F;}" />
                                    <controls:SegmentedItem x:Uid="MusicGalleryPageSortByAlbum" Icon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE93C;}" />
                                    <controls:SegmentedItem x:Uid="MusicGalleryPageSortByArtist" Icon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xEFA9;}" />
                                    <controls:SegmentedItem x:Uid="MusicGalleryPageSortByFolder" Icon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE8B7;}" />
                                </controls:Segmented>
                            </StackPanel>
                        </StackPanel>
                    </Grid>

                </StackPanel>

                <SemanticZoom Grid.Row="1">
                    <SemanticZoom.ZoomedInView>
                        <ListView
                            x:Name="SongListView"
                            ItemsSource="{x:Bind GroupedTracksCVS.View, Mode=OneWay}"
                            SelectionChanged="SongListView_SelectionChanged"
                            SelectionMode="Multiple">
                            <ListView.ContextFlyout>
                                <MenuBarItemFlyout>
                                    <MenuFlyoutSubItem x:Uid="MusicGalleryPageAddToPlayingQueue" IsEnabled="{x:Bind ViewModel.SelectedTracks.Count, Mode=OneWay, Converter={StaticResource IntToBoolConverter}}">
                                        <MenuFlyoutItem x:Uid="MusicGalleryPageAddToNext" Click="AddSongToQueueNextMenuFlyoutItem_Click" />
                                        <MenuFlyoutItem x:Uid="MusicGalleryPageAddToEnd" Click="AddSongToQueueEndMenuFlyoutItem_Click" />
                                    </MenuFlyoutSubItem>
                                    <MenuFlyoutItem
                                        x:Uid="MusicGalleryPageAddToCustomList"
                                        Click="AddToPlaylistMenuFlyoutItem_Click"
                                        IsEnabled="{x:Bind ViewModel.SelectedTracks.Count, Mode=OneWay, Converter={StaticResource IntToBoolConverter}}">
                                        <MenuFlyoutItem.ContextFlyout>
                                            <Flyout FlyoutPresenterStyle="{StaticResource FlyoutGhostStyle}" Placement="Bottom">
                                                <ListView ItemsSource="{x:Bind ViewModel.AppSettings.StarredPlaylists, Mode=OneWay}">
                                                    <ListView.ItemTemplate>
                                                        <DataTemplate x:DataType="models:SongsTabInfo">
                                                            <Grid Tapped="ToBeAddedPlaylistsListViewItemGrid_Tapped">
                                                                <StackPanel Orientation="Horizontal" Spacing="6">
                                                                    <FontIcon
                                                                        FontFamily="{StaticResource IconFontFamily}"
                                                                        FontSize="16"
                                                                        Glyph="{x:Bind Icon}" />
                                                                    <TextBlock
                                                                        Margin="0,0,0,2"
                                                                        VerticalAlignment="Center"
                                                                        Style="{StaticResource BodyTextBlockStyle}"
                                                                        Text="{x:Bind Name}" />
                                                                </StackPanel>
                                                            </Grid>
                                                        </DataTemplate>
                                                    </ListView.ItemTemplate>
                                                </ListView>
                                            </Flyout>
                                        </MenuFlyoutItem.ContextFlyout>
                                    </MenuFlyoutItem>
                                </MenuBarItemFlyout>
                            </ListView.ContextFlyout>
                            <ListView.ItemTemplate>
                                <DataTemplate x:DataType="models:ExtendedTrack">
                                    <Grid
                                        Padding="12"
                                        ColumnSpacing="12"
                                        DoubleTapped="SongListViewItem_DoubleTapped">

                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="2*" />
                                            <ColumnDefinition Width="2*" />
                                            <ColumnDefinition Width="2*" />
                                            <ColumnDefinition Width="1*" />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>

                                        <!--  标题  -->
                                        <Grid Grid.Column="0">
                                            <TextBlock
                                                VerticalAlignment="Center"
                                                Text="{x:Bind Title}"
                                                TextWrapping="Wrap" />
                                        </Grid>

                                        <!--  艺术家  -->
                                        <Grid Grid.Column="1">
                                            <HyperlinkButton Click="ArtistHyperlibkButton_Click">
                                                <ToolTipService.ToolTip>
                                                    <TextBlock x:Uid="MusicGalleryPageAddToCustomList" />
                                                </ToolTipService.ToolTip>
                                                <TextBlock Text="{x:Bind Artist}" TextWrapping="Wrap" />
                                            </HyperlinkButton>
                                        </Grid>

                                        <!--  专辑  -->
                                        <Grid Grid.Column="2">
                                            <HyperlinkButton Click="AlbumHyperlibkButton_Click">
                                                <ToolTipService.ToolTip>
                                                    <TextBlock x:Uid="MusicGalleryPageAddToCustomList" />
                                                </ToolTipService.ToolTip>
                                                <TextBlock Text="{x:Bind Album}" TextWrapping="Wrap" />
                                            </HyperlinkButton>
                                        </Grid>

                                        <!--  歌曲时长  -->
                                        <TextBlock
                                            Grid.Column="3"
                                            VerticalAlignment="Center"
                                            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                            Text="{x:Bind Duration, Converter={StaticResource SecondsToFormattedTimeConverter}}"
                                            TextWrapping="Wrap" />

                                        <!--  更多  -->
                                        <Button
                                            Grid.Column="4"
                                            HorizontalAlignment="Right"
                                            Click="SongListViewItemMoreButton_Click"
                                            Content="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                                                  FontSize=12,
                                                                  Glyph=&#xE712;}"
                                            Style="{StaticResource GhostButtonStyle}" />

                                    </Grid>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                            <ListView.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <ItemsStackPanel AreStickyGroupHeadersEnabled="True" />
                                </ItemsPanelTemplate>
                            </ListView.ItemsPanel>
                            <ListView.GroupStyle>
                                <GroupStyle>
                                    <GroupStyle.HeaderTemplate>
                                        <DataTemplate x:DataType="models:GroupInfoList">
                                            <Border AutomationProperties.AccessibilityView="Raw">
                                                <TextBlock
                                                    AutomationProperties.AccessibilityView="Raw"
                                                    Style="{ThemeResource SubtitleTextBlockStyle}"
                                                    Text="{x:Bind}" />
                                            </Border>
                                        </DataTemplate>
                                    </GroupStyle.HeaderTemplate>
                                </GroupStyle>
                            </ListView.GroupStyle>
                        </ListView>
                    </SemanticZoom.ZoomedInView>

                    <SemanticZoom.ZoomedOutView>
                        <GridView
                            MaxWidth="500"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            ItemsSource="{x:Bind GroupedTracksCVS.View.CollectionGroups, Mode=OneWay}"
                            ScrollViewer.IsHorizontalScrollChainingEnabled="False"
                            SelectionMode="None">
                            <GridView.ItemTemplate>
                                <DataTemplate x:DataType="models:GroupInfoList">
                                    <TextBlock Style="{ThemeResource TitleTextBlockStyle}" Text="{Binding}" />
                                </DataTemplate>
                            </GridView.ItemTemplate>
                        </GridView>
                    </SemanticZoom.ZoomedOutView>
                </SemanticZoom>

                <Grid Grid.Row="1" Visibility="{x:Bind ViewModel.IsLocalMediaNotFound, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}">
                    <StackPanel
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Spacing="12">
                        <Image MaxWidth="200" Source="/Assets/EmptyState.png" />
                        <TextBlock
                            x:Uid="MusicGalleryPageFileNotFound"
                            HorizontalAlignment="Center"
                            Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
                    </StackPanel>
                </Grid>

            </Grid>

            <Grid x:Name="PlayQueue" Grid.Column="2">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>

                <Grid Grid.Row="0">
                    <TextBlock
                        x:Uid="MusicGalleryPagePlayingQueue"
                        VerticalAlignment="Center"
                        Style="{StaticResource BodyStrongTextBlockStyle}" />
                </Grid>

                <Grid Grid.Row="2">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>

                    <StackPanel
                        Grid.Column="0"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Center"
                        Orientation="Horizontal">
                        <TextBlock Foreground="{ThemeResource TextFillColorSecondaryBrush}" Text="{x:Bind ViewModel.AppSettings.MusicGallerySettings.PlayQueueIndex, Mode=OneWay, Converter={StaticResource IndexToDisplayConverter}}" />
                        <TextBlock Foreground="{ThemeResource TextFillColorSecondaryBrush}" Text="/" />
                        <TextBlock Text="{x:Bind ViewModel.TrackPlayingQueue.Count, Mode=OneWay}" />
                    </StackPanel>

                    <!--  Stop media session  -->
                    <Button
                        Grid.Column="1"
                        HorizontalAlignment="Right"
                        Command="{x:Bind ViewModel.StopTrackCommand}"
                        Content="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                              FontSize=16,
                                              Glyph=&#xE71A;}"
                        Style="{StaticResource GhostButtonStyle}">
                        <ToolTipService.ToolTip>
                            <TextBlock x:Uid="MusicGalleryPageStopTrack" />
                        </ToolTipService.ToolTip>
                    </Button>
                    <!--  Playback order  -->
                    <Button
                        Grid.Column="2"
                        HorizontalAlignment="Right"
                        Command="{x:Bind ViewModel.SwitchPlaybackOrderCommand}"
                        Style="{StaticResource GhostButtonStyle}">
                        <ToolTipService.ToolTip>
                            <ToolTip>
                                <Grid>
                                    <TextBlock x:Name="PlaybackRepeatAllHint" x:Uid="MusicGalleryPageQueueLoop" />
                                    <TextBlock x:Name="PlaybackRepeatOneHint" x:Uid="MusicGalleryPageSingleLoop" />
                                    <TextBlock x:Name="PlaybackShuffleHint" x:Uid="MusicGalleryPageQueueRandom" />
                                </Grid>
                            </ToolTip>
                        </ToolTipService.ToolTip>
                        <Button.Content>
                            <Grid>
                                <!--  Repeat all  -->
                                <FontIcon
                                    x:Name="PlaybackRepeatAll"
                                    FontFamily="{StaticResource IconFontFamily}"
                                    FontSize="16"
                                    Glyph="&#xE8EE;">
                                    <FontIcon.OpacityTransition>
                                        <ScalarTransition />
                                    </FontIcon.OpacityTransition>
                                </FontIcon>
                                <!--  Repeat one  -->
                                <FontIcon
                                    x:Name="PlaybackRepeatOne"
                                    FontFamily="{StaticResource IconFontFamily}"
                                    FontSize="16"
                                    Glyph="&#xE8ED;">
                                    <FontIcon.OpacityTransition>
                                        <ScalarTransition />
                                    </FontIcon.OpacityTransition>
                                </FontIcon>
                                <!--  Shuffle  -->
                                <FontIcon
                                    x:Name="PlaybackShuffle"
                                    FontFamily="{StaticResource IconFontFamily}"
                                    FontSize="16"
                                    Glyph="&#xE8B1;">
                                    <FontIcon.OpacityTransition>
                                        <ScalarTransition />
                                    </FontIcon.OpacityTransition>
                                </FontIcon>
                            </Grid>
                        </Button.Content>
                    </Button>
                    <!--  Scroll to playing item  -->
                    <Button
                        Grid.Column="3"
                        HorizontalAlignment="Right"
                        Click="ScrollToPlayingItemButton_Click"
                        Content="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                              FontSize=16,
                                              Glyph=&#xE7B7;}"
                        Style="{StaticResource GhostButtonStyle}">
                        <ToolTipService.ToolTip>
                            <TextBlock x:Uid="MusicGalleryPageScrollToPlayingItem" />
                        </ToolTipService.ToolTip>
                    </Button>
                    <!--  Empty play queue  -->
                    <Button
                        Grid.Column="4"
                        HorizontalAlignment="Right"
                        Click="EmptyPlayingQueueButton_Click"
                        Content="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                              FontSize=16,
                                              Glyph=&#xE738;}"
                        Style="{StaticResource GhostButtonStyle}">
                        <ToolTipService.ToolTip>
                            <TextBlock x:Uid="MusicGalleryPageEmptyPlayingQueue" />
                        </ToolTipService.ToolTip>
                    </Button>
                </Grid>

                <ListView
                    x:Name="PlayingQueueListView"
                    Grid.Row="3"
                    ItemsSource="{x:Bind ViewModel.TrackPlayingQueue, Mode=OneWay}"
                    SelectedIndex="{x:Bind ViewModel.AppSettings.MusicGallerySettings.PlayQueueIndex, Mode=TwoWay}">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <Grid Padding="0,6">
                                <Grid Tapped="PlayingQueueListVireItemGrid_Tapped">
                                    <StackPanel>
                                        <TextBlock Text="{Binding Track.Title}" TextWrapping="Wrap" />
                                        <TextBlock
                                            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                            Text="{Binding Track.Artist}"
                                            TextWrapping="Wrap" />
                                    </StackPanel>
                                </Grid>
                                <Grid HorizontalAlignment="Right">
                                    <Button
                                        Click="RemoveFromPlayingQueueButton_Click"
                                        Content="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                                              FontSize=12,
                                                              Glyph=&#xE738;}"
                                        Style="{StaticResource GhostButtonStyle}">
                                        <ToolTipService.ToolTip>
                                            <TextBlock x:Uid="MusicGalleryPageRemoveFromPlayingQueue" />
                                        </ToolTipService.ToolTip>
                                    </Button>
                                </Grid>
                            </Grid>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>

                <Grid Grid.Row="3">
                    <interactivity:Interaction.Behaviors>
                        <interactivity:DataTriggerBehavior
                            Binding="{x:Bind ViewModel.TrackPlayingQueue.Count, Mode=OneWay}"
                            ComparisonCondition="Equal"
                            Value="0">
                            <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Visible" />
                        </interactivity:DataTriggerBehavior>
                        <interactivity:DataTriggerBehavior
                            Binding="{x:Bind ViewModel.TrackPlayingQueue.Count, Mode=OneWay}"
                            ComparisonCondition="NotEqual"
                            Value="0">
                            <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Collapsed" />
                        </interactivity:DataTriggerBehavior>
                    </interactivity:Interaction.Behaviors>
                    <StackPanel
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Spacing="12">
                        <Image MaxWidth="100" Source="/Assets/EmptyBox.png" />
                        <TextBlock
                            x:Uid="MusicGalleryPagePlayingQueueEmpty"
                            HorizontalAlignment="Center"
                            Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
                    </StackPanel>
                </Grid>
            </Grid>

        </Grid>

        <Grid Background="{ThemeResource SolidBackgroundFillColorBaseBrush}" Visibility="{x:Bind ViewModel.IsDataLoading, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}">
            <Grid Margin="12">
                <Grid.RowDefinitions>
                    <RowDefinition Height="48" />
                    <RowDefinition Height="12" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="12" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="12" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <labs:Shimmer Grid.Row="0" CornerRadius="6" />
                <labs:Shimmer Grid.Row="2" CornerRadius="6" />
                <labs:Shimmer Grid.Row="4" CornerRadius="6" />
                <labs:Shimmer Grid.Row="6" CornerRadius="6" />
            </Grid>
        </Grid>

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="PlaybackOrderState">
                <VisualState x:Name="RepeatAll">
                    <VisualState.StateTriggers>
                        <ui:CompareStateTrigger
                            Comparison="Equal"
                            Value="{x:Bind ViewModel.AppSettings.MusicGallerySettings.PlaybackOrder, Mode=OneWay, Converter={StaticResource EnumToIntConverter}}"
                            To="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="PlaybackRepeatAll.Opacity" Value="1" />
                        <Setter Target="PlaybackRepeatOne.Opacity" Value="0" />
                        <Setter Target="PlaybackShuffle.Opacity" Value="0" />
                        <Setter Target="PlaybackRepeatAllHint.Visibility" Value="Visible" />
                        <Setter Target="PlaybackRepeatOneHint.Visibility" Value="Collapsed" />
                        <Setter Target="PlaybackShuffleHint.Visibility" Value="Collapsed" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="RepeatOne">
                    <VisualState.StateTriggers>
                        <ui:CompareStateTrigger
                            Comparison="Equal"
                            Value="{x:Bind ViewModel.AppSettings.MusicGallerySettings.PlaybackOrder, Mode=OneWay, Converter={StaticResource EnumToIntConverter}}"
                            To="1" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="PlaybackRepeatAll.Opacity" Value="0" />
                        <Setter Target="PlaybackRepeatOne.Opacity" Value="1" />
                        <Setter Target="PlaybackShuffle.Opacity" Value="0" />
                        <Setter Target="PlaybackRepeatAllHint.Visibility" Value="Collapsed" />
                        <Setter Target="PlaybackRepeatOneHint.Visibility" Value="Visible" />
                        <Setter Target="PlaybackShuffleHint.Visibility" Value="Collapsed" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Shuffle">
                    <VisualState.StateTriggers>
                        <ui:CompareStateTrigger
                            Comparison="Equal"
                            Value="{x:Bind ViewModel.AppSettings.MusicGallerySettings.PlaybackOrder, Mode=OneWay, Converter={StaticResource EnumToIntConverter}}"
                            To="2" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="PlaybackRepeatAll.Opacity" Value="0" />
                        <Setter Target="PlaybackRepeatOne.Opacity" Value="0" />
                        <Setter Target="PlaybackShuffle.Opacity" Value="1" />
                        <Setter Target="PlaybackRepeatAllHint.Visibility" Value="Collapsed" />
                        <Setter Target="PlaybackRepeatOneHint.Visibility" Value="Collapsed" />
                        <Setter Target="PlaybackShuffleHint.Visibility" Value="Visible" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</Page>