Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

style: refine sticky header on the artist and album detail pages #444

Merged
merged 10 commits into from
Oct 12, 2024
Merged

style: refine sticky header on the artist and album detail pages #444

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
2a6c849
revise font sizes, update winui comments links, and padding adjustments
United600 Sep 8, 2024
0d5c2c8
improve media details pages sticky header
United600 Sep 8, 2024
a78ce66
replace panel with command bar
United600 Sep 12, 2024
7493179
increase shadows z-depth and fix squashed corner radius
United600 Sep 14, 2024
bf2e3ec
revert sticky header animation
United600 Sep 14, 2024
743de11
small tweaks to the app bar button styles
United600 Sep 27, 2024
2576c76
small tweaks to custom appbar styles
United600 Oct 6, 2024
6667255
remove theme shadow on cover art
huynhsontung Oct 9, 2024
d5e4419
restore header overlay behavior
huynhsontung Oct 9, 2024
3e08af0
restore cover art theme shadow
United600 Oct 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions Screenbox/App.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,12 +64,13 @@
<contract13Present:FontFamily x:Key="ScreenboxSymbolThemeFontFamily">ms-appx:///Assets/Fonts/ScreenboxFluentIcons.ttf#Screenbox Fluent Icons</contract13Present:FontFamily>
<!-- Font sizes -->
<x:Double x:Key="TopNavigationViewItemFontSize">18</x:Double>
<x:Double x:Key="TitleMediumTextBlockFontSize">32</x:Double>
<!-- Icon font sizes -->
<x:Double x:Key="DefaultIconFontSize">16</x:Double>
<x:Double x:Key="GridItemPlaceholderIconFontSize">52</x:Double>
<x:Double x:Key="WideGridItemPlaceholderIconFontSize">42</x:Double>
<x:Double x:Key="NoContentPanelGlyphFontSize">126</x:Double>
<x:Double x:Key="NoContentPanelMinimalGlyphFontSize">88</x:Double>
<x:Double x:Key="GridItemPlaceholderIconFontSize">56</x:Double>
<x:Double x:Key="WideGridItemPlaceholderIconFontSize">44</x:Double>
<x:Double x:Key="NoContentPanelIconFontSize">128</x:Double>
<x:Double x:Key="NoContentPanelMinimalIconFontSize">96</x:Double>

<!-- Standardize header height with or without top nav -->
<x:Double x:Key="PageHeaderMinHeight">48</x:Double>
Expand Down Expand Up @@ -97,17 +98,16 @@
<CornerRadius x:Key="CircularCornerRadius">99</CornerRadius>

<Style TargetType="FontIcon">
<Setter Property="FontFamily" Value="{ThemeResource SymbolThemeFontFamily}" />
<Setter Property="FontSize" Value="{StaticResource DefaultIconFontSize}" />
</Style>

<!-- Header style -->
<Style
x:Key="PageHeaderTextBlockStyle"
x:Key="TitleMediumTextBlockStyle"
BasedOn="{StaticResource BaseTextBlockStyle}"
TargetType="TextBlock">
<Setter Property="AutomationProperties.HeadingLevel" Value="Level1" />
<Setter Property="FontSize" Value="34" />
<Setter Property="FontSize" Value="{StaticResource TitleMediumTextBlockFontSize}" />
<Setter Property="OpticalMarginAlignment" Value="TrimSideBearings" />
</Style>

