Skip to content

Commit 35c1429

Browse files
author
theweavr
committed
improve artists listing ui
1 parent cf64d82 commit 35c1429

7 files changed

Lines changed: 155 additions & 49 deletions

File tree

‎BreadPlayer.Views.UWP/App.xaml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -197,6 +197,7 @@
197197
<Converter:HexToColorConverter x:Key="HexToColor" />
198198
<Converter:RecordTypeToVisibilityConverter x:Key="RecordTypeToVisibility" />
199199
<Converter:BrushToThemeConverter x:Key="BrushToTheme" />
200+
<Converter:ColorDarknessChanger x:Key="ColorDarknessChanger" />
200201

201202
<MenuFlyout x:Key="SortMenuFlyout" MenuFlyoutPresenterStyle="{StaticResource CustomFlyoutPresenter}">
202203
<MenuFlyoutItem

‎BreadPlayer.Views.UWP/BreadPlayer.Views.UWP.csproj‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<AssemblyName>BreadPlayer</AssemblyName>
1212
<DefaultLanguage>en-US</DefaultLanguage>
1313
<TargetPlatformIdentifier>UAP</TargetPlatformIdentifier>
14-
<TargetPlatformVersion>10.0.16299.0</TargetPlatformVersion>
14+
<TargetPlatformVersion>10.0.15063.0</TargetPlatformVersion>
1515
<TargetPlatformMinVersion>10.0.14393.0</TargetPlatformMinVersion>
1616
<MinimumVisualStudioVersion>14</MinimumVisualStudioVersion>
1717
<FileAlignment>512</FileAlignment>
@@ -569,11 +569,11 @@
569569
<SDKReference Include="Microsoft.VCLibs, Version=14.0">
570570
<Name>Visual C++ 2015 Runtime for Universal Windows Platform Apps</Name>
571571
</SDKReference>
572-
<SDKReference Include="WindowsDesktop, Version=10.0.16299.0">
572+
<SDKReference Include="WindowsDesktop, Version=10.0.15063.0">
573573
<Name>Windows Desktop Extensions for the UWP</Name>
574574
</SDKReference>
575-
<SDKReference Include="WindowsMobile, Version=10.0.16299.0">
576-
<Name>Windows Mobile Extensions for the UWP</Name>
575+
<SDKReference Include="WindowsMobile, Version=10.0.15063.0">
576+
<Name>Windows Mobile Extensions for the UWP %28WindowsMobile, Version=10.0.15063.0%29</Name>
577577
</SDKReference>
578578
</ItemGroup>
579579
<ItemGroup>

‎BreadPlayer.Views.UWP/Core/SharedLogic.cs‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -306,14 +306,7 @@ private async void OpenSongLocation(object file)
306306
}
307307

