Fixes an issue of SettingsExpander.

- SettingsExpander doesn't update visual state when `Description` and `HeaderIcon` was changed.
- Change SettingsExpander focus visual position from the card  to the expander button.
- And stability improvements.

src/AngelUmbrella.vcxproj

@@ -125,6 +125,7 @@
   </ItemDefinitionGroup>
   <ItemGroup>
     <None Include="AngelUmbrella.def" />
+    <None Include="version.props" />
   </ItemGroup>
   <ItemGroup>
     <None Include="packages.config" />

src/AngelUmbrella.vcxproj.filters

@@ -20,6 +20,7 @@
   <ItemGroup>
     <None Include="AngelUmbrella.def" />
     <None Include="packages.config" />
+    <None Include="version.props" />
   </ItemGroup>
   <ItemGroup>
     <ResourceCompile Include="AngelUmbrella.rc" />

src/Themes/Generic.xaml

@@ -119,7 +119,7 @@
 		<Setter Property="MinWidth"
 				Value="{StaticResource SettingsCardMinWidth}" />
 		<Setter Property="Padding"
-				Value="0" />
+				Value="{StaticResource SettingsCardPadding}" />
 		<Setter Property="TabNavigation"
 				Value="Local" />
 		<Setter Property="VerticalContentAlignment"
@@ -136,6 +136,7 @@
 						  Control.IsTemplateFocusTarget="True"
 						  CornerRadius="{TemplateBinding CornerRadius}"
 						  FocusVisualMargin="{TemplateBinding FocusVisualMargin}"
+						  Padding="{TemplateBinding Padding}"
 						  RenderTransformOrigin=".5,.5">
 						<VisualStateManager.VisualStateGroups>
 							<VisualStateGroup x:Name="CommonStates">
@@ -339,14 +340,12 @@
 											  ContentTemplate="{TemplateBinding ContentTemplate}"
 											  Content="{TemplateBinding Content}"
 											  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-											  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-											  Margin="{TemplateBinding Padding}" />
+											  VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
 						</Grid>
 						<TextBlock x:Name="PlaceholderTextBlock"
 								   Opacity="0"
 								   Text="Xg"
 								   Foreground="{x:Null}"
-								   Margin="{TemplateBinding Padding}"
 								   IsHitTestVisible="False"
 								   AutomationProperties.AccessibilityView="Raw" />
 						<Rectangle x:Name="PlaceholderRect"
@@ -359,13 +358,14 @@
 								  FontSize="12"
 								  Foreground="{TemplateBinding Foreground}"
 								  Glyph="{StaticResource CardListViewItemChevronRightGlyph}"
-								  Height="{StaticResource SettingsCardActionIconMaxSize}"
+								  Height="{StaticResource SettingsCardActionButtonHeight}"
 								  HighContrastAdjustment="None"
-								  HorizontalAlignment="Right"
+								  HorizontalAlignment="Center"
 								  IsTextScaleFactorEnabled="False"
-								  Margin="4,0,15,0"
+								  Margin="{StaticResource SettingsCardActionButtonMargin}"
 								  ToolTipService.ToolTip="More"
-								  VerticalAlignment="Center" />
+								  VerticalAlignment="Center"
+								  Width="{StaticResource SettingsCardActionButtonWidth}" />
 					</Grid>
 				</ControlTemplate>
 			</Setter.Value>

src/UI/Controls/SettingsCard.xaml

@@ -128,6 +128,8 @@
 								<VisualState x:Name="HeaderOnly" />
 								<VisualState x:Name="HeaderAndDescription">
 									<VisualState.Setters>
+										<Setter Target="Description.Visibility"
+												Value="Visible" />
 										<Setter Target="Header.TextLineBounds"
 												Value="TrimToCapHeight" />
 									</VisualState.Setters>
@@ -176,7 +178,8 @@
 											  FontSize="{StaticResource SettingsCardDescriptionFontSize}"
 											  Foreground="{ThemeResource TextFillColorSecondaryBrush}"
 											  Margin="0,0,0,-1"
