elmgates/BetterLyrics
1
0
Fork 0
mirror of https://github.com/jayfunc/BetterLyrics.git synced 2026-01-12 19:24:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

chores: improve layout

Browse Source
This commit is contained in:
Zhe Fang
2025-11-30 10:23:31 -05:00
parent 5b5d62d688
commit be9a67f57d
6 changed files with 64 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
BetterLyrics.WinUI3/BetterLyrics.WinUI3/Controls/AlbumArtLayoutSettingsControl.xaml
View File

@@ -16,16 +16,18 @@
<Grid Style="{StaticResource SettingsGridStyle}">
<StackPanel Spacing="{StaticResource SettingsCardSpacing}">
<TextBlock x:Uid="SettingsPageAlbumArt" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />
<TextBlock Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />
<dev:SettingsCard x:Uid="SettingsPageAlignment" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE8E3;}">
<ComboBox SelectedIndex="{x:Bind AlbumArtLayoutSettings.AlbumArtAlignmentType, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
<ComboBox SelectedIndex="{x:Bind AlbumArtLayoutSettings.SongInfoAlignmentType, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
<ComboBoxItem x:Uid="SettingsPageLeft" />
<ComboBoxItem x:Uid="SettingsPageCenter" />
<ComboBoxItem x:Uid="SettingsPageRight" />
</ComboBox>
</dev:SettingsCard>
<TextBlock x:Uid="SettingsPageAlbumArt" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />
<dev:SettingsCard x:Uid="SettingsPageAlbumRadius" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xEA3A;}">
<local:ExtendedSlider
Default="12"
@@ -45,14 +47,6 @@
<TextBlock x:Uid="SettingsPageSongInfo" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />
<dev:SettingsCard x:Uid="SettingsPageAlignment" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE8E3;}">
<ComboBox SelectedIndex="{x:Bind AlbumArtLayoutSettings.SongInfoAlignmentType, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
<ComboBoxItem x:Uid="SettingsPageLeft" />
<ComboBoxItem x:Uid="SettingsPageCenter" />
<ComboBoxItem x:Uid="SettingsPageRight" />
</ComboBox>
</dev:SettingsCard>
<dev:SettingsExpander
x:Uid="SettingsPageLyricsFontSize"
HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily},

4
BetterLyrics.WinUI3/BetterLyrics.WinUI3/Controls/LyricsWindowSettingsControl.xaml
View File

@@ -404,10 +404,6 @@
</dev:SettingsExpander.Items>
</dev:SettingsExpander>
<dev:SettingsCard x:Uid="SettingsPageShowLayoutDragger">
<ToggleSwitch IsOn="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.ShowLayoutIndicator, Mode=TwoWay}" />
</dev:SettingsCard>
</StackPanel>
</Grid>
</ScrollViewer>

2
BetterLyrics.WinUI3/BetterLyrics.WinUI3/Models/LyricsWindowStatus.cs
View File

