Skip to content

Commit

Permalink
style: improve command bar style and resources (#533)
Browse files Browse the repository at this point in the history 
* improve custom appbar button styles

* improve media details command bar

add command bar extension

add ellipsis button style

add more button animation

invert selection command bar translation animation

improve gamepad navigation

* improve play queue select all shortcut

* remove unused method from extension

remove implicitanimation from property
  • Loading branch information
@United600
United600 authored Jan 27, 2025
1 parent fcae24d commit a127e0d
Show file tree
Hide file tree
Showing 11 changed files with 310 additions and 133 deletions.
6 changes: 3 additions & 3 deletions Screenbox/App.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,13 +84,13 @@
<CornerRadius x:Key="CircularCornerRadius">99</CornerRadius>

<!-- Animations -->
<ctAnimations:ImplicitAnimationSet x:Key="SimpleShowAnimations">
<ctAnimations:ImplicitAnimationSet x:Key="FadeInImplicitAnimation">
<ctAnimations:OpacityAnimation
EasingType="Linear"
To="1"
Duration="{StaticResource ControlFastAnimationDuration}" />
Duration="{StaticResource ControlFasterAnimationDuration}" />
</ctAnimations:ImplicitAnimationSet>
<ctAnimations:ImplicitAnimationSet x:Key="SimpleHideAnimations">
<ctAnimations:ImplicitAnimationSet x:Key="FadeOutImplicitAnimation">
<ctAnimations:OpacityAnimation
EasingType="Linear"
To="0"
Expand Down
70 changes: 70 additions & 0 deletions Screenbox/Controls/Extensions/CommandBarExtensions.cs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
using CommunityToolkit.WinUI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace Screenbox.Controls.Extensions;

/// <summary>
/// Provides attached dependency properties for the <see cref="CommandBar"/> control.
/// </summary>
internal class CommandBarExtensions
{
/// <summary>
/// Attached <see cref="DependencyProperty"/> for binding a <see cref="Style"/> to the more <see cref="Button"/> of the associated <see cref="CommandBar"/>
/// </summary>
public static readonly DependencyProperty MoreButtonStyleProperty = DependencyProperty.RegisterAttached(
"MoreButtonStyle", typeof(Style), typeof(CommandBarExtensions), new PropertyMetadata(null, OnMoreButtonStylePropertyChanged));

/// <summary>
/// Gets the <see cref="Style"/> for the more <see cref="Button"/> of the associated <see cref="CommandBar"/>
/// </summary>
/// <returns>The <see cref="Style"/> associated with the <see cref="CommandBar"/> more <see cref="Button"/>.</returns>
public static Style GetMoreButtonStyle(CommandBar obj)
{
return (Style)obj.GetValue(MoreButtonStyleProperty);
}

/// <summary>
/// Sets the <see cref="Style"/> to the more <see cref="Button"/> of the associated <see cref="CommandBar"/>
/// </summary>
public static void SetMoreButtonStyle(CommandBar obj, Style value)
{
obj.SetValue(MoreButtonStyleProperty, value);
}

private static void OnCommandBarUnloaded(object sender, RoutedEventArgs args)
{
if (sender is CommandBar commandBar)
{
commandBar.Loaded -= ChangeCommandBarMoreButtonStyle;
commandBar.Unloaded -= OnCommandBarUnloaded;
}
}

private static void OnMoreButtonStylePropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs args)
{
if (sender is CommandBar commandBar)
{
commandBar.Loaded -= ChangeCommandBarMoreButtonStyle;
commandBar.Unloaded -= OnCommandBarUnloaded;

if (MoreButtonStyleProperty != null)
{
commandBar.Loaded += ChangeCommandBarMoreButtonStyle;
commandBar.Unloaded += OnCommandBarUnloaded;
}
}
}

private static void ChangeCommandBarMoreButtonStyle(object sender, RoutedEventArgs args)
{
if (sender is CommandBar commandBar)
{
Button moreButton = commandBar.FindDescendant<Button>(b => b.Name == "MoreButton");
if (moreButton != null)
{
moreButton.Style = GetMoreButtonStyle(commandBar);
}
}
}
}
9 changes: 4 additions & 5 deletions Screenbox/Controls/PlaylistView.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,18 +166,17 @@
x:Name="SelectionCommandRow"
Grid.Row="0"
Margin="{x:Bind Padding, Mode=OneWay}"
ctAnimations:Implicit.HideAnimations="{StaticResource SelectionCommandBarHideAnimations}"
ctAnimations:Implicit.ShowAnimations="{StaticResource SelectionCommandBarShowAnimations}"
ctAnimations:Implicit.HideAnimations="{StaticResource SelectionRowExitImplicitAnimation}"
ctAnimations:Implicit.ShowAnimations="{StaticResource SelectionRowEntranceImplicitAnimation}"
Opacity="0"
Visibility="Collapsed">