-											  TextWrapping="Wrap" />
+											  TextWrapping="Wrap"
+											  Visibility="Collapsed" />
 						</StackPanel>
 
 						<ContentPresenter x:Name="Content"
@@ -191,17 +194,22 @@
 										FontFamily="{StaticResource SymbolThemeFontFamily}"
 										FontSize="12"
 										Foreground="{TemplateBinding Foreground}"
-										HorizontalAlignment="Right"
+										Height="{StaticResource SettingsCardActionButtonHeight}"
 										HighContrastAdjustment="None"
+										HorizontalAlignment="Right"
+										HorizontalContentAlignment="Center"
 										IsTabStop="False"
 										IsTextScaleFactorEnabled="False"
-										Margin="4,0,0,0"
-										VerticalAlignment="Center">
+										Margin="{StaticResource SettingsCardActionButtonMargin}"
+										ToolTipService.ToolTip="{TemplateBinding ActionIconTooltip}"
+										VerticalAlignment="Center"
+										VerticalContentAlignment="Center"
+										Width="{StaticResource SettingsCardActionButtonWidth}">
 							<Viewbox Height="{StaticResource SettingsCardActionIconMaxSize}"
+									 HorizontalAlignment="Center"
 									 StretchDirection="DownOnly"
-									 ToolTipService.ToolTip="{TemplateBinding ActionIconTooltip}">
-								<ContentPresenter Content="{TemplateBinding ActionIcon}"
-												  HighContrastAdjustment="None" />
+									 VerticalAlignment="Center">
+								<ContentPresenter Content="{TemplateBinding ActionIcon}" />
 							</Viewbox>
 						</ContentControl>
 					</Grid>

src/UI/Controls/SettingsCard.xaml.cpp