@@ -42,8 +42,6 @@ namespace BetterLyrics.WinUI3.Models
[ObservableProperty][NotifyPropertyChangedRecipients] public partial double WindowWidth { get; set; } = 800;
[ObservableProperty][NotifyPropertyChangedRecipients] public partial double WindowHeight { get; set; } = 500;
[ObservableProperty][NotifyPropertyChangedRecipients] public partial bool ShowLayoutIndicator { get; set; } = false;
public LyricsWindowStatus()
{
UpdateMonitorNameAndBounds();

2
BetterLyrics.WinUI3/BetterLyrics.WinUI3/Models/Settings/AlbumArtLayoutSettings.cs
View File

@@ -8,7 +8,6 @@ namespace BetterLyrics.WinUI3.Models.Settings
public partial class AlbumArtLayoutSettings : ObservableRecipient, ICloneable
{
[ObservableProperty][NotifyPropertyChangedRecipients] public partial TextAlignmentType SongInfoAlignmentType { get; set; } = TextAlignmentType.Left;
[ObservableProperty][NotifyPropertyChangedRecipients] public partial HorizontalAlignment AlbumArtAlignmentType { get; set; } = HorizontalAlignment.Center;
[ObservableProperty][NotifyPropertyChangedRecipients] public partial int CoverImageRadius { get; set; } = 12; // 12 % of the cover image size
[ObservableProperty][NotifyPropertyChangedRecipients] public partial int CoverImageShadowAmount { get; set; } = 12;
@@ -26,7 +25,6 @@ namespace BetterLyrics.WinUI3.Models.Settings
return new AlbumArtLayoutSettings
{
SongInfoAlignmentType = this.SongInfoAlignmentType,
AlbumArtAlignmentType = this.AlbumArtAlignmentType,
CoverImageRadius = this.CoverImageRadius,
CoverImageShadowAmount = this.CoverImageShadowAmount,
IsAutoSongInfoFontSize = this.IsAutoSongInfoFontSize,

165
BetterLyrics.WinUI3/BetterLyrics.WinUI3/Views/LyricsPage.xaml
View File

@@ -31,11 +31,9 @@
<Grid x:Name="TrackSummaryGridContainer" Loaded="TrackSummaryGridContainer_Loaded">
<Grid.RowDefinitions>
<RowDefinition x:Name="TopGapDef" Height="0" />
<RowDefinition x:Name="TrackSummaryRowDef" Height="*" />
<RowDefinition x:Name="MiddleGapRowDef" Height="0" />
<RowDefinition x:Name="LyricsRowDef" Height="4*" />
<RowDefinition x:Name="BottomGapDef" Height="0" />
<RowDefinition x:Name="LyricsRowDef" Height="2.5*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="LeftGapDef" Width="0" />
@@ -48,7 +46,7 @@
<!-- Album art and song info area -->
<Grid
x:Name="TrackSummaryGrid"
Grid.Row="1"
Grid.Row="0"
Grid.Column="1"
VerticalAlignment="Center"
SizeChanged="TrackSummaryGrid_SizeChanged">
@@ -73,7 +71,7 @@
x:Name="AlbumArtGrid"
Margin="-32"
Padding="32"
HorizontalAlignment="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.AlbumArtLayoutSettings.AlbumArtAlignmentType, Mode=OneWay}">
HorizontalAlignment="{Binding ElementName=SongInfoStackPanel, Path=HorizontalAlignment, Mode=OneWay}">
<Grid.OpacityTransition>
<ScalarTransition Duration="{x:Bind const:Time.AnimationDuration}" />
</Grid.OpacityTransition>
@@ -187,167 +185,12 @@
<Grid
x:Name="LyricsPlaceholder"
Grid.Row="3"
Grid.Row="2"
Grid.Column="3"
SizeChanged="LyricsPlaceholder_SizeChanged" />
</Grid>
<!-- 布局因子调控指示器 -->
<Grid Visibility="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.ShowLayoutIndicator, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}">
<Grid.RowDefinitions>
<RowDefinition Height="{Binding ElementName=TopGapDef, Path=Height, Mode=OneWay}" />
<RowDefinition Height="{Binding ElementName=TrackSummaryRowDef, Path=Height, Mode=OneWay}" />
<RowDefinition Height="{Binding ElementName=MiddleGapRowDef, Path=Height, Mode=OneWay}" />
<RowDefinition Height="{Binding ElementName=LyricsRowDef, Path=Height, Mode=OneWay}" />
<RowDefinition Height="{Binding ElementName=BottomGapDef, Path=Height, Mode=OneWay}" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding ElementName=LeftGapDef, Path=Width, Mode=OneWay}" />
<ColumnDefinition Width="{Binding ElementName=TrackSummaryColDef, Path=Width, Mode=OneWay}" />
<ColumnDefinition Width="{Binding ElementName=MiddleGapColDef, Path=Width, Mode=OneWay}" />
<ColumnDefinition Width="{Binding ElementName=LyricsColDef, Path=Width, Mode=OneWay}" />
<ColumnDefinition Width="{Binding ElementName=RightGapDef, Path=Width, Mode=OneWay}" />
</Grid.ColumnDefinitions>
<!-- 垂直布局指示器 -->
<Grid
Grid.Row="1"
Grid.RowSpan="3"
Grid.Column="1"
Grid.ColumnSpan="3">
<interactivity:Interaction.Behaviors>
<interactivity:DataTriggerBehavior
Binding="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.LyricsLayoutOrientation, Converter={StaticResource EnumToIntConverter}, Mode=OneWay}"
ComparisonCondition="Equal"
Value="1">
<interactivity:ChangePropertyAction PropertyName="Visibility" Value="Visible" />
</interactivity:DataTriggerBehavior>
<interactivity:DataTriggerBehavior
Binding="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.LyricsLayoutOrientation, Converter={StaticResource EnumToIntConverter}, Mode=OneWay}"
ComparisonCondition="Equal"
Value="0">
<interactivity:ChangePropertyAction PropertyName="Visibility" Value="Collapsed" />
</interactivity:DataTriggerBehavior>
</interactivity:Interaction.Behaviors>
<Grid.RowDefinitions>
<RowDefinition Height="{Binding ElementName=TrackSummaryRowDef, Path=Height, Mode=OneWay}" />
<RowDefinition Height="{Binding ElementName=MiddleGapRowDef, Path=Height, Mode=OneWay}" />
<RowDefinition Height="{Binding ElementName=LyricsRowDef, Path=Height, Mode=OneWay}" />
</Grid.RowDefinitions>
<Grid
Grid.Row="1"
Background="{ThemeResource AccentAcrylicBackgroundFillColorDefaultBrush}"
Opacity="0.5" />
<Grid
Grid.Row="2"
Background="{ThemeResource AccentAcrylicBackgroundFillColorBaseBrush}"
Opacity="0.5" />
</Grid>
<!-- 水平布局指示器 -->
<Grid
Grid.Row="1"
Grid.RowSpan="3"
Grid.Column="1"
Grid.ColumnSpan="3">
<interactivity:Interaction.Behaviors>
<interactivity:DataTriggerBehavior
Binding="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.LyricsLayoutOrientation, Converter={StaticResource EnumToIntConverter}, Mode=OneWay}"
ComparisonCondition="Equal"
Value="0">
<interactivity:ChangePropertyAction PropertyName="Visibility" Value="Visible" />
</interactivity:DataTriggerBehavior>
<interactivity:DataTriggerBehavior
Binding="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.LyricsLayoutOrientation, Converter={StaticResource EnumToIntConverter}, Mode=OneWay}"
ComparisonCondition="Equal"
Value="1">
<interactivity:ChangePropertyAction PropertyName="Visibility" Value="Collapsed" />
</interactivity:DataTriggerBehavior>
</interactivity:Interaction.Behaviors>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding ElementName=TrackSummaryColDef, Path=Width, Mode=OneWay}" />
<ColumnDefinition Width="{Binding ElementName=MiddleGapColDef, Path=Width, Mode=OneWay}" />
<ColumnDefinition Width="{Binding ElementName=LyricsColDef, Path=Width, Mode=OneWay}" />
</Grid.ColumnDefinitions>
<Grid
Grid.Column="1"
Background="{ThemeResource AccentAcrylicBackgroundFillColorDefaultBrush}"
Opacity="0.5" />
<Grid
Grid.Column="2"
Background="{ThemeResource AccentAcrylicBackgroundFillColorBaseBrush}"
Opacity="0.5" />
</Grid>
<!-- 垂直专辑区域布局指示器 -->
<Grid
Grid.Row="1"
Grid.RowSpan="3"
Grid.Column="1">
<interactivity:Interaction.Behaviors>
<interactivity:DataTriggerBehavior
Binding="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.LyricsLayoutOrientation, Converter={StaticResource EnumToIntConverter}, Mode=OneWay}"
ComparisonCondition="Equal"
Value="0">
<interactivity:ChangePropertyAction PropertyName="Visibility" Value="Visible" />
</interactivity:DataTriggerBehavior>
<interactivity:DataTriggerBehavior
Binding="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.LyricsLayoutOrientation, Converter={StaticResource EnumToIntConverter}, Mode=OneWay}"
ComparisonCondition="Equal"
Value="1">
<interactivity:ChangePropertyAction PropertyName="Visibility" Value="Collapsed" />
</interactivity:DataTriggerBehavior>
</interactivity:Interaction.Behaviors>
<Grid.RowDefinitions>
<RowDefinition Height="{Binding ElementName=AlbumArtRowDef, Path=Height, Mode=OneWay}" />
<RowDefinition Height="{Binding ElementName=SongInfoRowDef, Path=Height, Mode=OneWay}" />
</Grid.RowDefinitions>
<Grid
Grid.Row="0"
Background="{ThemeResource AccentAAFillColorSecondaryBrush}"
Opacity="0.5" />
<Grid
Grid.Row="1"
Background="{ThemeResource AccentAAFillColorTertiaryBrush}"
Opacity="0.5" />
</Grid>
<!-- 水平专辑区域布局指示器 -->
<Grid
Grid.Row="1"
Grid.Column="1"
Grid.ColumnSpan="3">
<interactivity:Interaction.Behaviors>
<interactivity:DataTriggerBehavior
Binding="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.LyricsLayoutOrientation, Converter={StaticResource EnumToIntConverter}, Mode=OneWay}"
ComparisonCondition="Equal"
Value="1">
<interactivity:ChangePropertyAction PropertyName="Visibility" Value="Visible" />
</interactivity:DataTriggerBehavior>
<interactivity:DataTriggerBehavior
Binding="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.LyricsLayoutOrientation, Converter={StaticResource EnumToIntConverter}, Mode=OneWay}"
ComparisonCondition="Equal"
Value="0">
<interactivity:ChangePropertyAction PropertyName="Visibility" Value="Collapsed" />
</interactivity:DataTriggerBehavior>
</interactivity:Interaction.Behaviors>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding ElementName=AlbumArtColDef, Path=Width, Mode=OneWay}" />
<ColumnDefinition Width="{Binding ElementName=SongInfoColDef, Path=Width, Mode=OneWay}" />
</Grid.ColumnDefinitions>
<Grid
Grid.Column="0"
Background="{ThemeResource AccentAAFillColorSecondaryBrush}"
Opacity="0.5" />
<Grid
Grid.Column="1"
Background="{ThemeResource AccentAAFillColorTertiaryBrush}"
Opacity="0.5" />
</Grid>
</Grid>
<!-- Bottom command area -->
<Grid
x:Name="BottomCommandGrid"