Expand Down
4 changes: 2 additions & 2 deletions Screenbox/Controls/AudioTrackSubtitlePicker.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
TextWrapping="NoWrap" />
<HyperlinkButton
Grid.Column="1"
Padding="{StaticResource HyperlinkButtonMediaItemPadding}"
Padding="{StaticResource HyperlinkButtonUniformPadding}"
Command="{x:Bind ShowAudioOptionsCommand}">
<TextBlock
Style="{StaticResource CaptionTextBlockStyle}"
Expand Down Expand Up @@ -81,7 +81,7 @@
TextWrapping="NoWrap" />
<HyperlinkButton
Grid.Column="1"
Padding="{StaticResource HyperlinkButtonMediaItemPadding}"
Padding="{StaticResource HyperlinkButtonUniformPadding}"
Command="{x:Bind ShowSubtitleOptionsCommand}">
<TextBlock
Style="{StaticResource CaptionTextBlockStyle}"
Expand Down
4 changes: 2 additions & 2 deletions Screenbox/Controls/MediaListViewItem.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@
x:Name="ArtistButton"
Grid.Column="3"
Margin="4,0"
Padding="{StaticResource HyperlinkButtonMediaItemPadding}"
Padding="{StaticResource HyperlinkButtonUniformPadding}"
VerticalAlignment="Center"
Command="{x:Bind Common.OpenArtistCommand}"
CommandParameter="{Binding MainArtist, FallbackValue={x:Null}}"
Expand All @@ -164,7 +164,7 @@
x:Name="AlbumButton"
Grid.Column="4"
Margin="4,0"
Padding="{StaticResource HyperlinkButtonMediaItemPadding}"
Padding="{StaticResource HyperlinkButtonUniformPadding}"
VerticalAlignment="Center"
Command="{x:Bind Common.OpenAlbumCommand}"
CommandParameter="{Binding Album}"
Expand Down
194 changes: 100 additions & 94 deletions Screenbox/Pages/AlbumDetailsPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,11 @@

<Page.Resources>
<ResourceDictionary>
<ThemeShadow x:Key="SharedShadow" />
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="ms-appx:///Styles/CommandBar.xaml" />
</ResourceDictionary.MergedDictionaries>

<ThemeShadow x:Name="SharedShadow" />
</ResourceDictionary>
</Page.Resources>

Expand All @@ -31,87 +35,74 @@

<Grid
x:Name="BackgroundHost"
Grid.Row="0"
Grid.RowSpan="2"
Margin="0,-100,0,0"
Margin="0,-136,0,0"
SizeChanged="BackgroundHost_OnSizeChanged" />

<Grid
x:Name="Header"
Grid.Row="0"
Height="200"
Margin="0,0,0,-108"
Margin="0,0,0,-64"
Padding="{StaticResource ContentPagePadding}"
Canvas.ZIndex="1">

<Border
<!-- To prevent the background border from appearing squashed after scaling, use a rectangle instead of a border to increase the Y radius. -->
<Rectangle
x:Name="BackgroundAcrylic"
VerticalAlignment="Top"
Background="{ThemeResource AcrylicInAppFillColorDefaultBrush}"
BorderBrush="{ThemeResource ControlElevationBorderBrush}"
BorderThickness="1"
CornerRadius="{StaticResource OverlayCornerRadius}"
Fill="{ThemeResource AcrylicInAppFillColorDefaultBrush}"
RadiusX="8"
RadiusY="12"
Shadow="{StaticResource SharedShadow}"
Translation="0,0,8" />
Stroke="{ThemeResource ControlElevationBorderBrush}"
StrokeThickness="1"
Translation="0,0,32" />

<Grid VerticalAlignment="Center">
<Grid x:Name="ContentContainer">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>

<Grid
x:Name="AlbumArt"
Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="0"
Width="180"
Height="180"
x:Name="CoverArt"
Width="192"
Height="192"
Margin="0,0,20,0"
VerticalAlignment="Top"
Background="{ThemeResource SolidBackgroundFillColorSecondaryBrush}"
BorderBrush="{ThemeResource ControlElevationBorderBrush}"
BorderThickness="1"
CornerRadius="{StaticResource OverlayCornerRadius}"
Shadow="{StaticResource SharedShadow}"
SizeChanged="AlbumArt_OnSizeChanged"
Translation="0,0,8">
<FontIcon
x:Name="AlbumArtIcon"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="64"
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
Glyph="&#xE93C;"
Visibility="{x:Bind ViewModel.Source.AlbumArt, Mode=OneWay, Converter={StaticResource InverseEmptyObjectToVisibilityConverter}}" />
<Border CornerRadius="{x:Bind AlbumArt.CornerRadius, Mode=OneWay}">
<Image
HorizontalAlignment="Center"
Source="{x:Bind ViewModel.Source.AlbumArt, Mode=OneWay}"
Stretch="UniformToFill" />
Translation="0,0,16">
<Grid.Background>
<ImageBrush ImageSource="{x:Bind ViewModel.Source.AlbumArt, Mode=OneWay}" Stretch="UniformToFill" />
</Grid.Background>
<Border
Background="{ThemeResource SolidBackgroundFillColorSecondaryBrush}"
CornerRadius="{x:Bind CoverArt.CornerRadius, Mode=OneWay}"
Visibility="{x:Bind ViewModel.Source.AlbumArt, Mode=OneWay, Converter={StaticResource InverseEmptyObjectToVisibilityConverter}}">
<FontIcon
x:Name="CoverArtIcon"
FontSize="64"
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
Glyph="&#xE93C;" />
</Border>
</Grid>

