Added playing song view. Adding styling to playing song. Fixed caching cancellation issue.
This commit is contained in:
17
Harmonia.WinUI/Views/PlayingSongView.xaml
Normal file
17
Harmonia.WinUI/Views/PlayingSongView.xaml
Normal file
@@ -0,0 +1,17 @@
|
||||
<UserControl
|
||||
x:Class="Harmonia.WinUI.Views.PlayingSongView"
|
||||
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:vm="using:Harmonia.WinUI.ViewModels"
|
||||
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
||||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
||||
DataContext="{Binding Source={StaticResource Locator}, Path=PlayingSongViewModel}"
|
||||
d:DataContext="{d:DesignInstance Type=vm:PlayingSongViewModel, IsDesignTimeCreatable=True}"
|
||||
mc:Ignorable="d">
|
||||
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Margin="20">
|
||||
<Image Source="{Binding SongImageSource, Mode=OneWay}" Stretch="Uniform">
|
||||
</Image>
|
||||
<Canvas Background="#19000000"></Canvas>
|
||||
</Grid>
|
||||
</UserControl>
|
||||
15
Harmonia.WinUI/Views/PlayingSongView.xaml.cs
Normal file
15
Harmonia.WinUI/Views/PlayingSongView.xaml.cs
Normal file
@@ -0,0 +1,15 @@
|
||||
using Harmonia.WinUI.ViewModels;
|
||||
using Microsoft.UI.Xaml.Controls;
|
||||
|
||||
namespace Harmonia.WinUI.Views;
|
||||
|
||||
public sealed partial class PlayingSongView : UserControl
|
||||
{
|
||||
private readonly PlayingSongViewModel _viewModel;
|
||||
|
||||
public PlayingSongView()
|
||||
{
|
||||
InitializeComponent();
|
||||
_viewModel = (PlayingSongViewModel)DataContext;
|
||||
}
|
||||
}
|
||||
@@ -30,10 +30,38 @@
|
||||
<Setter Property="Height" Value="60"/> <!-- as 75 -->
|
||||
<Setter Property="CornerRadius" Value="8"/>
|
||||
</Style>
|
||||
|
||||
<!-- Song Item Title Text Block -->
|
||||
<Style x:Key="SongTitleTextBlock" TargetType="TextBlock">
|
||||
<Setter Property="Foreground" Value="{StaticResource SongItemTitleBrush}"/>
|
||||
<Setter Property="FontSize" Value="15"/>
|
||||
<Setter Property="FontWeight" Value="Medium"/>
|
||||
<Setter Property="LineStackingStrategy" Value="BlockLineHeight"/>
|
||||
<Setter Property="VerticalAlignment" Value="Center"/>
|
||||
<Setter Property="TextTrimming" Value="CharacterEllipsis"/>
|
||||
<Setter Property="LineHeight" Value="0"/>
|
||||
</Style>
|
||||
|
||||
<Style x:Key="PlayingSongTitleTextBlock" TargetType="TextBlock" BasedOn="{StaticResource SongTitleTextBlock}">
|
||||
<Setter Property="Foreground" Value="{StaticResource AccentTextFillColorPrimaryBrush}"/>
|
||||
</Style>
|
||||
|
||||
<!-- Song Item Subtitle Text Block -->
|
||||
<Style x:Key="SongSubtitleTextBlock" TargetType="TextBlock">
|
||||
<Setter Property="Foreground" Value="{StaticResource SongItemSubtitleBrush}"/>
|
||||
<Setter Property="FontSize" Value="13"/>
|
||||
<Setter Property="LineStackingStrategy" Value="BlockLineHeight"/>
|
||||
<Setter Property="TextTrimming" Value="CharacterEllipsis"/>
|
||||
<Setter Property="LineHeight" Value="0"/>
|
||||
</Style>
|
||||
|
||||
<Style x:Key="PlayingSongSubtitleTextBlock" TargetType="TextBlock" BasedOn="{StaticResource SongSubtitleTextBlock}">
|
||||
<Setter Property="Foreground" Value="{StaticResource AccentTextFillColorSecondaryBrush}"/>
|
||||
</Style>
|
||||
|
||||
<DataTemplate x:Key="SongTemplate" x:DataType="playlists:PlaylistSong">
|
||||
<!-- Background was formerly transparent -->
|
||||
<Border DoubleTapped="PlaylistListViewItem_DoubleTapped" RightTapped="PlaylistListViewItem_RightTapped" Background="Transparent">
|
||||
<Border x:Name="PlaylistSongListViewItem" DataContextChanged="PlaylistSongListViewItem_DataContextChanged" DoubleTapped="PlaylistListViewItem_DoubleTapped" RightTapped="PlaylistListViewItem_RightTapped" Background="Transparent">
|
||||
<Grid Padding="10">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="Auto"></ColumnDefinition>
|
||||
@@ -55,15 +83,15 @@
|
||||
<RowDefinition></RowDefinition>
|
||||
<RowDefinition></RowDefinition>
|
||||
</Grid.RowDefinitions>
|
||||
<TextBlock Grid.Column="0" Grid.Row="0" Foreground="{StaticResource SongItemTitleBrush}" Text="{x:Bind Song, Converter={StaticResource SongTitle}, Mode=OneWay}" FontSize="15" FontWeight="Medium" LineStackingStrategy="BlockLineHeight" VerticalAlignment="Center" TextTrimming="CharacterEllipsis" LineHeight="0">
|
||||
<TextBlock Grid.Column="0" Grid.Row="0" x:Name="SongTitleTextBlock" Text="{x:Bind Song, Converter={StaticResource SongTitle}, Mode=OneWay}" Style="{StaticResource SongTitleTextBlock}" >
|
||||
</TextBlock>
|
||||
<TextBlock Grid.Row="1" Text="{Binding Song.Artists, Converter={StaticResource ArtistsToString}}" Foreground="{StaticResource SongItemSubtitleBrush}" TextTrimming="CharacterEllipsis" LineStackingStrategy="BlockLineHeight" LineHeight="0" FontSize="13" Margin="0 0 0 0">
|
||||
<TextBlock Grid.Row="1" x:Name="SongArtistsTextBlock" Text="{Binding Song.Artists, Converter={StaticResource ArtistsToString}}" Style="{StaticResource SongSubtitleTextBlock}">
|
||||
</TextBlock>
|
||||
<TextBlock Grid.Row="2" Text="{Binding Song.Album}" Foreground="{StaticResource SongItemSubtitleBrush}" TextTrimming="CharacterEllipsis" LineStackingStrategy="BlockLineHeight" LineHeight="0" FontSize="13" Margin="0 0 0 0">
|
||||
<TextBlock Grid.Row="2" x:Name="SongAlbumTextBlock" Text="{Binding Song.Album}" Style="{StaticResource SongSubtitleTextBlock}">
|
||||
</TextBlock>
|
||||
<TextBlock Grid.Row="0" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" TextAlignment="Right" HorizontalTextAlignment="Right" Foreground="{StaticResource SongItemSubtitleBrush}" TextTrimming="CharacterEllipsis" LineStackingStrategy="BlockLineHeight" LineHeight="0" FontSize="13" Text="{Binding Song.Length.TotalSeconds, Converter={StaticResource SecondsToString}}"></TextBlock>
|
||||
<TextBlock Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" Foreground="{StaticResource SongItemFooterBrush}" TextTrimming="CharacterEllipsis" LineStackingStrategy="BlockLineHeight" LineHeight="0" FontSize="12" Text="{Binding Song.FileType}"></TextBlock>
|
||||
<TextBlock Grid.Row="2" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" Foreground="{StaticResource SongItemFooterBrush}" TextTrimming="CharacterEllipsis" LineStackingStrategy="BlockLineHeight" LineHeight="0" FontSize="12">
|
||||
<TextBlock Grid.Row="0" x:Name="SongLengthTextBlock" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" TextAlignment="Right" HorizontalTextAlignment="Right" Foreground="{StaticResource SongItemSubtitleBrush}" TextTrimming="CharacterEllipsis" LineStackingStrategy="BlockLineHeight" LineHeight="0" FontSize="13" Text="{Binding Song.Length.TotalSeconds, Converter={StaticResource SecondsToString}}"></TextBlock>
|
||||
<TextBlock Grid.Row="1" x:Name="SongFormatTextBlock" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" Foreground="{StaticResource SongItemFooterBrush}" TextTrimming="CharacterEllipsis" LineStackingStrategy="BlockLineHeight" LineHeight="0" FontSize="12" Text="{Binding Song.FileType}"></TextBlock>
|
||||
<TextBlock Grid.Row="2" x:Name="SongBitRateTextBlock" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" Foreground="{StaticResource SongItemFooterBrush}" TextTrimming="CharacterEllipsis" LineStackingStrategy="BlockLineHeight" LineHeight="0" FontSize="12">
|
||||
<Run Text="{Binding Song.BitRate}"></Run><Run Text=" kbps"></Run>
|
||||
</TextBlock>
|
||||
</Grid>
|
||||
@@ -88,16 +116,28 @@
|
||||
<Path Style="{StaticResource FlatButtonPath}" Fill="#7FD184" Data="{StaticResource AddIcon}"></Path>
|
||||
</Button.Content>
|
||||
<Button.Flyout>
|
||||
<MenuFlyout Placement="Bottom">
|
||||
<MenuFlyout Placement="Bottom" 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="Add Files..." Command="{Binding AddFilesCommand}">
|
||||
<MenuFlyoutItem.Icon>
|
||||
<PathIcon Data="{StaticResource CopyIcon}"></PathIcon>
|
||||
<PathIcon Data="{StaticResource AddFileIcon}"></PathIcon>
|
||||
</MenuFlyoutItem.Icon>
|
||||
<MenuFlyoutItem.KeyboardAccelerators>
|
||||
<KeyboardAccelerator Key="Insert"/>
|
||||
</MenuFlyoutItem.KeyboardAccelerators>
|
||||
</MenuFlyoutItem>
|
||||
<MenuFlyoutItem Text="Add Folder..." Command="{Binding AddFolderCommand}">
|
||||
<MenuFlyoutItem.Icon>
|
||||
<PathIcon Data="{StaticResource CopyIcon}"></PathIcon>
|
||||
<PathIcon Data="{StaticResource AddFolderIcon}"></PathIcon>
|
||||
</MenuFlyoutItem.Icon>
|
||||
<MenuFlyoutItem.KeyboardAccelerators>
|
||||
<KeyboardAccelerator Key="Insert" Modifiers="Control" />
|
||||
</MenuFlyoutItem.KeyboardAccelerators>
|
||||
</MenuFlyoutItem>
|
||||
</MenuFlyout>
|
||||
</Button.Flyout>
|
||||
@@ -107,16 +147,32 @@
|
||||
<Path Style="{StaticResource FlatButtonPath}" Data="{StaticResource MoreIcon}"></Path>
|
||||
</Button.Content>
|
||||
<Button.Flyout>
|
||||
<MenuFlyout Placement="Bottom">
|
||||
<MenuFlyoutItem Text="Add Files..." Command="{Binding AddFilesCommand}">
|
||||
<MenuFlyoutItem.Icon>
|
||||
<PathIcon Data="{StaticResource CopyIcon}"></PathIcon>
|
||||
</MenuFlyoutItem.Icon>
|
||||
<MenuFlyout Placement="Bottom" 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="Refresh Tags" Command="{Binding RefreshTagsCommand}">
|
||||
|
||||
</MenuFlyoutItem>
|
||||
<MenuFlyoutItem Text="Add Folder..." Command="{Binding AddFolderCommand}">
|
||||
<MenuFlyoutItem.Icon>
|
||||
<PathIcon Data="{StaticResource CopyIcon}"></PathIcon>
|
||||
</MenuFlyoutItem.Icon>
|
||||
<MenuFlyoutItem Text="Remove Duplicates" Command="{Binding RemoveDuplicateSongsCommand}">
|
||||
|
||||
</MenuFlyoutItem>
|
||||
<MenuFlyoutItem Text="Remove Missing" Command="{Binding RemoveMissingSongsCommand}">
|
||||
|
||||
</MenuFlyoutItem>
|
||||
<MenuFlyoutItem Text="Lock Playlist">
|
||||
|
||||
</MenuFlyoutItem>
|
||||
<MenuFlyoutSeparator></MenuFlyoutSeparator>
|
||||
<MenuFlyoutItem Text="Remove Playlist" Foreground="#ff99a4">
|
||||
|
||||
</MenuFlyoutItem>
|
||||
<MenuFlyoutSeparator></MenuFlyoutSeparator>
|
||||
<MenuFlyoutItem Text="Settings">
|
||||
|
||||
</MenuFlyoutItem>
|
||||
</MenuFlyout>
|
||||
</Button.Flyout>
|
||||
@@ -147,9 +203,9 @@
|
||||
</MenuFlyoutItem.KeyboardAccelerators>
|
||||
</MenuFlyoutItem>
|
||||
<MenuFlyoutSeparator></MenuFlyoutSeparator>
|
||||
<MenuFlyoutItem Text="Remove" Command="{Binding RemoveSongsCommand}">
|
||||
<MenuFlyoutItem Text="Remove" Command="{Binding RemoveSongsCommand}" Foreground="#ff99a4">
|
||||
<MenuFlyoutItem.Icon>
|
||||
<PathIcon Data="{StaticResource DeleteIcon}"></PathIcon>
|
||||
<PathIcon Data="{StaticResource DeleteIcon}" Foreground="#ff99a4"></PathIcon>
|
||||
</MenuFlyoutItem.Icon>
|
||||
<MenuFlyoutItem.KeyboardAccelerators>
|
||||
<KeyboardAccelerator Key="Delete"/>
|
||||
|
||||
@@ -6,9 +6,13 @@ using Microsoft.UI.Xaml;
|
||||
using Microsoft.UI.Xaml.Controls;
|
||||
using Microsoft.UI.Xaml.Data;
|
||||
using Microsoft.UI.Xaml.Input;
|
||||
using Microsoft.UI.Xaml.Media;
|
||||
using Microsoft.UI.Xaml.Media.Imaging;
|
||||
using System;
|
||||
using System.Collections.Generic;
|
||||
using System.ComponentModel;
|
||||
using System.Linq;
|
||||
using Windows.UI.Popups;
|
||||
|
||||
namespace Harmonia.WinUI.Views;
|
||||
|
||||
@@ -21,6 +25,8 @@ public sealed partial class PlaylistView : UserControl
|
||||
InitializeComponent();
|
||||
|
||||
_viewModel = (PlaylistViewModel)DataContext;
|
||||
_viewModel.PropertyChanging += OnViewModelPropertyChanging;
|
||||
_viewModel.PropertyChanged += OnViewModelPropertyChanged;
|
||||
_viewModel.PlayingSongChangedAutomatically += OnPlayingSongChangedAutomatically;
|
||||
|
||||
foreach (MenuFlyoutItemBase item in PlaylistListViewMenuFlyout.Items)
|
||||
@@ -29,6 +35,75 @@ public sealed partial class PlaylistView : UserControl
|
||||
}
|
||||
}
|
||||
|
||||
private void OnViewModelPropertyChanging(object? sender, PropertyChangingEventArgs e)
|
||||
{
|
||||
if (e.PropertyName == nameof(_viewModel.PlayingSong))
|
||||
{
|
||||
ListViewItem listViewItem = (ListViewItem)PlaylistListView.ContainerFromItem(_viewModel.PlayingSong);
|
||||
|
||||
if (listViewItem != null)
|
||||
{
|
||||
UpdateListViewItemStyle(listViewItem, false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private void OnViewModelPropertyChanged(object? sender, PropertyChangedEventArgs e)
|
||||
{
|
||||
if (e.PropertyName == nameof(_viewModel.PlayingSong))
|
||||
{
|
||||
ListViewItem listViewItem = (ListViewItem)PlaylistListView.ContainerFromItem(_viewModel.PlayingSong);
|
||||
|
||||
UpdateListViewItemStyle(listViewItem, true);
|
||||
}
|
||||
}
|
||||
|
||||
private void UpdateListViewItemStyle(FrameworkElement listViewItem, bool isPlaying)
|
||||
{
|
||||
if (listViewItem == null)
|
||||
return;
|
||||
|
||||
FrameworkElement? frameworkElement;
|
||||
|
||||
if (listViewItem.Name == "PlaylistSongListViewItem")
|
||||
{
|
||||
frameworkElement = listViewItem;
|
||||
}
|
||||
else
|
||||
{
|
||||
if (listViewItem.FindDescendant("PlaylistSongListViewItem") is not FrameworkElement frameworkElement2)
|
||||
return;
|
||||
|
||||
frameworkElement = frameworkElement2;
|
||||
}
|
||||
|
||||
if (frameworkElement == null)
|
||||
return;
|
||||
|
||||
string songItemTitleBrushName = isPlaying ? "PlayingSongTitleTextBlock" : "SongTitleTextBlock";
|
||||
string songItemSubtitleBrushName = isPlaying ? "PlayingSongSubtitleTextBlock" : "SongSubtitleTextBlock";
|
||||
|
||||
UpdateElementStyle(frameworkElement, "SongTitleTextBlock", songItemTitleBrushName);
|
||||
UpdateElementStyle(frameworkElement, "SongArtistsTextBlock", songItemSubtitleBrushName);
|
||||
UpdateElementStyle(frameworkElement, "SongAlbumTextBlock", songItemSubtitleBrushName);
|
||||
}
|
||||
|
||||
private void UpdateElementStyle(FrameworkElement dependencyObject, string elementName, string resourceName)
|
||||
{
|
||||
if (dependencyObject.FindDescendant(elementName) is not FrameworkElement frameworkElement)
|
||||
return;
|
||||
|
||||
Resources.TryGetValue(resourceName, out object? resource);
|
||||
|
||||
if (resource == null)
|
||||
Application.Current.Resources.TryGetValue(resourceName, out resource);
|
||||
|
||||
if (resource is not Style style)
|
||||
return;
|
||||
|
||||
frameworkElement.Style = style;
|
||||
}
|
||||
|
||||
private void OnPlayingSongChangedAutomatically(object? sender, EventArgs e)
|
||||
{
|
||||
BringPlayingSongIntoView();
|
||||
@@ -112,6 +187,16 @@ public sealed partial class PlaylistView : UserControl
|
||||
});
|
||||
}
|
||||
|
||||
private void PlaylistSongListViewItem_DataContextChanged(FrameworkElement sender, DataContextChangedEventArgs args)
|
||||
{
|
||||
if (args.NewValue is not PlaylistSong playlistSong)
|
||||
return;
|
||||
|
||||
bool isPlaying = playlistSong == _viewModel.PlayingSong;
|
||||
|
||||
UpdateListViewItemStyle(sender, isPlaying);
|
||||
}
|
||||
|
||||
private async void PlaylistListViewItem_DoubleTapped(object sender, DoubleTappedRoutedEventArgs e)
|
||||
{
|
||||
if (sender is not FrameworkElement element)
|
||||
|
||||
Reference in New Issue
Block a user