<Border
Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
BorderThickness="{StaticResource CommandBarFlyoutBorderThemeThickness}"
CornerRadius="{StaticResource OverlayCornerRadius}"
Shadow="{StaticResource SharedShadow}"
Translation="0,0,32" />

<CommandBar
x:Name="SelectionCommandBar"
VerticalContentAlignment="Center"
Expand Down Expand Up @@ -326,7 +325,7 @@
<ListView.KeyboardAccelerators>
<KeyboardAccelerator
Key="A"
Invoked="PlaylistListViewSelectAllKeyboardAccelerator_OnInvoked"
Invoked="SelectDeselectAllKeyboardAccelerator_OnInvoked"
Modifiers="Control" />
</ListView.KeyboardAccelerators>
<interactivity:Interaction.Behaviors>
Expand Down
17 changes: 13 additions & 4 deletions Screenbox/Controls/PlaylistView.xaml.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
using Windows.Storage;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Data;

// The User Control item template is documented at https://go.microsoft.com/fwlink/?LinkId=234236

Expand Down Expand Up @@ -137,13 +138,21 @@ private void PlaylistView_OnUnloaded(object sender, RoutedEventArgs e)
ViewModel.PropertyChanged -= ViewModelOnPropertyChanged;
}

private void PlaylistListViewSelectAllKeyboardAccelerator_OnInvoked(Windows.UI.Xaml.Input.KeyboardAccelerator sender, Windows.UI.Xaml.Input.KeyboardAcceleratorInvokedEventArgs args)
private void SelectDeselectAllKeyboardAccelerator_OnInvoked(Windows.UI.Xaml.Input.KeyboardAccelerator sender, Windows.UI.Xaml.Input.KeyboardAcceleratorInvokedEventArgs args)
{
if (PlaylistListView.Items.Count > 0)
{
MultiSelectToggle.IsChecked = true;
PlaylistListView.SelectAll();
args.Handled = true;
if (PlaylistListView.SelectedItems.Count != ViewModel.Playlist.Items.Count)
{
MultiSelectToggle.IsChecked = true;
PlaylistListView.SelectRange(new ItemIndexRange(0, (uint)PlaylistListView.Items.Count));
args.Handled = true;
}
else
{
PlaylistListView.DeselectRange(new ItemIndexRange(0, (uint)PlaylistListView.Items.Count));
args.Handled = true;
}
}
}
}
Expand Down
43 changes: 18 additions & 25 deletions Screenbox/Pages/AlbumDetailsPage.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,58 +166,48 @@
</interactivity:Interaction.Behaviors>
</TextBlock>

<!-- Wrap the CommandBar in a Grid which will host the translation animation, this ensures that clicking the more button won't break the animation. -->
<!-- Wrap the CommandBar in a Grid which will host the translation animation, this ensures that opening the overflow popup does not reset the command bar position. -->
<Grid x:Name="ButtonPanel">
<CommandBar
Margin="-4,10,0,0"
Padding="0"
Margin="-8,8,0,0"
HorizontalAlignment="Left"
extensions:CommandBarExtensions.MoreButtonStyle="{StaticResource EllipsisDefaultButtonStyle}"
AccessKey="{strings:KeyboardResources Key=CommandMoreOptionsKey}"
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" />

<!-- Values modified to align with the dimensions and layout of the default button -->
<x:Double x:Key="AppBarThemeCompactHeight">44</x:Double>
<Thickness x:Key="AppBarButtonContentViewboxMargin">16,14,0,14</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,16,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" />-->
<Thickness x:Key="AppBarEllipsisButtonInnerBorderMargin">4,8,4,8</Thickness>
<!-- Adjust margin to match the size and layout of the default button -->
<Thickness x:Key="AppBarButtonContentViewboxMargin">16,16,0,16</Thickness>
<Thickness x:Key="AppBarButtonTextLabelOnRightMargin">8,14,16,15</Thickness>
<Thickness x:Key="AppBarButtonInnerBorderMargin">4,8,4,8</Thickness>
</CommandBar.Resources>

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

<AppBarButton
HorizontalAlignment="Stretch"
BorderBrush="{ThemeResource ButtonBorderBrush}"
AccessKey="{strings:KeyboardResources Key=CommandShuffleAndPlayKey}"
Command="{x:Bind ViewModel.ShuffleAndPlayCommand}"
Icon="{ui:FontIcon FontFamily={StaticResource ScreenboxSymbolThemeFontFamily},
Glyph={StaticResource ShuffleGlyph},
MirroredWhenRightToLeft=True}"
Label="{strings:Resources Key=ShuffleAndPlay}"
Style="{StaticResource AppBarButtonDefaultButtonStyle}"
XYFocusDown="{x:Bind ItemList}"
XYFocusLeft="{x:Bind PlayButton}" />
Style="{StaticResource DefaultButtonAppBarButtonStyle}" />
</CommandBar>
</Grid>
</StackPanel>
Expand All @@ -235,8 +225,7 @@
IsItemClickEnabled="True"
ItemContainerStyle="{StaticResource MediaListViewItemStyle}"
ItemsSource="{x:Bind ViewModel.SortedItems}"
SelectionMode="None"
XYFocusUp="{x:Bind PlayButton}">
SelectionMode="None">
<ListView.ItemTemplate>
<DataTemplate>
<controls:MediaListViewItem
Expand All @@ -262,6 +251,10 @@
</interactivity:Interaction.Behaviors>
</ListView>