90
BetterLyrics.WinUI3/BetterLyrics.WinUI3/Views/LyricsPage.xaml.cs
View File

@@ -21,6 +21,7 @@ using Microsoft.UI.Xaml.Media.Imaging;
using System;
using System.Numerics;
using System.Threading.Tasks;
using System.Windows.Media.Media3D;
namespace BetterLyrics.WinUI3.Views
{
@@ -235,8 +236,8 @@ namespace BetterLyrics.WinUI3.Views
Grid.SetColumnSpan(SongInfoStackPanel, 3);
break;
case LyricsLayoutOrientation.Vertical:
Grid.SetRow(SongInfoStackPanel, 0);
Grid.SetRowSpan(SongInfoStackPanel, 5);
Grid.SetRow(SongInfoStackPanel, 1);
Grid.SetRowSpan(SongInfoStackPanel, 3);
Grid.SetColumn(SongInfoStackPanel, 2);
Grid.SetColumnSpan(SongInfoStackPanel, 1);
break;
@@ -259,8 +260,8 @@ namespace BetterLyrics.WinUI3.Views
Grid.SetColumnSpan(AlbumArtGrid, 3);
break;
case LyricsLayoutOrientation.Vertical:
Grid.SetRow(AlbumArtGrid, 0);
Grid.SetRowSpan(AlbumArtGrid, 5);
Grid.SetRow(AlbumArtGrid, 1);
Grid.SetRowSpan(AlbumArtGrid, 3);
Grid.SetColumn(AlbumArtGrid, 0);
Grid.SetColumnSpan(AlbumArtGrid, 1);
break;
@@ -296,7 +297,7 @@ namespace BetterLyrics.WinUI3.Views
break;
case LyricsDisplayType.LyricsOnly:
NowPlayingCanvas.LyricsStartX = LeftGapDef.ActualWidth;
NowPlayingCanvas.LyricsStartY = TopGapDef.ActualHeight;
NowPlayingCanvas.LyricsStartY = 0;
NowPlayingCanvas.LyricsWidth = TrackSummaryColDef.ActualWidth + MiddleGapColDef.ActualWidth + LyricsColDef.ActualWidth;
NowPlayingCanvas.LyricsHeight = TrackSummaryRowDef.ActualHeight + MiddleGapRowDef.ActualHeight + LyricsRowDef.ActualHeight;
break;
@@ -305,13 +306,13 @@ namespace BetterLyrics.WinUI3.Views
{
case LyricsLayoutOrientation.Horizontal:
NowPlayingCanvas.LyricsStartX = LeftGapDef.ActualWidth + TrackSummaryColDef.ActualWidth + MiddleGapColDef.ActualWidth;
NowPlayingCanvas.LyricsStartY = TopGapDef.ActualHeight;
NowPlayingCanvas.LyricsStartY = 0;
NowPlayingCanvas.LyricsWidth = LyricsColDef.ActualWidth;
NowPlayingCanvas.LyricsHeight = TrackSummaryRowDef.ActualHeight + MiddleGapRowDef.ActualHeight + LyricsRowDef.ActualHeight;
break;
case LyricsLayoutOrientation.Vertical:
NowPlayingCanvas.LyricsStartX = LeftGapDef.ActualWidth;
NowPlayingCanvas.LyricsStartY = TopGapDef.ActualHeight + TrackSummaryRowDef.ActualHeight + MiddleGapRowDef.ActualHeight;
NowPlayingCanvas.LyricsStartY = TrackSummaryRowDef.ActualHeight + MiddleGapRowDef.ActualHeight;
NowPlayingCanvas.LyricsWidth = TrackSummaryColDef.ActualWidth + MiddleGapColDef.ActualWidth + LyricsColDef.ActualWidth;
NowPlayingCanvas.LyricsHeight = LyricsRowDef.ActualHeight;
break;
@@ -326,31 +327,12 @@ namespace BetterLyrics.WinUI3.Views
// ====
private void OnLayoutChanged()
private void UpdateGap()
{
UpdateSongInfoOpacity();
var status = _liveStatesService.LiveStates.LyricsWindowStatus;
UpdateAlbumArtShadow();
UpdateAlbumArtOpacity();
UpdateTrackSummaryGridSpan();
UpdateAlbumArtGridSpan();
UpdateSongInfoStackPanelSpan();
UpdateLyricsOpacity();
UpdateLyricsLayout();
UpdateAlbumArtCornerRadius();
}
// ====
private void RootGrid_SizeChanged(object sender, SizeChangedEventArgs e)
{
var width = e.NewSize.Width;
var height = e.NewSize.Height;
double height = RootGrid.ActualHeight;
double width = RootGrid.ActualWidth;
double xMargin = 0;
double yMargin = 0;
@@ -375,14 +357,54 @@ namespace BetterLyrics.WinUI3.Views
gapBetweenAlbumArtAndSongInfo = GetTitleFontSize() / 2;
}
xMargin = Math.Max(16, width * 0.1);
yMargin = Math.Max(16, height * 0.15);
switch (status.LyricsLayoutOrientation)
{
case LyricsLayoutOrientation.Horizontal:
xMargin = Math.Max(16, Math.Min(width, height) * 0.3);
yMargin = Math.Max(16, Math.Min(width, height) * 0.15);
break;
case LyricsLayoutOrientation.Vertical:
xMargin = Math.Max(16, Math.Min(width, height) * 0.05);
yMargin = xMargin;
break;
default:
break;
}
LeftGapDef.Width = RightGapDef.Width = new(xMargin);
MiddleGapColDef.Width = new(middleGapCol);
TrackSummaryGridRow0.Height = TrackSummaryGridRow4.Height = new(yMargin);
TrackSummaryGridRow2.Height = new(gapBetweenAlbumArtAndSongInfo);
LeftGapDef.Width = RightGapDef.Width = new(xMargin);
TrackSummaryGridCol1.Width = TrackSummaryGridRow2.Height = new(gapBetweenAlbumArtAndSongInfo);
}
private void OnLayoutChanged()
{
UpdateSongInfoOpacity();
UpdateAlbumArtShadow();
UpdateAlbumArtOpacity();
UpdateTrackSummaryGridSpan();
UpdateAlbumArtGridSpan();
UpdateSongInfoStackPanelSpan();
UpdateLyricsOpacity();
UpdateLyricsLayout();
UpdateAlbumArtCornerRadius();
UpdateGap();
}
// ====
private void RootGrid_SizeChanged(object sender, SizeChangedEventArgs e)
{
var width = e.NewSize.Width;
var height = e.NewSize.Height;
RenderSongInfo();
OnLayoutChanged();