308308
private async void NavigateToAlbumPage(object para)
309-
{
310-
//because the gridview for both artists and albums is the same we need to handle,
311-
//item selection this way.
312-
if (para is Artist artist)
313-
{
314-
NavigateToArtistPage(artist);
315-
return;
316-
}
309+
{
317310
var album = para is Album ? (Album)para : await AlbumArtistService.GetAlbumAsync(para.ToString()).ConfigureAwait(false);
318311
await BreadDispatcher.InvokeAsync(() =>
319312
{

‎BreadPlayer.Views.UWP/Themes/DataTemplates.xaml‎

Lines changed: 103 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
xmlns:Extensions="using:BreadPlayer.Extensions"
88
xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
99
xmlns:Media="using:Microsoft.Xaml.Interactions.Media"
10-
xmlns:local="using:BreadPlayer.Themes"
10+
xmlns:local="using:BreadPlayer.Themes"
11+
xmlns:toolkit="using:Microsoft.Toolkit.Uwp.UI.Controls"
1112
xmlns:models="using:BreadPlayer.Core.Models">
1213

1314
<Extensions:BindableFlyout
@@ -1002,37 +1003,56 @@
10021003
<RowDefinition Height="Auto" />
10031004
<RowDefinition Height="Auto" />
10041005
</Grid.RowDefinitions>
1006+
1007+
<toolkit:DropShadowPanel
1008+
x:Name="dropShadow"
1009+
Grid.ColumnSpan="5"
1010+
HorizontalAlignment="Center"
1011+
VerticalAlignment="Center"
1012+
HorizontalContentAlignment="Stretch"
1013+
VerticalContentAlignment="Stretch"
1014+
BlurRadius="30"
1015+
OffsetX="0"
1016+
OffsetY="0"
1017+
Opacity="1"
1018+
ShadowOpacity="0"
1019+
Color="{Binding Path=PictureColor, Converter={StaticResource ColorDarknessChanger}, ConverterParameter='-0.7Color'}">
1020+
<Ellipse Width="150"
1021+
Height="150"
1022+
Fill="Black"/>
1023+
</toolkit:DropShadowPanel>
10051024
<Border
10061025
Width="150"
10071026
Height="150"
10081027
Background="#ccdbdbdb"
10091028
CornerRadius="100">
1010-
<Grid
1029+
1030+
<Grid
10111031
x:Name="artistImageGrid"
10121032
CornerRadius="100"
10131033
Opacity="1">
1014-
<Grid.Background>
1015-
<ImageBrush x:Name="ArtistPicture" Stretch="Uniform">
1016-
<ImageBrush.ImageSource>
1017-
<BitmapImage
1034+
<Grid.Background>
1035+
<ImageBrush x:Name="ArtistPicture" Stretch="Uniform">
1036+
<ImageBrush.ImageSource>
1037+
<BitmapImage
10181038
DecodePixelHeight="150"
10191039
DecodePixelType="Logical"
10201040
DecodePixelWidth="150"
10211041
UriSource="{Binding Picture, UpdateSourceTrigger=PropertyChanged}">
1022-
</BitmapImage>
1023-
</ImageBrush.ImageSource>
1024-
</ImageBrush>
1025-
</Grid.Background>
1026-
<FontIcon
1042+
</BitmapImage>
1043+
</ImageBrush.ImageSource>
1044+
</ImageBrush>
1045+
</Grid.Background>
1046+
<FontIcon
10271047
x:Name="PlaceHolder"
10281048
Width="150"
10291049
Height="150"
10301050
FontSize="52"
10311051
Foreground="{ThemeResource ThemeForeground}"
10321052
Glyph="&#xE13D;"
10331053
Visibility="{x:Bind Path=Picture, Mode=OneWay, Converter={StaticResource BoolToVisibility}}" />
1034-
<!--<Grid CornerRadius="100" Background="{Binding Path=PictureColor, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource HexToColor}}" />-->
1035-
</Grid>
1054+
<!--<Grid CornerRadius="100" Background="{Binding Path=PictureColor, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource HexToColor}}" />-->
1055+
</Grid>
10361056
</Border>
10371057
<TextBlock
10381058
x:Name="artistName"
@@ -1056,14 +1076,13 @@
10561076
HorizontalAlignment="Stretch"
10571077
VerticalAlignment="Stretch"
10581078
CornerRadius="100"
1059-
Opacity="0"
1060-
Visibility="Collapsed">
1061-
<Grid.Background>
1079+
Opacity="0">
1080+
<!--<Grid.Background>
10621081
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
10631082
<GradientStop Offset="0" Color="Transparent" />
10641083
<GradientStop Offset="0.95" Color="{Binding Path=PictureColor}" />
10651084
</LinearGradientBrush>
1066-
</Grid.Background>
1085+
</Grid.Background>-->
10671086
<Grid.ColumnDefinitions>
10681087
<ColumnDefinition Width="*" />
10691088
<ColumnDefinition Width="*" />
@@ -1108,10 +1127,6 @@
11081127
Binding="{Binding Path=IsSelected, UpdateSourceTrigger=PropertyChanged}"
11091128
ComparisonCondition="Equal"
11101129
Value="True">
1111-
<Core:ChangePropertyAction
1112-
PropertyName="Visibility"
1113-
TargetObject="{Binding ElementName=ButtonsStack}"
1114-
Value="Visible" />
11151130
<Core:ChangePropertyAction
11161131
PropertyName="Foreground"
11171132
TargetObject="{Binding ElementName=albumTitle}"
@@ -1123,6 +1138,12 @@
11231138
<Media:ControlStoryboardAction>
11241139
<Media:ControlStoryboardAction.Storyboard>
11251140
<Storyboard>
1141+
<DoubleAnimation
1142+
EnableDependentAnimation="True"
1143+
Storyboard.TargetName="dropShadow"
1144+
Storyboard.TargetProperty="ShadowOpacity"
1145+
To="1"
1146+
Duration="0:0:0.5" />
11261147
<DoubleAnimation
11271148
Storyboard.TargetName="ButtonsStack"
11281149
Storyboard.TargetProperty="Opacity"
@@ -1137,10 +1158,25 @@
11371158
Binding="{Binding Path=IsSelected, UpdateSourceTrigger=PropertyChanged}"
11381159
ComparisonCondition="Equal"
11391160
Value="False">
1140-
<Core:ChangePropertyAction
1141-
PropertyName="Visibility"
1142-
TargetObject="{Binding ElementName=ButtonsStack}"
1143-
Value="Collapsed" />
1161+
<Media:ControlStoryboardAction>
1162+
<Media:ControlStoryboardAction.Storyboard>
1163+
<Storyboard>
1164+
<DoubleAnimation
1165+
Storyboard.TargetName="ButtonsStack"
1166+
Storyboard.TargetProperty="Opacity"
1167+
From="1"
1168+
To="0"
1169+
Duration="0:0:0.3" />
1170+
<DoubleAnimation
1171+
EnableDependentAnimation="True"
1172+
Storyboard.TargetName="dropShadow"
1173+
Storyboard.TargetProperty="ShadowOpacity"
1174+
From="1"
1175+
To="0"
1176+
Duration="0:0:0.5" />
1177+
</Storyboard>
1178+
</Media:ControlStoryboardAction.Storyboard>
1179+
</Media:ControlStoryboardAction>
11441180
<Core:ChangePropertyAction
11451181
PropertyName="Foreground"
11461182
TargetObject="{Binding ElementName=albumTitle}"
@@ -1161,6 +1197,48 @@
11611197
<Core:EventTriggerBehavior EventName="Holding">
11621198
<Behaviours:OpenMenuFlyoutAction Parameter="{StaticResource AlbumArtistFlyout}" />
11631199
</Core:EventTriggerBehavior>
1200+
<Core:EventTriggerBehavior EventName="PointerEntered">
1201+
<Media:ControlStoryboardAction ControlStoryboardOption="Play">
1202+
<Media:ControlStoryboardAction.Storyboard>
1203+
<Storyboard>
1204+
<DoubleAnimation
1205+
EnableDependentAnimation="True"
1206+
Storyboard.TargetName="dropShadow"
1207+
Storyboard.TargetProperty="ShadowOpacity"
1208+
From="0"
1209+
To="1"
1210+
Duration="0:0:0.5" />
1211+
<DoubleAnimation
1212+
Storyboard.TargetName="ButtonsStack"
1213+
Storyboard.TargetProperty="Opacity"
1214+
From="0"
1215+
To="1"
1216+
Duration="0:0:0.5" />
1217+
</Storyboard>
1218+
</Media:ControlStoryboardAction.Storyboard>
1219+
</Media:ControlStoryboardAction>
1220+
</Core:EventTriggerBehavior>
1221+
<Core:EventTriggerBehavior EventName="PointerExited">
1222+
<Media:ControlStoryboardAction ControlStoryboardOption="Play">
1223+
<Media:ControlStoryboardAction.Storyboard>
1224+
<Storyboard>
1225+
<DoubleAnimation
1226+
EnableDependentAnimation="True"
1227+
Storyboard.TargetName="dropShadow"
1228+
Storyboard.TargetProperty="ShadowOpacity"
1229+
From="1"
1230+
To="0"
1231+
Duration="0:0:0.5" />
1232+
<DoubleAnimation
1233+
Storyboard.TargetName="ButtonsStack"
1234+
Storyboard.TargetProperty="Opacity"
1235+
From="1"
1236+
To="0"
1237+
Duration="0:0:0.5" />
1238+
</Storyboard>
1239+
</Media:ControlStoryboardAction.Storyboard>
1240+
</Media:ControlStoryboardAction>
1241+
</Core:EventTriggerBehavior>
11641242
</Interactivity:Interaction.Behaviors>
11651243
</Grid>
11661244
</DataTemplate>

‎BreadPlayer.Views.UWP/Views/LibraryView.xaml‎

Lines changed: 40 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -523,21 +523,21 @@
523523
</GridView>
524524
</PivotItem>
525525
<PivotItem x:Uid="bakersPivot" Header="Bakers">
526-
<GridView
526+
<ListView
527527
x:Name="artistGridView"
528528
HorizontalContentAlignment="Center"
529-
Behaviours:ItemClickCommand.Command="{Binding Source={StaticResource Core}, Path=NavigateToAlbumPageCommand}"
530529
IsItemClickEnabled="True"
530+
ItemClick="OnArtistClicked"
531531
ItemTemplate="{StaticResource ArtistTemplate}"
532532
ItemsSource="{Binding Source={StaticResource AlbumArtistVM}, Path=ArtistsCollection}"
533533
SelectionChanged="OnSelectionChanged">
534-
<GridView.Transitions>
534+
<ListView.Transitions>
535535
<TransitionCollection>
536536
<EntranceThemeTransition FromHorizontalOffset="200" IsStaggeringEnabled="True" />
537537
<AddDeleteThemeTransition />
538538
</TransitionCollection>
539-
</GridView.Transitions>
540-
<GridView.ItemsPanel>
539+
</ListView.Transitions>
540+
<ListView.ItemsPanel>
541541
<ItemsPanelTemplate>
542542
<ItemsWrapGrid
543543
HorizontalAlignment="Stretch"
@@ -551,13 +551,43 @@
551551
</ItemsWrapGrid.Transitions>
552552
</ItemsWrapGrid>
553553
</ItemsPanelTemplate>
554-
</GridView.ItemsPanel>
555-
<GridView.ItemContainerStyle>
556-
<Style TargetType="GridViewItem">
554+
</ListView.ItemsPanel>
555+
<ListView.ItemContainerStyle>
556+
<Style TargetType="ListViewItem">
557557
<Setter Property="Margin" Value="20" />
558+
<Setter Property="Template">
559+
<Setter.Value>
560+
<ControlTemplate TargetType="ListViewItem">
561+
<ListViewItemPresenter
562+
ContentTransitions="{TemplateBinding ContentTransitions}"
563+
SelectionCheckMarkVisualEnabled="True"
564+
CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
565+
CheckBoxBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
566+
DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
567+
DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
568+
FocusBorderBrush="{ThemeResource SystemControlForegroundAltHighBrush}"
569+
FocusSecondaryBorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}"
570+
PlaceholderBackground="Transparent"
571+
PointerOverBackground="Transparent"
572+
PointerOverForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}"
573+
SelectedBackground="Transparent"
574+
SelectedForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}"
575+
SelectedPointerOverBackground="Transparent"
576+
PressedBackground="Transparent"
577+
SelectedPressedBackground="Transparent"
578+
DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
579+
DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
580+
ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
581+
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
582+
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
583+
ContentMargin="{TemplateBinding Padding}"
584+
CheckMode="Inline"/>
585+
</ControlTemplate>
586+
</Setter.Value>
587+
</Setter>
558588
</Style>
559-
</GridView.ItemContainerStyle>
560-
</GridView>
589+
</ListView.ItemContainerStyle>
590+
</ListView>
561591
</PivotItem>
562592
<PivotItem x:Uid="playlistsPivot" Header="Playlists">
563593
<Frame Name="PlaylistsFrame" SourcePageType="local:PlaylistsCollectionView" />

‎BreadPlayer.Views.UWP/Views/LibraryView.xaml.cs‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,11 @@ private void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
116116
{
117117
record.IsSelected = true;
118118
}
119-
}
119+
}
120+
121+
private void OnArtistClicked(object sender, ItemClickEventArgs e)
122+
{
123+
BreadPlayer.Core.SharedLogic.Instance.NavigateToArtistPageCommand.Execute(e.ClickedItem);
124+
}
120125
}
121126
}

‎BreadPlayer.Views.UWP/Views/PlaylistsCollectionView.xaml‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@
1414
xmlns:toolkit="using:Microsoft.Toolkit.Uwp.UI.Controls"
1515
mc:Ignorable="d">
1616
<Page.Resources>
17-
<Converters:ColorDarknessChanger x:Key="ColorDarknessChanger" />
1817
<DataTemplate x:Key="NarrowPlaylistTemplate">
1918
<Grid
2019
x:Name="mainGrid"

0 commit comments

Comments
 (0)