WindowsMusicPlayer-TheUntamedMusicPlayer/UntamedMusicPlayer/Views/MusicLibraryPage.xaml

<Page x:Class="UntamedMusicPlayer.Views.MusicLibraryPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:controls="using:UntamedMusicPlayer.Controls"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:model="using:UntamedMusicPlayer.Models"
      mc:Ignorable="d">

    <Grid x:Name="ContentArea">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="Narrow">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="Image.Height" Value="90"/>
                        <Setter Target="Image.Width" Value="90"/>
                        <Setter Target="StackPanel.Spacing" Value="8"/>
                        <Setter Target="NoMusicTitleGrid.Margin" Value="16,37,16,0"/>
                        <Setter Target="HaveMusicTitleGrid.Margin" Value="16,36,16,0"/>
                        <Setter Target="AddTextBlock.Visibility" Value="Collapsed"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Normal">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="641"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="Image.Height" Value="150"/>
                        <Setter Target="Image.Width" Value="150"/>
                        <Setter Target="StackPanel.Spacing" Value="18"/>
                        <Setter Target="NoMusicTitleGrid.Margin" Value="56,37,56,0"/>
                        <Setter Target="HaveMusicTitleGrid.Margin" Value="56,36,56,0"/>
                        <Setter Target="AddTextBlock.Visibility" Value="Visible"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Grid x:Name="NoMusicControl" Visibility="{x:Bind ViewModel.NoMusicControlVisibility, Mode=OneWay}">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid x:Name="NoMusicTitleGrid" Grid.Row="0">
                <TextBlock x:Uid="Shell_MusicLibrary1" Style="{StaticResource TitleLargeTextBlockStyle}"/>
            </Grid>
            <Grid Grid.Row="1"
                  HorizontalAlignment="Stretch"
                  VerticalAlignment="Stretch">
                <StackPanel x:Name="StackPanel"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Orientation="Horizontal">
                    <Image x:Name="Image"
                           HorizontalAlignment="Left"
                           VerticalAlignment="Center"
                           Source="ms-appx:///Assets/MusicGradient.svg"/>
                    <StackPanel VerticalAlignment="Center"
                                Orientation="Vertical" Spacing="8">
                        <TextBlock x:Uid="NoMusic_MusicNotFound"
                                   FontSize="29" FontWeight="SemiBold"/>
                        <TextBlock x:Uid="NoMusic_NoMusicContent" Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
                        <Button Click="{x:Bind ViewModel.PickMusicFolderButton_Click}" Style="{StaticResource AccentButtonStyle}">
                            <StackPanel Orientation="Horizontal" Spacing="8">
                                <FontIcon FontFamily="{StaticResource UntamedFontFamily}"
                                          FontSize="12" Glyph="&#xE8F4;"/>
                                <TextBlock x:Uid="Settings_AddFolder"/>
                            </StackPanel>
                        </Button>
                    </StackPanel>
                </StackPanel>
            </Grid>
        </Grid>

        <Grid x:Name="HaveMusicControl" Visibility="{x:Bind ViewModel.HaveMusicControlVisibility, Mode=OneWay}">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid x:Name="HaveMusicTitleGrid"
                  Grid.Row="0"
                  KeyTipPlacementMode="Bottom">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <TextBlock x:Uid="Shell_MusicLibrary1"
                           Grid.Column="0"
                           Style="{StaticResource TitleLargeTextBlockStyle}"/>
                <SelectorBar x:Name="SelectorBar"
                             Grid.Column="1"
                             Margin="18,0,0,0"
                             Loaded="SelectorBar_Loaded"
                             SelectionChanged="SelectorBar_SelectionChanged">
                    <SelectorBarItem x:Name="SelectorBarItemPage1" x:Uid="HaveMusic_Songs"
                                     FontSize="18"/>
                    <SelectorBarItem x:Name="SelectorBarItemPage2" x:Uid="HaveMusic_Albums"
                                     FontSize="18"/>
                    <SelectorBarItem x:Name="SelectorBarItemPage3" x:Uid="HaveMusic_Artists"
                                     FontSize="18"/>
                </SelectorBar>
                <Button x:Uid="HaveMusic_AddFolder"
                        Grid.Column="2"
                        HorizontalAlignment="Right"
                        AccessKey="CA"
                        Click="{x:Bind _settingsViewModel.PickMusicFolderButton_Click}">
                    <StackPanel Orientation="Horizontal" Spacing="8">
                        <FontIcon FontFamily="{StaticResource UntamedFontFamily}"
                                  FontSize="16" Glyph="&#xE8F4;"/>
                        <TextBlock x:Name="AddTextBlock" x:Uid="Settings_AddFolder"/>
                    </StackPanel>
                </Button>
            </Grid>
            <Frame x:Name="SelectFrame"
                   Grid.Row="1"
                   IsNavigationStackEnabled="False"/>
            <Border Grid.Row="1"
                    Height="48"
                    VerticalAlignment="Bottom"
                    Background="{ThemeResource AcrylicBackgroundFillColorDefaultBrush}"
                    BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
                    BorderThickness="0,1,0,0" Canvas.ZIndex="2"
                    Visibility="{x:Bind model:Data.MusicLibrary.IsProgressRingActive, Mode=OneWay}">
                <StackPanel HorizontalAlignment="Center"
                            Orientation="Horizontal" Spacing="16">
                    <ProgressRing Width="20" Height="20"
                                  VerticalAlignment="Center"
                                  IsActive="True"/>
                    <TextBlock x:Uid="Songs_IndexingLibraries"
                               VerticalAlignment="Center"
                               FontWeight="SemiBold"/>
                </StackPanel>
            </Border>
        </Grid>
        <ProgressRing Grid.Row="1"
                      Width="50" Height="50"
                      Margin="0,24,0,0"
                      Canvas.ZIndex="1"
                      IsActive="{x:Bind ViewModel.IsProgressRingActive, Mode=OneWay}"/>
    </Grid>
</Page>