@@ -138,13 +138,7 @@ void SettingsCard::OnButtonIconChanged(bool isClickEnabled) {
 void SettingsCard::OnDescriptionChanged(IInspectable const& newValue) {
 	FrameworkElement element { GetTemplateChild(controls::Description).try_as<FrameworkElement>() };
 	if (element) {
-		if (ValueHelper<IInspectable>::HasValue(newValue)) {
-			element.Visibility(Visibility::Visible);
-			VisualStateManager::GoToState(*this, states::HeaderAndDescription, true);
-		} else {
-			element.Visibility(Visibility::Collapsed);
-			VisualStateManager::GoToState(*this, states::HeaderOnly, true);
-		}
+		VisualStateManager::GoToState(*this, ValueHelper<IInspectable>::HasValue(newValue) ? states::HeaderAndDescription : states::HeaderOnly, true);
 	}
 }
 

src/UI/Controls/SettingsCard_themeresources.xaml

@@ -100,8 +100,9 @@
 	<x:Double x:Key="SettingsCardMaxWidth">1000</x:Double>
 	<x:Double x:Key="SettingsCardMinWidth">160</x:Double>
 	<x:Double x:Key="SettingsCardMinHeight">48</x:Double>
-	<x:Double x:Key="SettingsCardActionButtonWidth">32</x:Double>
-	<x:Double x:Key="SettingsCardActionButtonHeight">32</x:Double>
+	<Thickness x:Key="SettingsCardActionButtonMargin">4,-15,-12,-15</Thickness>
+	<x:Double x:Key="SettingsCardActionButtonWidth">40</x:Double>
+	<x:Double x:Key="SettingsCardActionButtonHeight">40</x:Double>
 	<x:Double x:Key="SettingsCardDescriptionFontSize">12</x:Double>
 	<x:Double x:Key="SettingsCardHeaderIconMaxSize">20</x:Double>
 	<x:Double x:Key="SettingsCardActionIconMaxSize">16</x:Double>

src/UI/Controls/SettingsExpander.xaml

@@ -128,12 +128,17 @@
 										FontFamily="{StaticResource SymbolThemeFontFamily}"
 										FontSize="12"
 										Foreground="{TemplateBinding Foreground}"
+										Height="{StaticResource SettingsCardActionButtonHeight}"
 										HighContrastAdjustment="None"
 										HorizontalAlignment="Right"
-										IsTabStop="False"
+										HorizontalContentAlignment="Center"
+										IsTabStop="True"
 										IsTextScaleFactorEnabled="False"
-										Margin="12,0,-4,0"
-										VerticalAlignment="Center">
+										Margin="{StaticResource SettingsCardActionButtonMargin}"
+										UseSystemFocusVisuals="{TemplateBinding UseSystemFocusVisuals}"
+										VerticalAlignment="Center"
+										VerticalContentAlignment="Center"
+										Width="{StaticResource SettingsCardActionButtonWidth}">
 							<AnimatedIcon x:Name="ExpandCollapseChevron"
 										  AnimatedIcon.State="NormalOff"
 										  Height="{StaticResource SettingsCardActionIconMaxSize}"
@@ -312,6 +317,8 @@
 								<VisualState x:Name="HeaderOnly" />
 								<VisualState x:Name="HeaderAndDescription">
 									<VisualState.Setters>
+										<Setter Target="Description.Visibility"
+												Value="Visible" />
 										<Setter Target="Header.TextLineBounds"
 												Value="TrimToCapHeight" />
 									</VisualState.Setters>
@@ -335,7 +342,7 @@
 									  HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
 									  IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
 									  IsEnabled="{TemplateBinding IsEnabled}"
-									  IsTabStop="True"
+									  IsTabStop="False"
 									  MinHeight="{TemplateBinding MinHeight}"
 									  Padding="{TemplateBinding Padding}"
 									  Style="{StaticResource SettingsExpanderHeaderDownStyle}">
@@ -375,7 +382,8 @@
 													  FontSize="{StaticResource SettingsCardDescriptionFontSize}"
 													  Foreground="{ThemeResource TextFillColorSecondaryBrush}"
 													  Margin="0,0,0,-1"
-													  TextWrapping="Wrap" />
+													  TextWrapping="Wrap"
+													  Visibility="Collapsed" />
 								</StackPanel>
 
 								<ContentPresenter x:Name="Content"

src/UI/Controls/SettingsExpander.xaml.cpp

@@ -73,13 +73,7 @@ void SettingsExpander::OnPointerExited(PointerRoutedEventArgs const& args) const
 void SettingsExpander::OnDescriptionChanged(IInspectable const& newValue) {
 	FrameworkElement element { GetTemplateChild(controls::Description).try_as<FrameworkElement>() };
 	if (element) {
-		if (ValueHelper<IInspectable>::HasValue(newValue)) {
-			element.Visibility(Visibility::Visible);
-			VisualStateManager::GoToState(*this, states::HeaderAndDescription, true);
-		} else {
-			element.Visibility(Visibility::Collapsed);
-			VisualStateManager::GoToState(*this, states::HeaderOnly, true);
-		}
+		VisualStateManager::GoToState(*this, ValueHelper<IInspectable>::HasValue(newValue) ? states::HeaderAndDescription : states::HeaderOnly, true);
 	}
 }
 

src/UI/Controls/SettingsExpander.xaml.properties.cpp

@@ -20,11 +20,19 @@ void SettingsExpander::DependencyProperties::DelayInitIfNeeded() {
 
 	DEFINE_PARENT_TYPENAME(SettingsExpander);
 
-	DEFINE_DP(Description, winrt::IInspectable, SettingsExpander);
+	DEFINE_DP_CALLBACK(
+		Description,
+		winrt::IInspectable,
+		SettingsExpander,
+		&SettingsExpander::OnDescriptionChangedStatic);
 
 	DEFINE_DP(ExpanderContent, winrt::IInspectable, SettingsExpander);
 
-	DEFINE_DP(HeaderIcon, winrt::Microsoft::UI::Xaml::Controls::IconElement, SettingsExpander);
+	DEFINE_DP_CALLBACK(
+		HeaderIcon,
+		winrt::Microsoft::UI::Xaml::Controls::IconElement,
+		SettingsExpander,
+		&SettingsExpander::OnHeaderIconChangedStatic);
 
 	DEFINE_DP_METADATA(
 		Orientation,

src/UI/Controls/SettingsPanel.xaml

@@ -23,10 +23,6 @@
 				Value="Right" />
 		<Setter Property="IsTabStop"
 				Value="False" />
-		<Setter Property="Margin"
-				Value="0" />
-		<Setter Property="Padding"
-				Value="{StaticResource SettingsCardPadding}" />
 		<Setter Property="UseSystemFocusVisuals"
 				Value="{StaticResource UseSystemFocusVisuals}" />
 		<Setter Property="VerticalContentAlignment"
@@ -37,8 +33,6 @@
 					<Grid x:Name="RootGrid"
 						  AnimatedIcon.State="Normal"
 						  HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
-						  Margin="{TemplateBinding Margin}"
-						  Padding="{TemplateBinding Padding}"
 						  VerticalAlignment="{TemplateBinding VerticalAlignment}">
 						<VisualStateManager.VisualStateGroups>
 							<VisualStateGroup x:Name="Orientation">
@@ -58,6 +52,8 @@
 								<VisualState x:Name="HeaderOnly" />
 								<VisualState x:Name="HeaderAndDescription">
 									<VisualState.Setters>
+										<Setter Target="Description.Visibility"
+												Value="Visible" />
 										<Setter Target="Header.TextLineBounds"
 												Value="TrimToCapHeight" />
 									</VisualState.Setters>
@@ -91,7 +87,6 @@
 						</Viewbox>
 
 						<StackPanel Grid.Column="1"
-									Margin="0,0,16,0"
 									VerticalAlignment="Center">
 							<ContentPresenter x:Name="Header"
 											  Content="{TemplateBinding Header}"
@@ -101,7 +96,8 @@
 											  FontSize="{StaticResource SettingsCardDescriptionFontSize}"
 											  Foreground="{ThemeResource TextFillColorSecondaryBrush}"
 											  Margin="0,0,0,-1"
-											  TextWrapping="Wrap" />
+											  TextWrapping="Wrap"
+											  Visibility="Collapsed" />
 						</StackPanel>
 
 						<ContentPresenter x:Name="Content"

src/UI/Controls/SettingsPanel.xaml.cpp

@@ -61,13 +61,7 @@ void SettingsPanel::OnButtonIconChanged(bool isClickEnabled) {
 void SettingsPanel::OnDescriptionChanged(IInspectable const& newValue) {
 	FrameworkElement element { GetTemplateChild(controls::Description).try_as<FrameworkElement>() };
 	if (element) {
-		if (ValueHelper<IInspectable>::HasValue(newValue)) {
-			element.Visibility(Visibility::Visible);
-			VisualStateManager::GoToState(*this, states::HeaderAndDescription, true);
-		} else {
-			element.Visibility(Visibility::Collapsed);
-			VisualStateManager::GoToState(*this, states::HeaderOnly, true);
-		}
+		VisualStateManager::GoToState(*this, ValueHelper<IInspectable>::HasValue(newValue) ? states::HeaderAndDescription : states::HeaderOnly, true);
 	}
 }
 

src/version.props

@@ -3,7 +3,7 @@
 	<PropertyGroup>
 		<AngelVersionMajor>1</AngelVersionMajor>
 		<AngelVersionMinor>0</AngelVersionMinor>
-		<AngelVersionPatch>0</AngelVersionPatch>
+		<AngelVersionPatch>1</AngelVersionPatch>
 		<AngelVersionBuild Condition="$(AngelVersionBuild) == ''">0</AngelVersionBuild>
 		<AngelVersionRevision Condition="$(AngelVersionRevision) == ''">0</AngelVersionRevision>
 	</PropertyGroup>