<StackPanel
x:Name="TitlePanel"
Grid.Row="0"
x:Name="TextPanel"
Grid.Column="1"
Orientation="Vertical">
<TextBlock
x:Name="AlbumTitleText"
Style="{StaticResource TitleTextBlockStyle}"
x:Name="TitleText"
Style="{StaticResource TitleMediumTextBlockStyle}"
Text="{x:Bind ViewModel.Source.Name}"
TextWrapping="NoWrap">
<interactivity:Interaction.Behaviors>
<interactions:OverflowTextToolTipBehavior />
</interactivity:Interaction.Behaviors>
</TextBlock>

<TextBlock
x:Name="ArtistNameText"
x:Name="SubtitleText"
Margin="0,8,0,0"
FontWeight="Normal"
Style="{StaticResource SubtitleTextBlockStyle}"
Text="{x:Bind ViewModel.Source.ArtistName}"
Expand All @@ -120,9 +111,10 @@
<interactions:OverflowTextToolTipBehavior />
</interactivity:Interaction.Behaviors>
</TextBlock>

<TextBlock
x:Name="Subtext"
Margin="0,8,0,0"
x:Name="CaptionText"
Margin="0,12,0,0"
Foreground="{ThemeResource TextFillColorTertiaryBrush}"
Style="{StaticResource BodyTextBlockStyle}"
Text="{x:Bind local:AlbumDetailsPage.GetSubtext(ViewModel.Year, ViewModel.SongsCount, ViewModel.TotalDuration), Mode=OneWay}"
Expand All @@ -131,43 +123,58 @@
<interactions:OverflowTextToolTipBehavior />
</interactivity:Interaction.Behaviors>
</TextBlock>
</StackPanel>

<StackPanel
x:Name="ButtonPanel"
Grid.Row="1"
Grid.Column="1"
Margin="0,0,0,32"
VerticalAlignment="Bottom"
Orientation="Horizontal"
Spacing="16">
<Button
x:Name="PlayButton"
AccessKey="{strings:KeyboardResources Key=CommandPlayKey}"
AutomationProperties.Name="{strings:Resources Key=Play}"
Command="{x:Bind ViewModel.PlayCommand}"
CommandParameter="{x:Bind ViewModel.SortedItems, Mode=OneWay, Converter={StaticResource FirstOrDefaultConverter}}"
Style="{StaticResource AccentButtonStyle}"
XYFocusDown="{x:Bind ItemList}">
<StackPanel Orientation="Horizontal">
<FontIcon Glyph="&#xE768;" />
<TextBlock Margin="8,0,0,0" Text="{strings:Resources Key=Play}" />
</StackPanel>
<interactivity:Interaction.Behaviors>
<interactions:AutoFocusBehavior />
</interactivity:Interaction.Behaviors>
</Button>

<Button
AccessKey="{strings:KeyboardResources Key=CommandShuffleAndPlayKey}"
AutomationProperties.Name="{strings:Resources Key=ShuffleAndPlay}"
Command="{x:Bind ViewModel.ShuffleAndPlayCommand}"
XYFocusDown="{x:Bind ItemList}">
<StackPanel Orientation="Horizontal">
<FontIcon Glyph="&#xE8B1;" />
<TextBlock Margin="8,0,0,0" Text="{strings:Resources Key=ShuffleAndPlay}" />
</StackPanel>
</Button>
<!-- Wrap the CommandBar in a Grid which will host the translation animation, this ensures that clicking the more button won't break the animation. -->
<Grid x:Name="ButtonPanel">
<CommandBar
Margin="-4,10,0,0"
Padding="0"
HorizontalAlignment="Left"
DefaultLabelPosition="Right">
<CommandBar.Resources>
<StaticResource x:Key="CommandBarBackground" ResourceKey="ControlFillColorTransparentBrush" />
<StaticResource x:Key="CommandBarBackgroundOpen" ResourceKey="ControlFillColorTransparentBrush" />
<StaticResource x:Key="CommandBarBorderBrushOpen" ResourceKey="ControlFillColorTransparentBrush" />
<StaticResource x:Key="CommandBarHighContrastBorder" ResourceKey="ControlFillColorTransparentBrush" />

