feat: 只对特定SettingsCard启用自动切换布局的功能

Blinue · Dec 10, 2023 · edab456 · edab456
1 parent c120e4d
commit edab456
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 9 deletions.
diff --git a/src/Magpie.App/ProfilePage.xaml b/src/Magpie.App/ProfilePage.xaml
@@ -165,15 +165,17 @@
 		            Orientation="Vertical">
 			<local:SettingsGroup x:Uid="Profile_General"
 			                     Margin="0,-24,0,0">
-				<local:SettingsCard2 x:Uid="Profile_General_ScalingMode">
+				<local:SettingsCard2 x:Uid="Profile_General_ScalingMode"
+				                     IsWrapEnabled="True">
 					<local:SettingsCard2.HeaderIcon>
 						<FontIcon Glyph="&#xE740;" />
 					</local:SettingsCard2.HeaderIcon>
 					<ComboBox DropDownOpened="ComboBox_DropDownOpened"
 					          ItemsSource="{x:Bind ViewModel.ScalingModes, Mode=OneTime}"
 					          SelectedIndex="{x:Bind ViewModel.ScalingMode, Mode=TwoWay}" />
 				</local:SettingsCard2>
-				<local:SettingsCard2 x:Uid="Profile_General_CaptureMethod">
+				<local:SettingsCard2 x:Uid="Profile_General_CaptureMethod"
+				                     IsWrapEnabled="True">
 					<local:SettingsCard2.HeaderIcon>
 						<FontIcon Glyph="&#xE9A6;" />
 					</local:SettingsCard2.HeaderIcon>
@@ -203,7 +205,8 @@
 					<local:SettingsCard2 x:Name="MultimonitorSettingsCard"
 					                     x:Uid="Profile_General_Multimonitor"
 					                     Margin="0,2,0,0"
-					                     x:Load="{x:Bind ViewModel.HasMultipleMonitors, Mode=OneTime}">
+					                     x:Load="{x:Bind ViewModel.HasMultipleMonitors, Mode=OneTime}"
+					                     IsWrapEnabled="True">
 						<local:SettingsCard2.HeaderIcon>
 							<FontIcon Glyph="&#xf5a9;" />
 						</local:SettingsCard2.HeaderIcon>
@@ -221,7 +224,8 @@
 					<local:SettingsCard2 x:Name="GraphicsCardSettingsCard"
 					                     x:Uid="Profile_Performance_GraphicsCard"
 					                     Margin="0,0,0,2"
-					                     x:Load="{x:Bind ViewModel.IsShowGraphicsCardSettingsCard, Mode=OneTime}">
+					                     x:Load="{x:Bind ViewModel.IsShowGraphicsCardSettingsCard, Mode=OneTime}"
+					                     IsWrapEnabled="True">
 						<local:SettingsCard2.HeaderIcon>
 							<FontIcon Glyph="&#xf211;" />
 						</local:SettingsCard2.HeaderIcon>
@@ -503,7 +507,7 @@
 					</local:SettingsCard2>
 					<local:SettingsCard2 x:Uid="Profile_Advanced_DisableDirectFlip">
 						<ToggleSwitch x:Uid="ToggleSwitch"
-							              IsOn="{x:Bind ViewModel.IsDisableDirectFlip, Mode=TwoWay}" />
+						              IsOn="{x:Bind ViewModel.IsDisableDirectFlip, Mode=TwoWay}" />
 					</local:SettingsCard2>
 				</StackPanel>
 			</local:SettingsGroup>

diff --git a/src/Magpie.App/SettingsCard2.cpp b/src/Magpie.App/SettingsCard2.cpp
@@ -37,6 +37,9 @@ constexpr const wchar_t* HeaderPresenter = L"PART_HeaderPresenter";
 constexpr const wchar_t* DescriptionPresenter = L"PART_DescriptionPresenter";
 constexpr const wchar_t* HeaderIconPresenterHolder = L"PART_HeaderIconPresenterHolder";
 
+constexpr const wchar_t* RightWrappedTrigger = L"RightWrappedTrigger";
+constexpr const wchar_t* RightWrappedNoIconTrigger = L"RightWrappedNoIconTrigger";
+
 const DependencyProperty SettingsCard2::_headerProperty = DependencyProperty::Register(
 	L"Header",
 	xaml_typename<IInspectable>(),
@@ -93,6 +96,13 @@ const DependencyProperty SettingsCard2::_isActionIconVisibleProperty = Dependenc
 	PropertyMetadata(box_value(true), &SettingsCard2::_OnIsActionIconVisibleChanged)
 );
 
