harmonia/Harmonia.WinUI/Views/PlaylistsView.xaml

<?xml version="1.0" encoding="utf-8"?>
<UserControl
    x:Class="Harmonia.WinUI.Views.PlaylistsView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Harmonia.WinUI.Views"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:vm="using:Harmonia.WinUI.ViewModels"
    xmlns:converter="using:Harmonia.WinUI.Converters"
    xmlns:playlists="using:Harmonia.Core.Playlists"
    DataContext="{Binding Source={StaticResource Locator}, Path=PlaylistsViewModel}"
    d:DataContext="{d:DesignInstance Type=vm:PlaylistsViewModel, IsDesignTimeCreatable=True}"
    mc:Ignorable="d">
    <UserControl.Resources>
        <converter:BooleanToVisibilityConverter x:Key="BoolToVis" />
        <converter:BooleanToVisibilityConverter x:Key="InverseBoolToVis" TrueValue="Collapsed" FalseValue="Visible"/>

        <SolidColorBrush x:Key="PlaylistItemIconBrush" Color="#dddddd"/>
        <SolidColorBrush x:Key="PlaylistItemTitleBrush" Color="#dddddd"/>
        <SolidColorBrush x:Key="PlaylistItemSubtitleBrush" Color="#aaaaaa"/>

        <LinearGradientBrush x:Key="DarkBackgroundBrush" StartPoint="0,0" EndPoint="0,1">
            <GradientStop Color="#161719" Offset="0"/>
            <GradientStop Color="#0B0D0F" Offset="1"/>
        </LinearGradientBrush>

        <LinearGradientBrush x:Key="ActiveGradientBrush" StartPoint="0,0" EndPoint="0,1">
            <GradientStop Color="#E1B88A" Offset="0"/>
            <GradientStop Color="#E9B578" Offset="1"/>
        </LinearGradientBrush>

        <LinearGradientBrush x:Key="ActiveDarkGradientBrush" StartPoint="0,0" EndPoint="0,1">
            <GradientStop Color="#F9EBC6" Offset="0"/>
            <GradientStop Color="#A66831" Offset="1"/>
        </LinearGradientBrush>

        <!-- Playlist Icon Path -->
        <Style x:Key="PlaylistIconPath" TargetType="PathIcon">
            <Setter Property="Foreground" Value="{StaticResource PlaylistItemIconBrush}"/>
            <Setter Property="Foreground" Value="{StaticResource ActiveDarkGradientBrush}"/>
        </Style>

        <Style x:Key="SelectedPlaylistIconPath" TargetType="PathIcon" BasedOn="{StaticResource PlaylistIconPath}">
            <Setter Property="Foreground" Value="{StaticResource AccentTextFillColorPrimaryBrush}"/>
            <Setter Property="Foreground" Value="{StaticResource ActiveGradientBrush}"/>
            <Setter Property="Foreground" Value="{StaticResource ActiveDarkGradientBrush}"/>
        </Style>

        <!-- Playlist Title Text Block -->
        <Style x:Key="PlaylistTitleTextBlock" TargetType="TextBlock">
            <Setter Property="Foreground" Value="{StaticResource PlaylistItemTitleBrush}"/>
            <Setter Property="FontSize" Value="15"/>
            <Setter Property="FontWeight" Value="Normal"/>
            <Setter Property="LineStackingStrategy" Value="BlockLineHeight"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="TextTrimming" Value="CharacterEllipsis"/>
            <Setter Property="LineHeight" Value="0"/>
        </Style>

        <Style x:Key="SelectedPlaylistTitleTextBlock" TargetType="TextBlock" BasedOn="{StaticResource PlaylistTitleTextBlock}">
            <Setter Property="Foreground" Value="{StaticResource AccentTextFillColorPrimaryBrush}"/>
            <Setter Property="FontFamily" Value="{StaticResource AppFontFamilyMedium}"/>
            <Setter Property="FontWeight" Value="Medium"/>
        </Style>

        <!-- Playlist Item Subtitle Text Block -->
        <Style x:Key="PlaylistSubtitleTextBlock" TargetType="TextBlock">
            <Setter Property="Foreground" Value="{StaticResource PlaylistItemSubtitleBrush}"/>
            <Setter Property="FontSize" Value="13"/>
            <Setter Property="LineStackingStrategy" Value="BlockLineHeight"/>
            <Setter Property="TextTrimming" Value="CharacterEllipsis"/>
            <Setter Property="LineHeight" Value="0"/>
        </Style>

        <Style x:Key="SelectedPlaylistSubtitleTextBlock" TargetType="TextBlock" BasedOn="{StaticResource PlaylistSubtitleTextBlock}">
            <Setter Property="Foreground" Value="{StaticResource AccentTextFillColorSecondaryBrush}"/>
        </Style>

        <DataTemplate x:Key="PlaylistTemplate" x:DataType="vm:PlaylistItemViewModel">
            <Grid x:Name="PlaylistListViewItem">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="200" />
                </Grid.ColumnDefinitions>
                <StackPanel Grid.Column="0" Orientation="Horizontal" Spacing="8" VerticalAlignment="Center">
                    <Viewbox Height="24" Width="24">
                        <PathIcon x:Name="MusicNoteListPathIcon" Data="{StaticResource MusicNoteList}" />
                    </Viewbox>
                    <TextBlock x:Name="PlaylistTitleTextBlock" Text="{x:Bind Name, Mode=OneWay}" Style="{StaticResource PlaylistTitleTextBlock}" />
                </StackPanel>
                <StackPanel Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Center" Spacing="8">
                    <TextBlock x:Name="PlaylistSubtitleTextBlock" Text="{x:Bind Summary, Mode=OneWay}" Style="{StaticResource PlaylistSubtitleTextBlock}" />
                </StackPanel>
            </Grid>
        </DataTemplate>
    </UserControl.Resources>
    <Grid Background="{StaticResource DarkBackgroundBrush}" BorderBrush="#3C342F" BorderThickness="1 0 1 0">
        <ListView
            Name="PlaylistsListView"
            ItemsSource="{Binding Playlists, Mode=OneWay}"
            SelectedItem="{Binding SelectedPlaylist, Mode=TwoWay}"
            ItemTemplate="{StaticResource PlaylistTemplate}"
            RightTapped="PlaylistsListView_RightTapped">
            <ListView.ContextFlyout>
                <MenuFlyout
                    x:Name="PlaylistListViewMenuFlyout"
                    ShouldConstrainToRootBounds="False"
                    SystemBackdrop="{StaticResource AcrylicBackgroundFillColorDefaultBackdrop}">
                    <MenuFlyout.MenuFlyoutPresenterStyle>
                        <Style TargetType="MenuFlyoutPresenter">
                            <Setter Property="Padding" Value="10"></Setter>
                            <Setter Property="Background" Value="Transparent"></Setter>
                        </Style>
                    </MenuFlyout.MenuFlyoutPresenterStyle>

                    <MenuFlyoutItem Text="{Binding FlyoutPlaylist.Name}" IsEnabled="False" FontWeight="SemiLight">
                        <MenuFlyoutItem.Resources>
                            <SolidColorBrush x:Key="MenuFlyoutItemForegroundDisabled" Color="#aaaaaa"/>
                        </MenuFlyoutItem.Resources>
                    </MenuFlyoutItem>

                    <MenuFlyoutSeparator></MenuFlyoutSeparator>

                    <MenuFlyoutItem Text="Rename" Command="{Binding RenamePlaylistCommand}" CommandParameter="{Binding FlyoutPlaylist}">
                    </MenuFlyoutItem>

                    <MenuFlyoutItem Text="Lock" Command="{Binding LockPlaylistCommand}" CommandParameter="{Binding FlyoutPlaylist}" Visibility="{Binding FlyoutPlaylist.IsLocked, Converter={StaticResource InverseBoolToVis}}">
                    </MenuFlyoutItem>

                    <MenuFlyoutItem Text="Unlock" Command="{Binding UnlockPlaylistCommand}" CommandParameter="{Binding FlyoutPlaylist}" Visibility="{Binding FlyoutPlaylist.IsLocked, Converter={StaticResource BoolToVis}}">
                    </MenuFlyoutItem>

                    <MenuFlyoutSeparator></MenuFlyoutSeparator>

                    <MenuFlyoutItem Text="Remove" Foreground="#ff99a4" Command="{Binding DeletePlaylistCommand}" CommandParameter="{Binding FlyoutPlaylist}">
                    </MenuFlyoutItem>

                </MenuFlyout>
            </ListView.ContextFlyout>
        </ListView>
    </Grid>
</UserControl>