<!-- Try to match the dimensions to those of the default button -->
<x:Double x:Key="AppBarThemeCompactHeight">44</x:Double>
<Thickness x:Key="AppBarButtonContentViewboxMargin">15,12,0,13</Thickness>
<Thickness x:Key="AppBarButtonContentViewboxCollapsedMargin">0,14,0,2</Thickness>
<!--<Thickness x:Key="AppBarButtonTextLabelMargin">6,0,6,8</Thickness>-->
<Thickness x:Key="AppBarButtonTextLabelOnRightMargin">8,12,15,13</Thickness>
<Thickness x:Key="AppBarButtonInnerBorderMargin">4,6,4,6</Thickness>
<!--<Thickness x:Key="AppBarButtonInnerBorderCompactMargin">4,6,4,26</Thickness>-->
<!--<StaticResource x:Key="AppBarButtonDefaultWidth" ResourceKey="AppBarButtonCompactWidth" />-->
</CommandBar.Resources>

<AppBarButton
x:Name="PlayButton"
HorizontalAlignment="Stretch"
BackgroundSizing="OuterBorderEdge"
BorderBrush="{StaticResource AccentButtonBorderBrush}"
Command="{x:Bind ViewModel.PlayCommand}"
CommandParameter="{x:Bind ViewModel.SortedItems, Mode=OneWay, Converter={StaticResource FirstOrDefaultConverter}}"
Icon="{ui:FontIcon Glyph=&#xE768;}"
Label="{strings:Resources Key=Play}"
Style="{StaticResource AppBarButtonAccentButtonStyle}"
XYFocusDown="{x:Bind ItemList}">
<interactivity:Interaction.Behaviors>
<interactions:AutoFocusBehavior />
</interactivity:Interaction.Behaviors>
</AppBarButton>

<AppBarButton
HorizontalAlignment="Stretch"
BorderBrush="{ThemeResource ButtonBorderBrush}"
Command="{x:Bind ViewModel.ShuffleAndPlayCommand}"
Icon="{ui:FontIcon Glyph=&#xE8B1;}"
Label="{strings:Resources Key=ShuffleAndPlay}"
Style="{StaticResource AppBarButtonDefaultButtonStyle}"
XYFocusDown="{x:Bind ItemList}"
XYFocusLeft="{x:Bind PlayButton}" />
</CommandBar>
</Grid>
</StackPanel>
</Grid>
</Grid>
Expand All @@ -194,7 +201,7 @@
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Header>
<Border x:Name="ListHeaderPadding" Height="140" />
<Border x:Name="ListHeaderPadding" Height="96" />
</ListView.Header>
<ListView.Footer>
<Border Height="{x:Bind Common.FooterBottomPaddingHeight, Mode=OneWay}" />
Expand Down Expand Up @@ -222,16 +229,15 @@
</triggers:IsEqualStateTrigger>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="BackgroundHost.Margin" Value="0,-100,0,0" />
<Setter Target="Header.Height" Value="160" />
<Setter Target="Header.Margin" Value="0,0,0,-68" />
<!--<Setter Target="BackgroundHost.Margin" Value="0,-136,0,0" />-->
<Setter Target="Header.Margin" Value="0,0,0,-32" />
<Setter Target="Header.Padding" Value="{StaticResource ContentPageMinimalPadding}" />
<Setter Target="AlbumArt.Width" Value="140" />
<Setter Target="AlbumArt.Height" Value="140" />
<Setter Target="AlbumArtIcon.FontSize" Value="52" />
<Setter Target="ButtonPanel.Margin" Value="0" />
<Setter Target="CoverArt.Width" Value="160" />
<Setter Target="CoverArt.Height" Value="160" />
<Setter Target="CoverArtIcon.FontSize" Value="52" />
<Setter Target="SubtitleText.FontSize" Value="{StaticResource BodyTextBlockFontSize}" />
<Setter Target="ItemList.Padding" Value="{StaticResource ContentPageMinimalPadding}" />
<Setter Target="ListHeaderPadding.Height" Value="100" />
<Setter Target="ListHeaderPadding.Height" Value="56" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
Expand Down
Loading