+const DependencyProperty SettingsCard2::_isWrapEnabledProperty = DependencyProperty::Register(
+	L"IsWrapEnabled",
+	xaml_typename<bool>(),
+	xaml_typename<Magpie::App::SettingsCard2>(),
+	PropertyMetadata(box_value(false), &SettingsCard2::_OnIsWrapEnabledChanged)
+);
+
 SettingsCard2::SettingsCard2() {
 	DefaultStyleKey(box_value(GetRuntimeClassName()));
 }
@@ -114,6 +124,8 @@ void SettingsCard2::OnApplyTemplate() {
 		resources.Insert(key, value);
 	}
 
+	_OnIsWrapEnabledChanged();
+
 	_OnActionIconChanged();
 	_OnHeaderChanged();
 	_OnHeaderIconChanged();
@@ -175,6 +187,10 @@ void SettingsCard2::_OnIsActionIconVisibleChanged(DependencyObject const& sender
 	get_self<SettingsCard2>(sender.as<Magpie::App::SettingsCard2>())->_OnActionIconChanged();
 }
 
+void SettingsCard2::_OnIsWrapEnabledChanged(DependencyObject const& sender, DependencyPropertyChangedEventArgs const&) {
+	get_self<SettingsCard2>(sender.as<Magpie::App::SettingsCard2>())->_OnIsWrapEnabledChanged();
+}
+
 void SettingsCard2::_OnHeaderChanged() {
 	if (FrameworkElement headerPresenter = GetTemplateChild(HeaderPresenter).try_as<FrameworkElement>()) {
 		headerPresenter.Visibility(Header() ? Visibility::Visible : Visibility::Collapsed);
@@ -213,6 +229,18 @@ void SettingsCard2::_OnActionIconChanged() {
 	}
 }
 
+void SettingsCard2::_OnIsWrapEnabledChanged() {
+	auto trigger1 = GetTemplateChild(RightWrappedTrigger);
+	auto trigger2 = GetTemplateChild(RightWrappedNoIconTrigger);
+
+	if (trigger1 && trigger2) {
+		// CanTrigger 无法使用 TemplateBinding？
+		const bool isWrapEnabled = IsWrapEnabled();
+		trigger1.as<ControlSizeTrigger>().CanTrigger(isWrapEnabled);
+		trigger2.as<ControlSizeTrigger>().CanTrigger(isWrapEnabled);
+	}
+}
+
 void SettingsCard2::_CheckVerticalSpacingState(VisualState const& s) {
 	// On state change, checking if the Content should be wrapped (e.g. when the card is made smaller or the ContentAlignment is set to Vertical). If the Content and the Header or Description are not null, we add spacing between the Content and the Header/Description.
 

diff --git a/src/Magpie.App/SettingsCard2.h b/src/Magpie.App/SettingsCard2.h
@@ -72,6 +72,14 @@ struct SettingsCard2 : SettingsCard2_base<SettingsCard2> {
 		SetValue(_isActionIconVisibleProperty, box_value(value));
 	}
 
+	bool IsWrapEnabled() const {
+		return GetValue(_isWrapEnabledProperty).as<bool>();
+	}
+
+	void IsWrapEnabled(bool value) {
+		SetValue(_isWrapEnabledProperty, box_value(value));
+	}
+
 	void OnApplyTemplate();
 
 	void OnPointerPressed(Input::PointerRoutedEventArgs const& e);
@@ -110,6 +118,10 @@ struct SettingsCard2 : SettingsCard2_base<SettingsCard2> {
 		return _isActionIconVisibleProperty;
 	}
 
+	static DependencyProperty IsWrapEnabledProperty() {
+		return _isWrapEnabledProperty;
+	}
+
 private:
 	static const DependencyProperty _headerProperty;
 	static const DependencyProperty _descriptionProperty;
@@ -119,18 +131,21 @@ struct SettingsCard2 : SettingsCard2_base<SettingsCard2> {
 	static const DependencyProperty _isClickEnabledProperty;
 	static const DependencyProperty _contentAlignmentProperty;
 	static const DependencyProperty _isActionIconVisibleProperty;
+	static const DependencyProperty _isWrapEnabledProperty;
 
 	static void _OnHeaderChanged(DependencyObject const& sender, DependencyPropertyChangedEventArgs const&);
 	static void _OnDescriptionChanged(DependencyObject const& sender, DependencyPropertyChangedEventArgs const&);
 	static void _OnHeaderIconChanged(DependencyObject const& sender, DependencyPropertyChangedEventArgs const&);
 	static void _OnIsClickEnabledChanged(DependencyObject const& sender, DependencyPropertyChangedEventArgs const&);
 	static void _OnIsActionIconVisibleChanged(DependencyObject const& sender, DependencyPropertyChangedEventArgs const&);
+	static void _OnIsWrapEnabledChanged(DependencyObject const& sender, DependencyPropertyChangedEventArgs const&);
 
 	void _OnHeaderChanged();
 	void _OnDescriptionChanged();
 	void _OnHeaderIconChanged();
 	void _OnIsClickEnabledChanged();
 	void _OnActionIconChanged();
+	void _OnIsWrapEnabledChanged();
 
 	void _CheckVerticalSpacingState(VisualState const& s);
 

diff --git a/src/Magpie.App/SettingsCard2.idl b/src/Magpie.App/SettingsCard2.idl
@@ -32,6 +32,7 @@ namespace Magpie.App{
 		Boolean IsClickEnabled;
 		ContentAlignment ContentAlignment;
 		Boolean IsActionIconVisible;
+		Boolean IsWrapEnabled;
 
 		static Windows.UI.Xaml.DependencyProperty HeaderProperty { get; };
 		static Windows.UI.Xaml.DependencyProperty DescriptionProperty { get; };
@@ -41,5 +42,6 @@ namespace Magpie.App{
 		static Windows.UI.Xaml.DependencyProperty IsClickEnabledProperty { get; };
 		static Windows.UI.Xaml.DependencyProperty ContentAlignmentProperty { get; };
 		static Windows.UI.Xaml.DependencyProperty IsActionIconVisibleProperty { get; };
+		static Windows.UI.Xaml.DependencyProperty IsWrapEnabledProperty { get; };
 	}
 }
diff --git a/src/Magpie.App/SettingsCard2.xaml b/src/Magpie.App/SettingsCard2.xaml
@@ -334,7 +334,8 @@
 									<!--  Whenever the control width is less than SettingsCardWrapThreshold, the Content is below the Header/Description  -->
 									<VisualState x:Name="RightWrapped">
 										<VisualState.StateTriggers>
-											<local:ControlSizeTrigger MinWidth="{ThemeResource SettingsCardWrapNoIconThreshold}"
+											<local:ControlSizeTrigger x:Name="RightWrappedTrigger"
+											                          MinWidth="{ThemeResource SettingsCardWrapNoIconThreshold}"
 											                          MaxWidth="{ThemeResource SettingsCardWrapThreshold}"
 											                          TargetElement="{Binding ElementName=PART_RootGrid}" />
 										</VisualState.StateTriggers>
@@ -350,7 +351,9 @@
 									<!--  For even smaller widths: the HeaderIcon is collapsed.  -->
 									<VisualState x:Name="RightWrappedNoIcon">
 										<VisualState.StateTriggers>
-											<local:ControlSizeTrigger MaxWidth="{ThemeResource SettingsCardWrapNoIconThreshold}"
+											<local:ControlSizeTrigger x:Name="RightWrappedNoIconTrigger"
+											                          MaxWidth="{ThemeResource SettingsCardWrapNoIconThreshold}"
+											                          CanTrigger="{TemplateBinding IsWrapEnabled}"
 											                          TargetElement="{Binding ElementName=PART_RootGrid}" />
 										</VisualState.StateTriggers>
 										<VisualState.Setters>

diff --git a/src/Magpie.App/SettingsPage.xaml b/src/Magpie.App/SettingsPage.xaml
@@ -13,7 +13,8 @@
 			<local:SettingsGroup x:Uid="Settings_General"
 			                     Margin="0,-24,0,0">
 				<StackPanel Orientation="Vertical">
-					<local:SettingsCard2 x:Uid="Settings_General_Language">
+					<local:SettingsCard2 x:Uid="Settings_General_Language"
+					                     IsWrapEnabled="True">
 						<local:SettingsCard2.HeaderIcon>
 							<FontIcon Glyph="&#xE8C1;" />
 						</local:SettingsCard2.HeaderIcon>
@@ -35,7 +36,8 @@
 						</muxc:InfoBar.ActionButton>
 					</muxc:InfoBar>
 				</StackPanel>
-				<local:SettingsCard2 x:Uid="Settings_General_Theme">
+				<local:SettingsCard2 x:Uid="Settings_General_Theme"
+				                     IsWrapEnabled="True">
 					<local:SettingsCard2.HeaderIcon>
 						<FontIcon Glyph="&#xEF1F;" />
 					</local:SettingsCard2.HeaderIcon>