<commit_before>﻿<Page
    x:Class="Aurora.Music.Pages.HomePage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Aurora.Music.Pages" SizeChanged="Page_SizeChanged"
    xmlns:vm="using:Aurora.Music.ViewModels"
    xmlns:ctrls="using:Aurora.Music.Controls"
    xmlns:toolkit="using:Microsoft.Toolkit.Uwp.UI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.DataContext>
        <vm:HomePageViewModel x:Name="Context"/>
    </Page.DataContext>

    <Page.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="../Themes/Styles.xaml"/>
            </ResourceDictionary.MergedDictionaries>
            <ResourceDictionary.ThemeDictionaries>
                <ResourceDictionary x:Key="Light" Source="../Themes/Light.xaml"/>
                <ResourceDictionary x:Key="Dark" Source="../Themes/Dark.xaml"/>
            </ResourceDictionary.ThemeDictionaries>

            <AcrylicBrush x:Key="HomePageBackground" BackgroundSource="HostBackdrop" 
                          TintColor="Transparent" TintOpacity="0" 
                          FallbackColor="{StaticResource SystemChromeMediumColor}" />
            <Style x:Key="NarrowScrollViewer" TargetType="ScrollViewer">
                <Setter Property="HorizontalScrollMode" Value="Auto" />
                <Setter Property="VerticalScrollMode" Value="Auto" />
                <Setter Property="IsHorizontalRailEnabled" Value="True" />
                <Setter Property="IsVerticalRailEnabled" Value="True" />
                <Setter Property="IsTabStop" Value="False" />
                <Setter Property="ZoomMode" Value="Disabled" />
                <Setter Property="HorizontalContentAlignment" Value="Left" />
                <Setter Property="VerticalContentAlignment" Value="Top" />
                <Setter Property="VerticalScrollBarVisibility" Value="Visible" />
                <Setter Property="Padding" Value="0" />
                <Setter Property="BorderThickness" Value="0" />
                <Setter Property="BorderBrush" Value="Transparent" />
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ScrollViewer">
                            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="ScrollingIndicatorStates">
                                        <VisualStateGroup.Transitions>
                                            <VisualTransition From="MouseIndicator" To="NoIndicator">
                                                <Storyboard>
                                                    <FadeOutThemeAnimation TargetName="ScrollBarSeparator" BeginTime="0:0:3" />
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalScrollBar"
                                             Storyboard.TargetProperty="IndicatorMode">
                                                        <DiscreteObjectKeyFrame KeyTime="0:0:3">
                                                            <DiscreteObjectKeyFrame.Value>
                                                                <ScrollingIndicatorMode>None</ScrollingIndicatorMode>
                                                            </DiscreteObjectKeyFrame.Value>
                                                        </DiscreteObjectKeyFrame>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalScrollBar"
                                             Storyboard.TargetProperty="IndicatorMode">
                                                        <DiscreteObjectKeyFrame KeyTime="0:0:3">
                                                            <DiscreteObjectKeyFrame.Value>
                                                                <ScrollingIndicatorMode>None</ScrollingIndicatorMode>
                                                            </DiscreteObjectKeyFrame.Value>
                                                        </DiscreteObjectKeyFrame>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualTransition>
                                            <VisualTransition From="TouchIndicator" To="NoIndicator">
                                                <Storyboard>
                                                    <FadeOutThemeAnimation TargetName="ScrollBarSeparator" />
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalScrollBar"
                                             Storyboard.TargetProperty="IndicatorMode">
                                                        <DiscreteObjectKeyFrame KeyTime="0:0:0.5">
                                                            <DiscreteObjectKeyFrame.Value>
                                                                <ScrollingIndicatorMode>None</ScrollingIndicatorMode>
                                                            </DiscreteObjectKeyFrame.Value>
                                                        </DiscreteObjectKeyFrame>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalScrollBar"
                                             Storyboard.TargetProperty="IndicatorMode">
                                                        <DiscreteObjectKeyFrame KeyTime="0:0:0.5">
                                                            <DiscreteObjectKeyFrame.Value>
                                                                <ScrollingIndicatorMode>None</ScrollingIndicatorMode>
                                                            </DiscreteObjectKeyFrame.Value>
                                                        </DiscreteObjectKeyFrame>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualTransition>
                                        </VisualStateGroup.Transitions>

                                        <VisualState x:Name="NoIndicator">
                                            <Storyboard>
                                                <FadeOutThemeAnimation TargetName="ScrollBarSeparator" />
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="TouchIndicator">
                                            <Storyboard>
                                                <FadeOutThemeAnimation TargetName="ScrollBarSeparator" />
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalScrollBar"
                                           Storyboard.TargetProperty="IndicatorMode"
                                           Duration="0">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <ScrollingIndicatorMode>TouchIndicator</ScrollingIndicatorMode>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalScrollBar"
                                           Storyboard.TargetProperty="IndicatorMode"
                                           Duration="0">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <ScrollingIndicatorMode>TouchIndicator</ScrollingIndicatorMode>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="MouseIndicator">
                                            <Storyboard>
                                                <FadeInThemeAnimation TargetName="ScrollBarSeparator" />
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalScrollBar"
                                           Storyboard.TargetProperty="IndicatorMode"
                                           Duration="0">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <ScrollingIndicatorMode>MouseIndicator</ScrollingIndicatorMode>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalScrollBar"
                                           Storyboard.TargetProperty="IndicatorMode"
                                           Duration="0">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <ScrollingIndicatorMode>MouseIndicator</ScrollingIndicatorMode>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Grid Background="{TemplateBinding Background}">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="Auto" />
                                    </Grid.RowDefinitions>
                                    <ScrollContentPresenter x:Name="ScrollContentPresenter"
                              Grid.RowSpan="2"
                              Grid.ColumnSpan="2"
                              ContentTemplate="{TemplateBinding ContentTemplate}"
                              Margin="{TemplateBinding Padding}" />
                                    <ScrollBar x:Name="VerticalScrollBar"
                                           Margin="0,120,0,72"
                 Grid.Column="1"
                 IsTabStop="False"
                 Maximum="{TemplateBinding ScrollableHeight}"
                 Orientation="Vertical"
                 Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
                 Value="{TemplateBinding VerticalOffset}"
                 ViewportSize="{TemplateBinding ViewportHeight}"
                 HorizontalAlignment="Right" />
                                    <ScrollBar x:Name="HorizontalScrollBar"
                 IsTabStop="False"
                 Maximum="{TemplateBinding ScrollableWidth}"
                 Orientation="Horizontal"
                 Grid.Row="1"
                 Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                 Value="{TemplateBinding HorizontalOffset}"
                 ViewportSize="{TemplateBinding ViewportWidth}" />
                                    <Border x:Name="ScrollBarSeparator"
              Grid.Row="1"
              Grid.Column="1"
              Background="{ThemeResource SystemControlPageBackgroundChromeLowBrush}" />
                                </Grid>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style x:Key="HeroGridViewStyle" TargetType="GridView">
                <Setter Property="Padding" Value="0,0,0,10"/>
                <Setter Property="IsTabStop" Value="False"/>
                <Setter Property="TabNavigation" Value="Once"/>
                <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
                <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
                <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled"/>
                <Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False"/>
                <Setter Property="ScrollViewer.VerticalScrollMode" Value="Enabled"/>
                <Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="True"/>
                <Setter Property="ScrollViewer.ZoomMode" Value="Disabled"/>
                <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False"/>
                <Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True"/>
                <Setter Property="IsSwipeEnabled" Value="True"/>
                <Setter Property="UseSystemFocusVisuals" Value="True"/>
                <Setter Property="FocusVisualMargin" Value="-2"/>
                <Setter Property="ItemContainerTransitions">
                    <Setter.Value>
                        <TransitionCollection>
                            <AddDeleteThemeTransition/>
                            <ContentThemeTransition/>
                            <ReorderThemeTransition/>
                            <EntranceThemeTransition IsStaggeringEnabled="True"/>
                        </TransitionCollection>
                    </Setter.Value>
                </Setter>
                <Setter Property="ItemsPanel">
                    <Setter.Value>
                        <ItemsPanelTemplate>
                            <ItemsWrapGrid Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="GridView">
                            <Border Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" 
                                    BorderBrush="{TemplateBinding BorderBrush}">
                                <ScrollViewer x:Name="ScrollViewer" AutomationProperties.AccessibilityView="Raw" 
                                              BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" 
                                              HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" 
                                              HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" 
                                              IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" 
                                              IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}" 
                                              IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" 
                                              IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" 
                                              IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}" 
                                              TabNavigation="{TemplateBinding TabNavigation}" 
                                              VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" 
                                              VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" 
                                              ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
                                    <ItemsPresenter Footer="{TemplateBinding Footer}" FooterTransitions="{TemplateBinding FooterTransitions}" 
                                                    FooterTemplate="{TemplateBinding FooterTemplate}" Header="{TemplateBinding Header}" 
                                                    HeaderTransitions="{TemplateBinding HeaderTransitions}" 
                                                    HeaderTemplate="{TemplateBinding HeaderTemplate}" 
                                                    Padding="{TemplateBinding Padding}"/>
                                </ScrollViewer>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style TargetType="ListViewItem" x:Key="HomeListViewItemStyle">
                <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
                <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
                <Setter Property="Background" Value="{ThemeResource ListViewItemBackground}" />
                <Setter Property="Foreground" Value="{ThemeResource ListViewItemForeground}" />
                <Setter Property="TabNavigation" Value="Local" />
                <Setter Property="IsHoldingEnabled" Value="True" />
                <Setter Property="Padding" Value="0" />
                <Setter Property="Margin" Value="4,0" />
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                <Setter Property="VerticalContentAlignment" Value="Center" />
                <Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}" />
                <Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}" />
                <Setter Property="AllowDrop" Value="False" />
                <Setter Property="UseSystemFocusVisuals" Value="True" />
                <Setter Property="FocusVisualMargin" Value="0" />
                <Setter Property="FocusVisualPrimaryBrush" Value="{ThemeResource ListViewItemFocusVisualPrimaryBrush}" />
                <Setter Property="FocusVisualPrimaryThickness" Value="2" />
                <Setter Property="FocusVisualSecondaryBrush" Value="{ThemeResource ListViewItemFocusVisualSecondaryBrush}" />
                <Setter Property="FocusVisualSecondaryThickness" Value="1" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListViewItem">
                            <ListViewItemPresenter ContentTransitions="{TemplateBinding ContentTransitions}"
                        x:Name="Root" HorizontalAlignment="Stretch"
                        Control.IsTemplateFocusTarget="True"
                        FocusVisualMargin="{TemplateBinding FocusVisualMargin}"
                        FocusVisualPrimaryBrush="{TemplateBinding FocusVisualPrimaryBrush}"
                        FocusVisualPrimaryThickness="{TemplateBinding FocusVisualPrimaryThickness}"
                        FocusVisualSecondaryBrush="{TemplateBinding FocusVisualSecondaryBrush}"
                        FocusVisualSecondaryThickness="{TemplateBinding FocusVisualSecondaryThickness}"
                        SelectionCheckMarkVisualEnabled="{ThemeResource ListViewItemSelectionCheckMarkVisualEnabled}"
                        CheckBrush="{ThemeResource ListViewItemCheckBrush}"
                        CheckBoxBrush="{ThemeResource ListViewItemCheckBoxBrush}"
                        DragBackground="{ThemeResource ListViewItemDragBackground}"
                        DragForeground="{ThemeResource ListViewItemDragForeground}"
                        FocusBorderBrush="{ThemeResource ListViewItemFocusBorderBrush}"
                        FocusSecondaryBorderBrush="{ThemeResource ListViewItemFocusSecondaryBorderBrush}"
                        PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackground}"
                        PointerOverBackground="{ThemeResource ListViewItemBackgroundPointerOver}"
                        PointerOverForeground="{ThemeResource ListViewItemForegroundPointerOver}"
                        SelectedBackground="{ThemeResource ListViewItemBackgroundSelected}"
                        SelectedForeground="{ThemeResource ListViewItemForegroundSelected}"
                        SelectedPointerOverBackground="{ThemeResource ListViewItemBackgroundSelectedPointerOver}"
                        PressedBackground="{ThemeResource ListViewItemBackgroundPressed}"
                        SelectedPressedBackground="{ThemeResource ListViewItemBackgroundSelectedPressed}"
                        DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
                        DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
                        ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                        ContentMargin="{TemplateBinding Padding}"
                        CheckMode="{ThemeResource ListViewItemCheckMode}" RevealBackgroundShowsAboveContent="True"
                        RevealBackground="{ThemeResource ListViewItemRevealBackground}"
                        RevealBorderThickness="{ThemeResource ListViewItemRevealBorderThemeThickness}"
                        RevealBorderBrush="{ThemeResource ListViewItemRevealBorderBrush}">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="Selected" />
                                        <VisualState x:Name="PointerOver">
                                            <VisualState.Setters>
                                                <Setter Target="Root.(RevealBrush.State)" Value="PointerOver" />
                                            </VisualState.Setters>
                                        </VisualState>
                                        <VisualState x:Name="PointerOverSelected">
                                            <VisualState.Setters>
                                                <Setter Target="Root.(RevealBrush.State)" Value="PointerOver" />
                                            </VisualState.Setters>
                                        </VisualState>
                                        <VisualState x:Name="PointerOverPressed">
                                            <VisualState.Setters>
                                                <Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
                                            </VisualState.Setters>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <VisualState.Setters>
                                                <Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
                                            </VisualState.Setters>
                                        </VisualState>
                                        <VisualState x:Name="PressedSelected">
                                            <VisualState.Setters>
                                                <Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
                                            </VisualState.Setters>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="DisabledStates">
                                        <VisualState x:Name="Enabled" />
                                        <VisualState x:Name="Disabled">
                                            <VisualState.Setters>
                                                <Setter Target="Root.RevealBorderThickness" Value="0" />
                                            </VisualState.Setters>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                            </ListViewItemPresenter>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style TargetType="GridViewItem" x:Key="HeroGridViewItemStyle">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="GridViewItem">
                            <ListViewItemPresenter ContentTransitions="{TemplateBinding ContentTransitions}"
                        x:Name="Root" Margin="16"
                        Control.IsTemplateFocusTarget="True" Background="{x:Null}"
                        FocusVisualMargin="{TemplateBinding FocusVisualMargin}"
                        FocusVisualPrimaryBrush="{TemplateBinding FocusVisualPrimaryBrush}"
                        FocusVisualPrimaryThickness="{TemplateBinding FocusVisualPrimaryThickness}"
                        FocusVisualSecondaryBrush="{TemplateBinding FocusVisualSecondaryBrush}"
                        FocusVisualSecondaryThickness="{TemplateBinding FocusVisualSecondaryThickness}"
                        SelectionCheckMarkVisualEnabled="{ThemeResource GridViewItemSelectionCheckMarkVisualEnabled}"
                        CheckBrush="{ThemeResource GridViewItemCheckBrush}"
                        CheckBoxBrush="{ThemeResource GridViewItemCheckBoxBrush}"
                        DragBackground="{ThemeResource GridViewItemDragBackground}"
                        DragForeground="{ThemeResource GridViewItemDragForeground}"
                        FocusBorderBrush="{ThemeResource GridViewItemFocusBorderBrush}"
                        FocusSecondaryBorderBrush="{ThemeResource GridViewItemFocusSecondaryBorderBrush}"
                        PlaceholderBackground="{x:Null}"
                        PointerOverBackground="{x:Null}"
                        PointerOverForeground="{ThemeResource GridViewItemForegroundPointerOver}"
                        SelectedBackground="{x:Null}"
                        SelectedForeground="{ThemeResource GridViewItemForegroundSelected}"
                        SelectedPointerOverBackground="{ThemeResource GridViewItemBackgroundSelectedPointerOver}"
                        PressedBackground="{x:Null}"
                        SelectedPressedBackground="{ThemeResource GridViewItemBackgroundSelectedPressed}"
                        DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
                        DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
                        ReorderHintOffset="{ThemeResource GridViewItemReorderHintThemeOffset}"
                        HorizontalContentAlignment="Center"
                        VerticalContentAlignment="Center"
                        ContentMargin="{TemplateBinding Padding}"
                        CheckMode="{ThemeResource GridViewItemCheckMode}"
                        RevealBackgroundShowsAboveContent="True">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="Selected" />

                                        <VisualState x:Name="PointerOver">
                                            <VisualState.Setters>
                                                <Setter Target="Root.(RevealBrush.State)" Value="PointerOver" />
                                            </VisualState.Setters>
                                        </VisualState>

                                        <VisualState x:Name="PointerOverSelected">
                                            <VisualState.Setters>
                                                <Setter Target="Root.(RevealBrush.State)" Value="PointerOver" />
                                            </VisualState.Setters>
                                        </VisualState>
                                        <VisualState x:Name="PointerOverPressed">
                                            <VisualState.Setters>
                                                <Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
                                            </VisualState.Setters>
                                        </VisualState>

                                        <VisualState x:Name="Pressed">
                                            <VisualState.Setters>
                                                <Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
                                            </VisualState.Setters>
                                        </VisualState>

                                        <VisualState x:Name="PressedSelected">
                                            <VisualState.Setters>
                                                <Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
                                            </VisualState.Setters>
                                        </VisualState>
                                    </VisualStateGroup>

                                    <VisualStateGroup x:Name="DisabledStates">
                                        <VisualState x:Name="Enabled" />

                                        <VisualState x:Name="Disabled">
                                            <VisualState.Setters>
                                                <Setter Target="Root.RevealBorderThickness" Value="0" />
                                            </VisualState.Setters>
                                        </VisualState>
                                    </VisualStateGroup>

                                </VisualStateManager.VisualStateGroups>
                            </ListViewItemPresenter>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ResourceDictionary>
    </Page.Resources>

    <Grid x:Name="Main" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="{ThemeResource HomePageBackground}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid Grid.RowSpan="2" x:Name="LayerGradient" Opacity="0.5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <Grid.Background>
                <LinearGradientBrush EndPoint="0,0" StartPoint="1,0">
                    <GradientStop Color="{x:Bind Context.LeftGradient, Mode=OneWay}"/>
                    <GradientStop Color="{x:Bind Context.RightGradient, Mode=OneWay}" Offset="1"/>
                </LinearGradientBrush>
            </Grid.Background>
        </Grid>
        <Grid Grid.RowSpan="2" x:Name="LayerMask" Opacity="1" 
              HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
              Background="{ThemeResource HomePageGradient}"/>
        <ScrollViewer IsHorizontalScrollChainingEnabled="False" IsHorizontalRailEnabled="False" 
                      HorizontalScrollMode="Auto" HorizontalScrollBarVisibility="Hidden" x:Name="MainScroller"
                      HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{ThemeResource NarrowScrollViewer}"
                      VerticalScrollMode="Auto" VerticalScrollBarVisibility="Auto" IsVerticalRailEnabled="True" 
                      IsVerticalScrollChainingEnabled="True">
            <StackPanel Margin="0,144,0,160" Orientation="Vertical" x:Name="ContentPanel"
                        HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <GridView SelectionMode="None" IsItemClickEnabled="True" ItemsSource="{x:Bind Context.HeroList}"
                          ItemContainerStyle="{ThemeResource HeroGridViewItemStyle}"
                          HorizontalAlignment="Center" VerticalAlignment="Stretch" Padding="64"
                          Margin="0" Style="{ThemeResource HeroGridViewStyle}" x:Name="HeroGrid">
                    <GridView.ItemTemplate>
                        <DataTemplate x:DataType="vm:GenericMusicItemViewModel">
                            <Grid Background="{x:Null}" PointerEntered="Grid_PointerEntered" PointerExited="Grid_PointerExited" 
                                  PointerPressed="Grid_PointerPressed" PointerReleased="Grid_PointerReleased" PointerCanceled="Grid_PointerExited"
                                  PointerCaptureLost="Grid_PointerExited"
                                  Height="144" Width="144">
                                <Grid.Resources>
                                    <Storyboard x:Key="PointerOver">
                                        <DoubleAnimation Storyboard.TargetName="Title" Storyboard.TargetProperty="Opacity"
                                                         EnableDependentAnimation="True" To="0" Duration="0:0:0.48">
                                            <DoubleAnimation.EasingFunction>
                                                <QuinticEase/>
                                            </DoubleAnimation.EasingFunction>
                                        </DoubleAnimation>
                                        <DoubleAnimation Storyboard.TargetName="Icon" Storyboard.TargetProperty="Opacity"
                                                         EnableDependentAnimation="True" To="1" Duration="0:0:0.48">
                                            <DoubleAnimation.EasingFunction>
                                                <QuinticEase/>
                                            </DoubleAnimation.EasingFunction>
                                        </DoubleAnimation>
                                        <DoubleAnimation Storyboard.TargetName="Shadow" Storyboard.TargetProperty="BlurRadius"
                                                         EnableDependentAnimation="True" To="32" Duration="0:0:0.48">
                                            <DoubleAnimation.EasingFunction>
                                                <QuinticEase/>
                                            </DoubleAnimation.EasingFunction>
                                        </DoubleAnimation>
                                    </Storyboard>

                                    <Storyboard x:Key="Pressed">
                                        <DoubleAnimation Storyboard.TargetName="Shadow" Storyboard.TargetProperty="BlurRadius"
                                                         EnableDependentAnimation="True" To="-4" Duration="0:0:0.48">
                                            <DoubleAnimation.EasingFunction>
                                                <QuinticEase/>
                                            </DoubleAnimation.EasingFunction>
                                        </DoubleAnimation>
                                    </Storyboard>
                                    <Storyboard x:Key="Normal">
                                        <DoubleAnimation Storyboard.TargetName="Title" Storyboard.TargetProperty="Opacity"
                                                         EnableDependentAnimation="True" To="1" Duration="0:0:0.48">
                                            <DoubleAnimation.EasingFunction>
                                                <QuinticEase/>
                                            </DoubleAnimation.EasingFunction>
                                        </DoubleAnimation>
                                        <DoubleAnimation Storyboard.TargetName="Icon" Storyboard.TargetProperty="Opacity"
                                                         EnableDependentAnimation="True" To="0" Duration="0:0:0.48">
                                            <DoubleAnimation.EasingFunction>
                                                <QuinticEase/>
                                            </DoubleAnimation.EasingFunction>
                                        </DoubleAnimation>
                                        <DoubleAnimation Storyboard.TargetName="Shadow" Storyboard.TargetProperty="BlurRadius"
                                                         EnableDependentAnimation="True" To="16" Duration="0:0:0.48">
                                            <DoubleAnimation.EasingFunction>
                                                <QuinticEase/>
                                            </DoubleAnimation.EasingFunction>
                                        </DoubleAnimation>
                                    </Storyboard>
                                </Grid.Resources>
                                <Rectangle Height="100" Width="100" RenderTransformOrigin="0.5,0" HorizontalAlignment="Center" VerticalAlignment="Top" Fill="#000">
                                    <Rectangle.RenderTransform>
                                        <CompositeTransform TranslateY="-14"/>
                                    </Rectangle.RenderTransform>
                                </Rectangle>
                                <Rectangle Height="112" Width="112" RenderTransformOrigin="0.5,0" HorizontalAlignment="Center" VerticalAlignment="Top" Fill="#111">
                                    <Rectangle.RenderTransform>
                                        <CompositeTransform TranslateY="-12"/>
                                    </Rectangle.RenderTransform>
                                </Rectangle>
                                <Rectangle Height="128" Width="128" RenderTransformOrigin="0.5,0" HorizontalAlignment="Center" VerticalAlignment="Top" Fill="#222">
                                    <Rectangle.RenderTransform>
                                        <CompositeTransform TranslateY="-8"/>
                                    </Rectangle.RenderTransform>
                                </Rectangle>
                                <toolkit:DropShadowPanel x:Name="Shadow"
                                    OffsetX="0" OffsetY="0" BlurRadius="16" ShadowOpacity="0.5" Color="{ThemeResource SystemBaseHighColor}">
                                    <Rectangle Height="144" Width="144">
                                        <Rectangle.Fill>
                                            <ImageBrush AlignmentX="Center" AlignmentY="Center" Stretch="UniformToFill">
                                                <ImageBrush.ImageSource>
                                                    <BitmapImage UriSource="{x:Bind Artwork, TargetNullValue=ms-appx:///Assets/Images/placeholder_b.png}"/>
                                                </ImageBrush.ImageSource>
                                            </ImageBrush>
                                        </Rectangle.Fill>
                                    </Rectangle>
                                </toolkit:DropShadowPanel>
                                <Rectangle Height="144" Width="144" Fill="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}">
                                </Rectangle>
                                <TextBlock x:Name="Title" Text="{x:Bind Title}" Style="{ThemeResource SubtitleTextBlockStyle}"
                                           Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"
                                           HorizontalAlignment="Center" VerticalAlignment="Center" TextAlignment="Center"
                                           Margin="12" MaxLines="2" TextWrapping="WrapWholeWords" 
                                               TextTrimming="CharacterEllipsis"/>
                                <FontIcon x:Name="Icon" FontFamily="Segoe MDL2 Assets" Opacity="0"
                                           Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"
                                          Glyph="&#xE102;" FontSize="32"
                                          HorizontalAlignment="Center" VerticalAlignment="Center" />
                            </Grid>
                        </DataTemplate>
                    </GridView.ItemTemplate>
                </GridView>
                <TextBlock Margin="60,16,16,8" Text="Your Favorite" 
                       Style="{ThemeResource TitleTextBlockStyle}" FontWeight="Bold"/>
                <ListView Margin="0,8" IsSynchronizedWithCurrentItem="False" IsItemClickEnabled="True" ItemClick="FavList_ItemClick"
                          ScrollViewer.IsHorizontalScrollChainingEnabled="True" ScrollViewer.IsHorizontalRailEnabled="True"
                      SelectionMode="None" ItemsSource="{x:Bind Context.FavList}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                      ItemContainerStyle="{ThemeResource HomeListViewItemStyle}" 
                      Style="{StaticResource HorizontalListView}" x:Name="FavList">
                    <ListView.Header>
                        <Grid VerticalAlignment="Stretch" Padding="32,0">
                            <TextBlock Visibility="{x:Bind Context.CollapseIfNotZero(Context.FavList.Count),Mode=OneWay,FallbackValue=Collapsed}" Text="No enough statistics" Style="{ThemeResource SubtitleTextBlockStyle}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Grid>
                    </ListView.Header>
                    <ListView.ItemTemplate>
                        <DataTemplate x:DataType="vm:GenericMusicItemViewModel">
                            <StackPanel Width="150" Background="{ThemeResource SystemControlBackgroundAltLowRevealBrush}" 
                                        Orientation="Vertical">
                                <toolkit:ImageEx x:Name="Artwork" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                                                 PlaceholderSource="/Assets/Images/placeholder_b.png"
                                                 Style="{ThemeResource QuickLoadImageEx}" Width="150" Height="150" 
                                                 Stretch="UniformToFill" PlaceholderStretch="UniformToFill">
                                    <toolkit:ImageEx.Source><commit_msg>update ui<commit_after>﻿<Page
    x:Class="Aurora.Music.Pages.HomePage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Aurora.Music.Pages" SizeChanged="Page_SizeChanged"
    xmlns:vm="using:Aurora.Music.ViewModels"
    xmlns:ctrls="using:Aurora.Music.Controls"
    xmlns:toolkit="using:Microsoft.Toolkit.Uwp.UI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.DataContext>
        <vm:HomePageViewModel x:Name="Context"/>
    </Page.DataContext>

    <Page.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="../Themes/Styles.xaml"/>
            </ResourceDictionary.MergedDictionaries>
            <ResourceDictionary.ThemeDictionaries>
                <ResourceDictionary x:Key="Light" Source="../Themes/Light.xaml"/>
                <ResourceDictionary x:Key="Dark" Source="../Themes/Dark.xaml"/>
            </ResourceDictionary.ThemeDictionaries>

            <AcrylicBrush x:Key="HomePageBackground" BackgroundSource="HostBackdrop" 
                          TintColor="Transparent" TintOpacity="0" 
                          FallbackColor="{StaticResource SystemChromeMediumColor}" />
            <Style x:Key="NarrowScrollViewer" TargetType="ScrollViewer">
                <Setter Property="HorizontalScrollMode" Value="Auto" />
                <Setter Property="VerticalScrollMode" Value="Auto" />
                <Setter Property="IsHorizontalRailEnabled" Value="True" />
                <Setter Property="IsVerticalRailEnabled" Value="True" />
                <Setter Property="IsTabStop" Value="False" />
                <Setter Property="ZoomMode" Value="Disabled" />
                <Setter Property="HorizontalContentAlignment" Value="Left" />
                <Setter Property="VerticalContentAlignment" Value="Top" />
                <Setter Property="VerticalScrollBarVisibility" Value="Visible" />
                <Setter Property="Padding" Value="0" />
                <Setter Property="BorderThickness" Value="0" />
                <Setter Property="BorderBrush" Value="Transparent" />
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ScrollViewer">
                            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="ScrollingIndicatorStates">
                                        <VisualStateGroup.Transitions>
                                            <VisualTransition From="MouseIndicator" To="NoIndicator">
                                                <Storyboard>
                                                    <FadeOutThemeAnimation TargetName="ScrollBarSeparator" BeginTime="0:0:3" />
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalScrollBar"
                                             Storyboard.TargetProperty="IndicatorMode">
                                                        <DiscreteObjectKeyFrame KeyTime="0:0:3">
                                                            <DiscreteObjectKeyFrame.Value>
                                                                <ScrollingIndicatorMode>None</ScrollingIndicatorMode>
                                                            </DiscreteObjectKeyFrame.Value>
                                                        </DiscreteObjectKeyFrame>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalScrollBar"
                                             Storyboard.TargetProperty="IndicatorMode">
                                                        <DiscreteObjectKeyFrame KeyTime="0:0:3">
                                                            <DiscreteObjectKeyFrame.Value>
                                                                <ScrollingIndicatorMode>None</ScrollingIndicatorMode>
                                                            </DiscreteObjectKeyFrame.Value>
                                                        </DiscreteObjectKeyFrame>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualTransition>
                                            <VisualTransition From="TouchIndicator" To="NoIndicator">
                                                <Storyboard>
                                                    <FadeOutThemeAnimation TargetName="ScrollBarSeparator" />
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalScrollBar"
                                             Storyboard.TargetProperty="IndicatorMode">
                                                        <DiscreteObjectKeyFrame KeyTime="0:0:0.5">
                                                            <DiscreteObjectKeyFrame.Value>
                                                                <ScrollingIndicatorMode>None</ScrollingIndicatorMode>
                                                            </DiscreteObjectKeyFrame.Value>
                                                        </DiscreteObjectKeyFrame>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalScrollBar"
                                             Storyboard.TargetProperty="IndicatorMode">
                                                        <DiscreteObjectKeyFrame KeyTime="0:0:0.5">
                                                            <DiscreteObjectKeyFrame.Value>
                                                                <ScrollingIndicatorMode>None</ScrollingIndicatorMode>
                                                            </DiscreteObjectKeyFrame.Value>
                                                        </DiscreteObjectKeyFrame>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualTransition>
                                        </VisualStateGroup.Transitions>

                                        <VisualState x:Name="NoIndicator">
                                            <Storyboard>
                                                <FadeOutThemeAnimation TargetName="ScrollBarSeparator" />
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="TouchIndicator">
                                            <Storyboard>
                                                <FadeOutThemeAnimation TargetName="ScrollBarSeparator" />
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalScrollBar"
                                           Storyboard.TargetProperty="IndicatorMode"
                                           Duration="0">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <ScrollingIndicatorMode>TouchIndicator</ScrollingIndicatorMode>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalScrollBar"
                                           Storyboard.TargetProperty="IndicatorMode"
                                           Duration="0">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <ScrollingIndicatorMode>TouchIndicator</ScrollingIndicatorMode>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="MouseIndicator">
                                            <Storyboard>
                                                <FadeInThemeAnimation TargetName="ScrollBarSeparator" />
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalScrollBar"
                                           Storyboard.TargetProperty="IndicatorMode"
                                           Duration="0">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <ScrollingIndicatorMode>MouseIndicator</ScrollingIndicatorMode>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalScrollBar"
                                           Storyboard.TargetProperty="IndicatorMode"
                                           Duration="0">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <ScrollingIndicatorMode>MouseIndicator</ScrollingIndicatorMode>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Grid Background="{TemplateBinding Background}">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="Auto" />
                                    </Grid.RowDefinitions>
                                    <ScrollContentPresenter x:Name="ScrollContentPresenter"
                              Grid.RowSpan="2"
                              Grid.ColumnSpan="2"
                              ContentTemplate="{TemplateBinding ContentTemplate}"
                              Margin="{TemplateBinding Padding}" />
                                    <ScrollBar x:Name="VerticalScrollBar"
                                           Margin="0,120,0,72"
                 Grid.Column="1"
                 IsTabStop="False"
                 Maximum="{TemplateBinding ScrollableHeight}"
                 Orientation="Vertical"
                 Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
                 Value="{TemplateBinding VerticalOffset}"
                 ViewportSize="{TemplateBinding ViewportHeight}"
                 HorizontalAlignment="Right" />
                                    <ScrollBar x:Name="HorizontalScrollBar"
                 IsTabStop="False"
                 Maximum="{TemplateBinding ScrollableWidth}"
                 Orientation="Horizontal"
                 Grid.Row="1"
                 Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                 Value="{TemplateBinding HorizontalOffset}"
                 ViewportSize="{TemplateBinding ViewportWidth}" />
                                    <Border x:Name="ScrollBarSeparator"
              Grid.Row="1"
              Grid.Column="1"
              Background="{ThemeResource SystemControlPageBackgroundChromeLowBrush}" />
                                </Grid>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style x:Key="HeroGridViewStyle" TargetType="GridView">
                <Setter Property="Padding" Value="0,0,0,10"/>
                <Setter Property="IsTabStop" Value="False"/>
                <Setter Property="TabNavigation" Value="Once"/>
                <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
                <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
                <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled"/>
                <Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False"/>
                <Setter Property="ScrollViewer.VerticalScrollMode" Value="Enabled"/>
                <Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="True"/>
                <Setter Property="ScrollViewer.ZoomMode" Value="Disabled"/>
                <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False"/>
                <Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True"/>
                <Setter Property="IsSwipeEnabled" Value="True"/>
                <Setter Property="UseSystemFocusVisuals" Value="True"/>
                <Setter Property="FocusVisualMargin" Value="-2"/>
                <Setter Property="ItemContainerTransitions">
                    <Setter.Value>
                        <TransitionCollection>
                            <AddDeleteThemeTransition/>
                            <ContentThemeTransition/>
                            <ReorderThemeTransition/>
                            <EntranceThemeTransition IsStaggeringEnabled="True"/>
                        </TransitionCollection>
                    </Setter.Value>
                </Setter>
                <Setter Property="ItemsPanel">
                    <Setter.Value>
                        <ItemsPanelTemplate>
                            <ItemsWrapGrid Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="GridView">
                            <Border Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" 
                                    BorderBrush="{TemplateBinding BorderBrush}">
                                <ScrollViewer x:Name="ScrollViewer" AutomationProperties.AccessibilityView="Raw" 
                                              BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" 
                                              HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" 
                                              HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" 
                                              IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" 
                                              IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}" 
                                              IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" 
                                              IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" 
                                              IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}" 
                                              TabNavigation="{TemplateBinding TabNavigation}" 
                                              VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" 
                                              VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" 
                                              ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
                                    <ItemsPresenter Footer="{TemplateBinding Footer}" FooterTransitions="{TemplateBinding FooterTransitions}" 
                                                    FooterTemplate="{TemplateBinding FooterTemplate}" Header="{TemplateBinding Header}" 
                                                    HeaderTransitions="{TemplateBinding HeaderTransitions}" 
                                                    HeaderTemplate="{TemplateBinding HeaderTemplate}" 
                                                    Padding="{TemplateBinding Padding}"/>
                                </ScrollViewer>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style TargetType="ListViewItem" x:Key="HomeListViewItemStyle">
                <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
                <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
                <Setter Property="Background" Value="{ThemeResource ListViewItemBackground}" />
                <Setter Property="Foreground" Value="{ThemeResource ListViewItemForeground}" />
                <Setter Property="TabNavigation" Value="Local" />
                <Setter Property="IsHoldingEnabled" Value="True" />
                <Setter Property="Padding" Value="0" />
                <Setter Property="Margin" Value="4,0" />
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                <Setter Property="VerticalContentAlignment" Value="Center" />
                <Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}" />
                <Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}" />
                <Setter Property="AllowDrop" Value="False" />
                <Setter Property="UseSystemFocusVisuals" Value="True" />
                <Setter Property="FocusVisualMargin" Value="0" />
                <Setter Property="FocusVisualPrimaryBrush" Value="{ThemeResource ListViewItemFocusVisualPrimaryBrush}" />
                <Setter Property="FocusVisualPrimaryThickness" Value="2" />
                <Setter Property="FocusVisualSecondaryBrush" Value="{ThemeResource ListViewItemFocusVisualSecondaryBrush}" />
                <Setter Property="FocusVisualSecondaryThickness" Value="1" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListViewItem">
                            <ListViewItemPresenter ContentTransitions="{TemplateBinding ContentTransitions}"
                        x:Name="Root" HorizontalAlignment="Stretch"
                        Control.IsTemplateFocusTarget="True"
                        FocusVisualMargin="{TemplateBinding FocusVisualMargin}"
                        FocusVisualPrimaryBrush="{TemplateBinding FocusVisualPrimaryBrush}"
                        FocusVisualPrimaryThickness="{TemplateBinding FocusVisualPrimaryThickness}"
                        FocusVisualSecondaryBrush="{TemplateBinding FocusVisualSecondaryBrush}"
                        FocusVisualSecondaryThickness="{TemplateBinding FocusVisualSecondaryThickness}"
                        SelectionCheckMarkVisualEnabled="{ThemeResource ListViewItemSelectionCheckMarkVisualEnabled}"
                        CheckBrush="{ThemeResource ListViewItemCheckBrush}"
                        CheckBoxBrush="{ThemeResource ListViewItemCheckBoxBrush}"
                        DragBackground="{ThemeResource ListViewItemDragBackground}"
                        DragForeground="{ThemeResource ListViewItemDragForeground}"
                        FocusBorderBrush="{ThemeResource ListViewItemFocusBorderBrush}"
                        FocusSecondaryBorderBrush="{ThemeResource ListViewItemFocusSecondaryBorderBrush}"
                        PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackground}"
                        PointerOverBackground="{ThemeResource ListViewItemBackgroundPointerOver}"
                        PointerOverForeground="{ThemeResource ListViewItemForegroundPointerOver}"
                        SelectedBackground="{ThemeResource ListViewItemBackgroundSelected}"
                        SelectedForeground="{ThemeResource ListViewItemForegroundSelected}"
                        SelectedPointerOverBackground="{ThemeResource ListViewItemBackgroundSelectedPointerOver}"
                        PressedBackground="{ThemeResource ListViewItemBackgroundPressed}"
                        SelectedPressedBackground="{ThemeResource ListViewItemBackgroundSelectedPressed}"
                        DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
                        DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
                        ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                        ContentMargin="{TemplateBinding Padding}"
                        CheckMode="{ThemeResource ListViewItemCheckMode}" RevealBackgroundShowsAboveContent="True"
                        RevealBackground="{ThemeResource ListViewItemRevealBackground}"
                        RevealBorderThickness="{ThemeResource ListViewItemRevealBorderThemeThickness}"
                        RevealBorderBrush="{ThemeResource ListViewItemRevealBorderBrush}">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="Selected" />
                                        <VisualState x:Name="PointerOver">
                                            <VisualState.Setters>
                                                <Setter Target="Root.(RevealBrush.State)" Value="PointerOver" />
                                            </VisualState.Setters>
                                        </VisualState>
                                        <VisualState x:Name="PointerOverSelected">
                                            <VisualState.Setters>
                                                <Setter Target="Root.(RevealBrush.State)" Value="PointerOver" />
                                            </VisualState.Setters>
                                        </VisualState>
                                        <VisualState x:Name="PointerOverPressed">
                                            <VisualState.Setters>
                                                <Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
                                            </VisualState.Setters>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <VisualState.Setters>
                                                <Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
                                            </VisualState.Setters>
                                        </VisualState>
                                        <VisualState x:Name="PressedSelected">
                                            <VisualState.Setters>
                                                <Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
                                            </VisualState.Setters>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="DisabledStates">
                                        <VisualState x:Name="Enabled" />
                                        <VisualState x:Name="Disabled">
                                            <VisualState.Setters>
                                                <Setter Target="Root.RevealBorderThickness" Value="0" />
                                            </VisualState.Setters>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                            </ListViewItemPresenter>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style TargetType="GridViewItem" x:Key="HeroGridViewItemStyle">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="GridViewItem">
                            <ListViewItemPresenter ContentTransitions="{TemplateBinding ContentTransitions}"
                        x:Name="Root" Margin="24,12"
                        Control.IsTemplateFocusTarget="True" Background="{x:Null}"
                        FocusVisualMargin="{TemplateBinding FocusVisualMargin}"
                        FocusVisualPrimaryBrush="{TemplateBinding FocusVisualPrimaryBrush}"
                        FocusVisualPrimaryThickness="{TemplateBinding FocusVisualPrimaryThickness}"
                        FocusVisualSecondaryBrush="{TemplateBinding FocusVisualSecondaryBrush}"
                        FocusVisualSecondaryThickness="{TemplateBinding FocusVisualSecondaryThickness}"
                        SelectionCheckMarkVisualEnabled="{ThemeResource GridViewItemSelectionCheckMarkVisualEnabled}"
                        CheckBrush="{ThemeResource GridViewItemCheckBrush}"
                        CheckBoxBrush="{ThemeResource GridViewItemCheckBoxBrush}"
                        DragBackground="{ThemeResource GridViewItemDragBackground}"
                        DragForeground="{ThemeResource GridViewItemDragForeground}"
                        FocusBorderBrush="{ThemeResource GridViewItemFocusBorderBrush}"
                        FocusSecondaryBorderBrush="{ThemeResource GridViewItemFocusSecondaryBorderBrush}"
                        PlaceholderBackground="{x:Null}"
                        PointerOverBackground="{x:Null}"
                        PointerOverForeground="{ThemeResource GridViewItemForegroundPointerOver}"
                        SelectedBackground="{x:Null}"
                        SelectedForeground="{ThemeResource GridViewItemForegroundSelected}"
                        SelectedPointerOverBackground="{ThemeResource GridViewItemBackgroundSelectedPointerOver}"
                        PressedBackground="{x:Null}"
                        SelectedPressedBackground="{ThemeResource GridViewItemBackgroundSelectedPressed}"
                        DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
                        DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
                        ReorderHintOffset="{ThemeResource GridViewItemReorderHintThemeOffset}"
                        HorizontalContentAlignment="Center"
                        VerticalContentAlignment="Center"
                        ContentMargin="{TemplateBinding Padding}"
                        CheckMode="{ThemeResource GridViewItemCheckMode}"
                        RevealBackgroundShowsAboveContent="True">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="Selected" />

                                        <VisualState x:Name="PointerOver">
                                            <VisualState.Setters>
                                                <Setter Target="Root.(RevealBrush.State)" Value="PointerOver" />
                                            </VisualState.Setters>
                                        </VisualState>

                                        <VisualState x:Name="PointerOverSelected">
                                            <VisualState.Setters>
                                                <Setter Target="Root.(RevealBrush.State)" Value="PointerOver" />
                                            </VisualState.Setters>
                                        </VisualState>
                                        <VisualState x:Name="PointerOverPressed">
                                            <VisualState.Setters>
                                                <Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
                                            </VisualState.Setters>
                                        </VisualState>

                                        <VisualState x:Name="Pressed">
                                            <VisualState.Setters>
                                                <Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
                                            </VisualState.Setters>
                                        </VisualState>

                                        <VisualState x:Name="PressedSelected">
                                            <VisualState.Setters>
                                                <Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
                                            </VisualState.Setters>
                                        </VisualState>
                                    </VisualStateGroup>

                                    <VisualStateGroup x:Name="DisabledStates">
                                        <VisualState x:Name="Enabled" />

                                        <VisualState x:Name="Disabled">
                                            <VisualState.Setters>
                                                <Setter Target="Root.RevealBorderThickness" Value="0" />
                                            </VisualState.Setters>
                                        </VisualState>
                                    </VisualStateGroup>

                                </VisualStateManager.VisualStateGroups>
                            </ListViewItemPresenter>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ResourceDictionary>
    </Page.Resources>

    <Grid x:Name="Main" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="{ThemeResource HomePageBackground}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid Grid.RowSpan="2" x:Name="LayerGradient" Opacity="0.5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <Grid.Background>
                <LinearGradientBrush EndPoint="0,0" StartPoint="1,0">
                    <GradientStop Color="{x:Bind Context.LeftGradient, Mode=OneWay}"/>
                    <GradientStop Color="{x:Bind Context.RightGradient, Mode=OneWay}" Offset="1"/>
                </LinearGradientBrush>
            </Grid.Background>
        </Grid>
        <Grid Grid.RowSpan="2" x:Name="LayerMask" Opacity="1" 
              HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
              Background="{ThemeResource HomePageGradient}"/>
        <ScrollViewer IsHorizontalScrollChainingEnabled="False" IsHorizontalRailEnabled="False" 
                      HorizontalScrollMode="Auto" HorizontalScrollBarVisibility="Hidden" x:Name="MainScroller"
                      HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{ThemeResource NarrowScrollViewer}"
                      VerticalScrollMode="Auto" VerticalScrollBarVisibility="Auto" IsVerticalRailEnabled="True" 
                      IsVerticalScrollChainingEnabled="True">
            <StackPanel Margin="0,144,0,160" Orientation="Vertical" x:Name="ContentPanel"
                        HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <GridView SelectionMode="None" IsItemClickEnabled="True" ItemsSource="{x:Bind Context.HeroList}"
                          ItemContainerStyle="{ThemeResource HeroGridViewItemStyle}"
                          HorizontalAlignment="Center" VerticalAlignment="Stretch" Padding="64"
                          Margin="0" Style="{ThemeResource HeroGridViewStyle}" x:Name="HeroGrid">
                    <GridView.ItemTemplate>
                        <DataTemplate x:DataType="vm:GenericMusicItemViewModel">
                            <Grid Background="{x:Null}" PointerEntered="Grid_PointerEntered" PointerExited="Grid_PointerExited" 
                                  PointerPressed="Grid_PointerPressed" PointerReleased="Grid_PointerReleased" PointerCanceled="Grid_PointerExited"
                                  PointerCaptureLost="Grid_PointerExited"
                                  Height="160" Width="160">
                                <Grid.Resources>
                                    <Storyboard x:Key="PointerOver">
                                        <DoubleAnimation Storyboard.TargetName="Title" Storyboard.TargetProperty="Opacity"
                                                         EnableDependentAnimation="True" To="0" Duration="0:0:0.48">
                                            <DoubleAnimation.EasingFunction>
                                                <QuinticEase/>
                                            </DoubleAnimation.EasingFunction>
                                        </DoubleAnimation>
                                        <DoubleAnimation Storyboard.TargetName="Icon" Storyboard.TargetProperty="Opacity"
                                                         EnableDependentAnimation="True" To="1" Duration="0:0:0.48">
                                            <DoubleAnimation.EasingFunction>
                                                <QuinticEase/>
                                            </DoubleAnimation.EasingFunction>
                                        </DoubleAnimation>
                                        <DoubleAnimation Storyboard.TargetName="Shadow" Storyboard.TargetProperty="BlurRadius"
                                                         EnableDependentAnimation="True" To="32" Duration="0:0:0.48">
                                            <DoubleAnimation.EasingFunction>
                                                <QuinticEase/>
                                            </DoubleAnimation.EasingFunction>
                                        </DoubleAnimation>
                                    </Storyboard>

                                    <Storyboard x:Key="Pressed">
                                        <DoubleAnimation Storyboard.TargetName="Shadow" Storyboard.TargetProperty="BlurRadius"
                                                         EnableDependentAnimation="True" To="-4" Duration="0:0:0.48">
                                            <DoubleAnimation.EasingFunction>
                                                <QuinticEase/>
                                            </DoubleAnimation.EasingFunction>
                                        </DoubleAnimation>
                                    </Storyboard>
                                    <Storyboard x:Key="Normal">
                                        <DoubleAnimation Storyboard.TargetName="Title" Storyboard.TargetProperty="Opacity"
                                                         EnableDependentAnimation="True" To="1" Duration="0:0:0.48">
                                            <DoubleAnimation.EasingFunction>
                                                <QuinticEase/>
                                            </DoubleAnimation.EasingFunction>
                                        </DoubleAnimation>
                                        <DoubleAnimation Storyboard.TargetName="Icon" Storyboard.TargetProperty="Opacity"
                                                         EnableDependentAnimation="True" To="0" Duration="0:0:0.48">
                                            <DoubleAnimation.EasingFunction>
                                                <QuinticEase/>
                                            </DoubleAnimation.EasingFunction>
                                        </DoubleAnimation>
                                        <DoubleAnimation Storyboard.TargetName="Shadow" Storyboard.TargetProperty="BlurRadius"
                                                         EnableDependentAnimation="True" To="16" Duration="0:0:0.48">
                                            <DoubleAnimation.EasingFunction>
                                                <QuinticEase/>
                                            </DoubleAnimation.EasingFunction>
                                        </DoubleAnimation>
                                    </Storyboard>
                                </Grid.Resources>
                                <Rectangle Height="112" Width="112" RenderTransformOrigin="0.5,0" HorizontalAlignment="Center" VerticalAlignment="Top" Fill="#000">
                                    <Rectangle.RenderTransform>
                                        <CompositeTransform TranslateY="-14"/>
                                    </Rectangle.RenderTransform>
                                </Rectangle>
                                <Rectangle Height="128" Width="128" RenderTransformOrigin="0.5,0" HorizontalAlignment="Center" VerticalAlignment="Top" Fill="#111">
                                    <Rectangle.RenderTransform>
                                        <CompositeTransform TranslateY="-12"/>
                                    </Rectangle.RenderTransform>
                                </Rectangle>
                                <Rectangle Height="144" Width="144" RenderTransformOrigin="0.5,0" HorizontalAlignment="Center" VerticalAlignment="Top" Fill="#222">
                                    <Rectangle.RenderTransform>
                                        <CompositeTransform TranslateY="-8"/>
                                    </Rectangle.RenderTransform>
                                </Rectangle>
                                <toolkit:DropShadowPanel x:Name="Shadow"
                                    OffsetX="0" OffsetY="0" BlurRadius="16" ShadowOpacity="0.5" Color="{ThemeResource SystemBaseHighColor}">
                                    <Rectangle Height="160" Width="160">
                                        <Rectangle.Fill>
                                            <ImageBrush AlignmentX="Center" AlignmentY="Center" Stretch="UniformToFill">
                                                <ImageBrush.ImageSource>
                                                    <BitmapImage UriSource="{x:Bind Artwork, TargetNullValue=ms-appx:///Assets/Images/placeholder_b.png}"/>
                                                </ImageBrush.ImageSource>
                                            </ImageBrush>
                                        </Rectangle.Fill>
                                    </Rectangle>
                                </toolkit:DropShadowPanel>
                                <Rectangle Height="160" Width="160" Fill="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}">
                                </Rectangle>
                                <TextBlock x:Name="Title" Text="{x:Bind Title}" Style="{ThemeResource SubtitleTextBlockStyle}"
                                           Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"
                                           HorizontalAlignment="Center" VerticalAlignment="Center" TextAlignment="Center"
                                           Margin="12" MaxLines="2" TextWrapping="WrapWholeWords" 
                                               TextTrimming="CharacterEllipsis"/>
                                <FontIcon x:Name="Icon" FontFamily="Segoe MDL2 Assets" Opacity="0"
                                           Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"
                                          Glyph="&#xE102;" FontSize="32"
                                          HorizontalAlignment="Center" VerticalAlignment="Center" />
                            </Grid>
                        </DataTemplate>
                    </GridView.ItemTemplate>
                </GridView>
                <TextBlock Margin="60,16,16,8" Text="Your Favorite" 
                       Style="{ThemeResource TitleTextBlockStyle}" FontWeight="Bold"/>
                <ListView Margin="0,8" IsSynchronizedWithCurrentItem="False" IsItemClickEnabled="True" ItemClick="FavList_ItemClick"
                          ScrollViewer.IsHorizontalScrollChainingEnabled="True" ScrollViewer.IsHorizontalRailEnabled="True"
                      SelectionMode="None" ItemsSource="{x:Bind Context.FavList}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                      ItemContainerStyle="{ThemeResource HomeListViewItemStyle}" 
                      Style="{StaticResource HorizontalListView}" x:Name="FavList">
                    <ListView.Header>
                        <Grid VerticalAlignment="Stretch" Padding="64,0,0,0" MinWidth="64">
                            <TextBlock Visibility="{x:Bind Context.CollapseIfNotZero(Context.FavList.Count),Mode=OneWay,FallbackValue=Collapsed}" Text="No enough statistics" Style="{ThemeResource SubtitleTextBlockStyle}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Grid>
                    </ListView.Header>
                    <ListView.ItemTemplate>
                        <DataTemplate x:DataType="vm:GenericMusicItemViewModel">
                            <StackPanel Width="150" Background="{ThemeResource SystemControlBackgroundAltLowRevealBrush}" 
                                        Orientation="Vertical">
                                <toolkit:ImageEx x:Name="Artwork" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                                                 PlaceholderSource="/Assets/Images/placeholder_b.png"
                                                 Style="{ThemeResource QuickLoadImageEx}" Width="150" Height="150" 
                                                 Stretch="UniformToFill" PlaceholderStretch="UniformToFill">
                                    <toolkit:ImageEx.Source>
{'fraction_non_alphanumeric': 0.07712942074368385, 'fraction_numerical': 0.005320044445940941, 'mean_word_length': 1.1891938376864297, 'pattern_counts': {'":': 0, '<': 839, '<?xml version=': 0, '>': 839, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 18}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 934, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7036000', 'n_tokens_mistral': 16700, 'n_tokens_neox': 14979, 'n_words': 2155}