<interactivity:Interaction.Behaviors>
<interactions:GamepadXYNavigationBehavior />
</interactivity:Interaction.Behaviors>

<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="NavigationViewStates">
<VisualState x:Name="Expanded" />
Expand Down
43 changes: 18 additions & 25 deletions Screenbox/Pages/ArtistDetailsPage.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -247,57 +247,47 @@
</interactivity:Interaction.Behaviors>
</TextBlock>

<!-- Wrap the CommandBar in a Grid which will host the translation animation, this ensures that clicking the more button won't break the animation. -->
<!-- Wrap the CommandBar in a Grid which will host the translation animation, this ensures that opening the overflow popup does not reset the command bar position. -->
<Grid x:Name="ButtonPanel">
<CommandBar
Margin="-4,10,0,0"
Padding="0"
Margin="-8,8,0,0"
HorizontalAlignment="Left"
extensions:CommandBarExtensions.MoreButtonStyle="{StaticResource EllipsisDefaultButtonStyle}"
AccessKey="{strings:KeyboardResources Key=CommandMoreOptionsKey}"
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" />

<!-- Values modified to align with the dimensions and layout of the default button -->
<x:Double x:Key="AppBarThemeCompactHeight">44</x:Double>
<Thickness x:Key="AppBarButtonContentViewboxMargin">16,14,0,14</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,16,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" />-->
<Thickness x:Key="AppBarEllipsisButtonInnerBorderMargin">4,8,4,8</Thickness>
<!-- Adjust margin to match the size and layout of the default button -->
<Thickness x:Key="AppBarButtonContentViewboxMargin">16,16,0,16</Thickness>
<Thickness x:Key="AppBarButtonTextLabelOnRightMargin">8,14,16,15</Thickness>
<Thickness x:Key="AppBarButtonInnerBorderMargin">4,8,4,8</Thickness>
</CommandBar.Resources>

<AppBarButton
x:Name="PlayButton"
HorizontalAlignment="Stretch"
BackgroundSizing="OuterBorderEdge"
BorderBrush="{ThemeResource AccentButtonBorderBrush}"
AccessKey="{strings:KeyboardResources Key=CommandPlayKey}"
Command="{x:Bind ViewModel.PlayCommand}"
Icon="{ui:FontIcon FontFamily={StaticResource ScreenboxSymbolThemeFontFamily},
Glyph={StaticResource PlayGlyph}}"
Label="{strings:Resources Key=Play}"
Style="{StaticResource AppBarButtonAccentButtonStyle}"
XYFocusDown="{x:Bind ItemList}">
Style="{StaticResource AccentButtonAppBarButtonStyle}">
<interactivity:Interaction.Behaviors>
<interactions:AutoFocusBehavior />
</interactivity:Interaction.Behaviors>
</AppBarButton>

<AppBarButton
HorizontalAlignment="Stretch"
BorderBrush="{ThemeResource ButtonBorderBrush}"
AccessKey="{strings:KeyboardResources Key=CommandShuffleAndPlayKey}"
Command="{x:Bind ViewModel.ShuffleAndPlayCommand}"
Icon="{ui:FontIcon FontFamily={StaticResource ScreenboxSymbolThemeFontFamily},
Glyph={StaticResource ShuffleGlyph},
MirroredWhenRightToLeft=True}"
Label="{strings:Resources Key=ShuffleAndPlay}"
Style="{StaticResource AppBarButtonDefaultButtonStyle}"
XYFocusDown="{x:Bind ItemList}"
XYFocusLeft="{x:Bind PlayButton}" />
Style="{StaticResource DefaultButtonAppBarButtonStyle}" />
</CommandBar>
</Grid>
</StackPanel>
Expand All @@ -315,8 +305,7 @@
IsItemClickEnabled="True"
ItemContainerStyle="{StaticResource MediaListViewItemStyle}"
ItemsSource="{x:Bind AlbumSource.View}"
SelectionMode="None"
XYFocusUp="{x:Bind PlayButton}">
SelectionMode="None">
<ListView.ItemTemplate>
<DataTemplate>
<controls:MediaListViewItem
Expand Down Expand Up @@ -379,6 +368,10 @@
</interactivity:Interaction.Behaviors>
</ListView>

<interactivity:Interaction.Behaviors>
<interactions:GamepadXYNavigationBehavior />
</interactivity:Interaction.Behaviors>

<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="NavigationViewStates">
<VisualState x:Name="Expanded" />
Expand Down
Loading

0 comments on commit a127e0d

Please sign in to comment.