添加 SimpleStackPanel：没有间距错误的轻量级 StackPanel (#783)

* refactor: 重构 WrapPanel * feat: 添加 SimpleStackPanel * feat: SimpleStackPanel 支持水平排列 * style: 优化页面布局 1 * style: 优化页面布局 2 * style: 优化页面布局 3 * style: 优化页面布局 4
Blinue · Dec 17, 2023 · ca1a412 · ca1a412
1 parent e50b562
commit ca1a412
Show file tree

Hide file tree

Showing 28 changed files with 876 additions and 674 deletions.
diff --git a/src/Magpie.App/AboutPage.xaml b/src/Magpie.App/AboutPage.xaml
@@ -7,122 +7,116 @@
       xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
       mc:Ignorable="d">
 	<local:PageFrame x:Uid="About_PageFrame">
-		<StackPanel HorizontalAlignment="Stretch"
-		            ChildrenTransitions="{StaticResource SettingsCardsAnimations}"
-		            Orientation="Vertical">
-			<StackPanel Margin="0,10,0,0"
-			            Orientation="Vertical">
-				<StackPanel Orientation="Horizontal"
-				            Spacing="20">
+		<local:SimpleStackPanel Padding="0,4,0,0"
+		                        HorizontalAlignment="Stretch"
+		                        ChildrenTransitions="{StaticResource SettingsCardsAnimations}"
+		                        Spacing="{StaticResource SettingsGroupSpacing}">
+			<local:SimpleStackPanel Margin="0,8,0,0">
+				<local:SimpleStackPanel Orientation="Horizontal"
+				                        Spacing="20">
 					<Image Width="64"
 					       Height="64"
 					       Source="{x:Bind ViewModel.Logo, Mode=OneWay}" />
-					<StackPanel Margin="0,-4,0,0"
-					            VerticalAlignment="Center"
-					            Orientation="Vertical"
-					            Spacing="4">
+					<local:SimpleStackPanel Margin="0,-4,0,0"
+					                        VerticalAlignment="Center"
+					                        Spacing="4">
 						<TextBlock FontSize="24"
 						           Text="Magpie" />
 						<TextBlock DoubleTapped="VersionTextBlock_DoubleTapped"
 						           FontSize="{StaticResource SecondaryTextFontSize}"
 						           Foreground="{ThemeResource TextFillColorSecondaryBrush}"
 						           Text="{x:Bind ViewModel.Version, Mode=OneTime}" />
-					</StackPanel>
-				</StackPanel>
-				<StackPanel>
-					<Button Margin="0,15,0,0"
+					</local:SimpleStackPanel>
+				</local:SimpleStackPanel>
+				<local:SimpleStackPanel Spacing="12">
+					<Button Margin="0,16,0,0"
 					        Click="{x:Bind ViewModel.CheckForUpdates}"
 					        IsEnabled="{x:Bind ViewModel.IsCheckForUpdatesButtonEnabled, Mode=OneWay}"
 					        Style="{StaticResource AccentButtonStyle}">
 						<Grid>
 							<TextBlock x:Uid="About_Version_CheckForUpdates"
 							           Visibility="{x:Bind ViewModel.IsCheckingForUpdates, Mode=OneWay, Converter={StaticResource NegativeVisibilityConverter}}" />
-							<StackPanel x:Name="CheckingForUpdates"
-							            x:Load="{x:Bind ViewModel.IsCheckingForUpdates, Mode=OneWay}"
-							            Orientation="Horizontal"
-							            Spacing="8">
+							<local:SimpleStackPanel x:Name="CheckingForUpdates"
+							                        x:Load="{x:Bind ViewModel.IsCheckingForUpdates, Mode=OneWay}"
+							                        Orientation="Horizontal"
+							                        Spacing="8">
 								<muxc:ProgressRing Width="16"
 								                   Height="16"
 								                   VerticalAlignment="Center"
 								                   Foreground="White"
 								                   IsActive="True" />
 								<TextBlock x:Uid="About_Version_CheckingForUpdates"
 								           VerticalAlignment="Center" />
-							</StackPanel>
+							</local:SimpleStackPanel>
 						</Grid>
 					</Button>
-				</StackPanel>
-				<StackPanel x:Name="UpdateInfos"
-				            x:Load="{x:Bind ViewModel.IsAnyUpdateStatus, Mode=OneWay}"
-				            ChildrenTransitions="{StaticResource SettingsCardsAnimations}"
-				            Orientation="Vertical">
-					<muxc:InfoBar x:Uid="About_Version_CheckForUpdatesFailed"
-					              Margin="0,10,0,0"
-					              IsOpen="{x:Bind ViewModel.IsErrorWhileChecking, Mode=TwoWay}"
-					              Severity="Error"
-					              Visibility="{x:Bind ViewModel.IsErrorWhileChecking, Mode=OneWay}" />
-					<muxc:InfoBar x:Uid="About_Version_UpdateToDate"
-					              Margin="0,10,0,0"
-					              IsOpen="{x:Bind ViewModel.IsNoUpdate, Mode=TwoWay}"
-					              Severity="Success"
-					              Visibility="{x:Bind ViewModel.IsNoUpdate, Mode=OneWay}" />
-					<muxc:InfoBar Title="{x:Bind ViewModel.UpdateCardTitle, Mode=OneWay}"
-					              Margin="0,10,0,0"
-					              IsClosable="{x:Bind ViewModel.IsUpdateCardClosable, Mode=OneWay}"
-					              IsOpen="{x:Bind ViewModel.IsUpdateCardOpen, Mode=TwoWay}"
-					              Severity="Informational"
-					              Visibility="{x:Bind ViewModel.IsUpdateCardOpen, Mode=OneWay}">
-						<StackPanel>
-							<Grid Margin="0,0,25,16"
-							      ColumnSpacing="12"
-							      Visibility="{x:Bind ViewModel.IsDownloadingOrLater, Mode=OneWay}">
-								<Grid.ColumnDefinitions>
-									<ColumnDefinition Width="*" />
-									<ColumnDefinition Width="Auto" />
-								</Grid.ColumnDefinitions>
-								<muxc:ProgressBar Grid.Column="0"
-								                  Margin="0"
-								                  Padding="0"
-								                  VerticalAlignment="Center"
-								                  IsIndeterminate="{x:Bind ViewModel.IsNoDownloadProgress, Mode=OneWay}"
-								                  Maximum="1"
-								                  Minimum="0"
-								                  ShowError="{x:Bind ViewModel.IsErrorWhileDownloading, Mode=OneWay}"
-								                  Value="{x:Bind ViewModel.DownloadProgress, Mode=OneWay}" />
-								<StackPanel Grid.Column="1"
-								            Margin="0,-2,0,0"
-								            VerticalAlignment="Center">
-									<TextBlock x:Uid="About_Version_UpdateToDate_Downloading"
-									           Visibility="{x:Bind ViewModel.IsDownloading, Mode=OneWay}" />
-									<TextBlock x:Uid="About_Version_UpdateToDate_DownloadFailed"
-									           Margin="0,0,-48,0"
-									           Visibility="{x:Bind ViewModel.IsErrorWhileDownloading, Mode=OneWay}" />
-									<TextBlock x:Uid="About_Version_UpdateToDate_Installing"
-									           Visibility="{x:Bind ViewModel.IsInstalling, Mode=OneWay}" />
-								</StackPanel>
-							</Grid>
-							<StackPanel Margin="0,0,0,16"
-							            Orientation="Horizontal">
-								<Button x:Uid="About_Version_UpdateCard_DownloadAndInstall"
-								        Click="{x:Bind ViewModel.DownloadAndInstall}"
-								        Style="{StaticResource AccentButtonStyle}"
-								        Visibility="{x:Bind ViewModel.IsAvailable, Mode=OneWay}" />
-								<Button x:Uid="About_Version_UpdateCard_Retry"
-								        Click="{x:Bind ViewModel.Retry}"
-								        Visibility="{x:Bind ViewModel.IsErrorWhileDownloading, Mode=OneWay}" />
-								<Button x:Uid="About_Version_UpdateCard_Cancel"
-								        Click="{x:Bind ViewModel.Cancel}"
-								        IsEnabled="{x:Bind ViewModel.IsDownloading, Mode=OneWay}"
-								        Visibility="{x:Bind ViewModel.IsCancelButtonVisible, Mode=OneWay}" />
-								<HyperlinkButton x:Uid="About_Version_UpdateCard_ReleaseNotes"
-								                 Margin="8,0,0,0"
-								                 VerticalAlignment="Center"
-								                 NavigateUri="{x:Bind ViewModel.UpdateReleaseNotesLink, Mode=OneWay}" />
-							</StackPanel>
-						</StackPanel>
-					</muxc:InfoBar>
-				</StackPanel>
-			</StackPanel>
+					<Grid x:Name="UpdateInfos"
+					      x:Load="{x:Bind ViewModel.IsAnyUpdateStatus, Mode=OneWay}">
+						<muxc:InfoBar x:Uid="About_Version_CheckForUpdatesFailed"
+						              IsOpen="{x:Bind ViewModel.IsErrorWhileChecking, Mode=TwoWay}"
+						              Severity="Error"
+						              Visibility="{x:Bind ViewModel.IsErrorWhileChecking, Mode=OneWay}" />
+						<muxc:InfoBar x:Uid="About_Version_UpdateToDate"
+						              IsOpen="{x:Bind ViewModel.IsNoUpdate, Mode=TwoWay}"
+						              Severity="Success"
+						              Visibility="{x:Bind ViewModel.IsNoUpdate, Mode=OneWay}" />
+						<muxc:InfoBar Title="{x:Bind ViewModel.UpdateCardTitle, Mode=OneWay}"
+						              IsClosable="{x:Bind ViewModel.IsUpdateCardClosable, Mode=OneWay}"
+						              IsOpen="{x:Bind ViewModel.IsUpdateCardOpen, Mode=TwoWay}"
+						              Severity="Informational"
+						              Visibility="{x:Bind ViewModel.IsUpdateCardOpen, Mode=OneWay}">
+							<local:SimpleStackPanel>
+								<Grid Margin="0,0,25,16"
+								      ColumnSpacing="12"
+								      Visibility="{x:Bind ViewModel.IsDownloadingOrLater, Mode=OneWay}">
+									<Grid.ColumnDefinitions>
+										<ColumnDefinition Width="*" />
+										<ColumnDefinition Width="Auto" />
+									</Grid.ColumnDefinitions>
+									<muxc:ProgressBar Grid.Column="0"
+									                  Margin="0"
+									                  Padding="0"
+									                  VerticalAlignment="Center"
+									                  IsIndeterminate="{x:Bind ViewModel.IsNoDownloadProgress, Mode=OneWay}"
+									                  Maximum="1"
+									                  Minimum="0"
+									                  ShowError="{x:Bind ViewModel.IsErrorWhileDownloading, Mode=OneWay}"
+									                  Value="{x:Bind ViewModel.DownloadProgress, Mode=OneWay}" />
+									<local:SimpleStackPanel Grid.Column="1"
+									                        Margin="0,-2,0,0"
+									                        VerticalAlignment="Center">
+										<TextBlock x:Uid="About_Version_UpdateToDate_Downloading"
+										           Visibility="{x:Bind ViewModel.IsDownloading, Mode=OneWay}" />
+										<TextBlock x:Uid="About_Version_UpdateToDate_DownloadFailed"
+										           Margin="0,0,-48,0"
+										           Visibility="{x:Bind ViewModel.IsErrorWhileDownloading, Mode=OneWay}" />
+										<TextBlock x:Uid="About_Version_UpdateToDate_Installing"
+										           Visibility="{x:Bind ViewModel.IsInstalling, Mode=OneWay}" />
+									</local:SimpleStackPanel>
+								</Grid>
+								<local:SimpleStackPanel Margin="0,0,0,16"
+								                        Orientation="Horizontal">
+									<Button x:Uid="About_Version_UpdateCard_DownloadAndInstall"
+									        Click="{x:Bind ViewModel.DownloadAndInstall}"
+									        Style="{StaticResource AccentButtonStyle}"
+									        Visibility="{x:Bind ViewModel.IsAvailable, Mode=OneWay}" />
+									<Button x:Uid="About_Version_UpdateCard_Retry"
+									        Click="{x:Bind ViewModel.Retry}"
+									        Visibility="{x:Bind ViewModel.IsErrorWhileDownloading, Mode=OneWay}" />
+									<Button x:Uid="About_Version_UpdateCard_Cancel"
+									        Click="{x:Bind ViewModel.Cancel}"
+									        IsEnabled="{x:Bind ViewModel.IsDownloading, Mode=OneWay}"
+									        Visibility="{x:Bind ViewModel.IsCancelButtonVisible, Mode=OneWay}" />
+									<HyperlinkButton x:Uid="About_Version_UpdateCard_ReleaseNotes"
+									                 Margin="8,0,0,0"
+									                 VerticalAlignment="Center"
+									                 NavigateUri="{x:Bind ViewModel.UpdateReleaseNotesLink, Mode=OneWay}" />
+								</local:SimpleStackPanel>
+							</local:SimpleStackPanel>
+						</muxc:InfoBar>
+					</Grid>
+				</local:SimpleStackPanel>
+			</local:SimpleStackPanel>
 			<local:SettingsGroup x:Uid="About_Version_UpdateSettings">
 				<local:SettingsCard x:Uid="About_Version_UpdateSettings_AutoCheckForUpdates">
 					<local:SettingsCard.HeaderIcon>
@@ -190,6 +184,6 @@
 					</HyperlinkButton>
 				</local:WrapPanel>
 			</local:SettingsGroup>
-		</StackPanel>
+		</local:SimpleStackPanel>
 	</local:PageFrame>
 </Page>
diff --git a/src/Magpie.App/App.idl b/src/Magpie.App/App.idl
@@ -9,6 +9,7 @@ namespace Magpie.App {
 #include "IsNullStateTrigger.idl"
 #include "LoggerHelper.idl"
 #include "TextBlockHelper.idl"
+#include "SimpleStackPanel.idl"
 #include "WrapPanel.idl"
 #include "PageFrame.idl"
 #include "SettingsCard.idl"

diff --git a/src/Magpie.App/App.xaml b/src/Magpie.App/App.xaml
@@ -23,10 +23,7 @@
 			</TransitionCollection>
 
 			<x:Double x:Key="SettingsCardSpacing">2</x:Double>
-
-			<Style TargetType="FontIcon">
-				<Setter Property="FontFamily" Value="{StaticResource SymbolThemeFontFamily}" />
-			</Style>
+			<x:Double x:Key="SettingsGroupSpacing">32</x:Double>
 
 			<x:Double x:Key="StandardIconSize">14</x:Double>
 

diff --git a/src/Magpie.App/CaptionButtonsControl.cpp b/src/Magpie.App/CaptionButtonsControl.cpp
@@ -6,7 +6,7 @@
 
 namespace winrt::Magpie::App::implementation {
 
-Size CaptionButtonsControl::CaptionButtonSize() const noexcept {
+Size CaptionButtonsControl::CaptionButtonSize() const {
 	ResourceDictionary resources = Resources();
 	return {
 		(float)unbox_value<double>(resources.Lookup(box_value(L"CaptionButtonWidth"))),

diff --git a/src/Magpie.App/CaptionButtonsControl.h b/src/Magpie.App/CaptionButtonsControl.h
@@ -4,9 +4,7 @@
 namespace winrt::Magpie::App::implementation {
 
 struct CaptionButtonsControl : CaptionButtonsControlT<CaptionButtonsControl> {
-	CaptionButtonsControl() {}
-
-	Size CaptionButtonSize() const noexcept;
+	Size CaptionButtonSize() const;
 
 	void HoverButton(CaptionButton button);
 

diff --git a/src/Magpie.App/CaptionButtonsControl.idl b/src/Magpie.App/CaptionButtonsControl.idl
@@ -5,7 +5,7 @@ namespace Magpie.App {
 		Close = 20      // HTCLOSE
 	};
 
-	runtimeclass CaptionButtonsControl : Windows.UI.Xaml.Controls.StackPanel {
+	runtimeclass CaptionButtonsControl : Windows.UI.Xaml.Controls.UserControl {
 		CaptionButtonsControl();
 
 		Windows.Foundation.Size CaptionButtonSize { get; };

diff --git a/src/Magpie.App/CaptionButtonsControl.xaml b/src/Magpie.App/CaptionButtonsControl.xaml
@@ -1,13 +1,12 @@
-<StackPanel x:Class="Magpie.App.CaptionButtonsControl"
-            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-            xmlns:local="using:Magpie.App"
-            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-            Background="Transparent"
-            Orientation="Horizontal"
-            mc:Ignorable="d">
-	<StackPanel.Resources>
+<UserControl x:Class="Magpie.App.CaptionButtonsControl"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:local="using:Magpie.App"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             Background="Transparent"
+             mc:Ignorable="d">
+	<UserControl.Resources>
 		<ResourceDictionary>
 			<ResourceDictionary.ThemeDictionaries>
 				<ResourceDictionary x:Key="Light">
@@ -56,10 +55,7 @@
 			<x:Double x:Key="CaptionButtonWidth">46</x:Double>
 			<x:Double x:Key="CaptionButtonHeight">32</x:Double>
 
-			<!--
-				Initializes the string to the close button glyph.
-				Each specific button overrides it as needed.
-			-->
+			<!--  默认为关闭图标，每个按钮按需覆盖  -->
 			<x:String x:Key="CaptionButtonGlyph">&#xE8BB;</x:String>
 
 			<Style x:Key="CaptionButton"
@@ -134,38 +130,40 @@
 				</Setter>
 			</Style>
 		</ResourceDictionary>
-	</StackPanel.Resources>
+	</UserControl.Resources>
 
-	<Button x:Name="MinimizeButton"
-	        Style="{StaticResource CaptionButton}">
-		<Button.Resources>
-			<x:String x:Key="CaptionButtonGlyph">&#xE921;</x:String>
-		</Button.Resources>
-	</Button>
-	<Button x:Name="MaximizeButton"
-	        Style="{StaticResource CaptionButton}">
-		<Button.Resources>
-			<x:String x:Key="CaptionButtonGlyph">&#xE922;</x:String>
-		</Button.Resources>
-	</Button>
-	<Button x:Name="CloseButton"
-	        Style="{StaticResource CaptionButton}">
-		<Button.Resources>
-			<ResourceDictionary>
-				<x:String x:Key="CaptionButtonGlyph">&#xE8BB;</x:String>
+	<local:SimpleStackPanel Orientation="Horizontal">
+		<Button x:Name="MinimizeButton"
+		        Style="{StaticResource CaptionButton}">
+			<Button.Resources>
+				<x:String x:Key="CaptionButtonGlyph">&#xE921;</x:String>
+			</Button.Resources>
+		</Button>
+		<Button x:Name="MaximizeButton"
+		        Style="{StaticResource CaptionButton}">
+			<Button.Resources>
+				<x:String x:Key="CaptionButtonGlyph">&#xE922;</x:String>
+			</Button.Resources>
+		</Button>
+		<Button x:Name="CloseButton"
+		        Style="{StaticResource CaptionButton}">
+			<Button.Resources>
+				<ResourceDictionary>
+					<x:String x:Key="CaptionButtonGlyph">&#xE8BB;</x:String>
 
-				<Color x:Key="CloseButtonColor">#C42B1C</Color>
-				<SolidColorBrush x:Key="CaptionButtonBackgroundPointerOver"
-				                 Color="{StaticResource CloseButtonColor}" />
-				<SolidColorBrush x:Key="CaptionButtonBackgroundPressed"
-				                 Opacity="0.9"
-				                 Color="{StaticResource CloseButtonColor}" />
-				<SolidColorBrush x:Key="CaptionButtonForegroundPointerOver"
-				                 Color="White" />
-				<SolidColorBrush x:Key="CaptionButtonForegroundPressed"
-				                 Opacity="0.7"
-				                 Color="White" />
-			</ResourceDictionary>
-		</Button.Resources>
-	</Button>
-</StackPanel>
+					<Color x:Key="CloseButtonColor">#C42B1C</Color>
+					<SolidColorBrush x:Key="CaptionButtonBackgroundPointerOver"
+					                 Color="{StaticResource CloseButtonColor}" />
+					<SolidColorBrush x:Key="CaptionButtonBackgroundPressed"
+					                 Opacity="0.9"
+					                 Color="{StaticResource CloseButtonColor}" />
+					<SolidColorBrush x:Key="CaptionButtonForegroundPointerOver"
+					                 Color="White" />
+					<SolidColorBrush x:Key="CaptionButtonForegroundPressed"
+					                 Opacity="0.7"
+					                 Color="White" />
+				</ResourceDictionary>
+			</Button.Resources>
+		</Button>
+	</local:SimpleStackPanel>
+</UserControl>