Skip to content

Commit

Permalink
Expander Fixes (#4394)
Browse files Browse the repository at this point in the history 
* Rename 'Expanding' to 'Expanded'

* Ensure Expanded/Collapsed fire after state is applied

* Remove MaxWidth set in the default style

* Make the expander properly size to content

The header and content container elements should always be stretched to give child controls maximum available area.

* Remove Stretch content alignment (use Center default)

This aligns with the default Button style

* Add Center VerticalAlignment

This aligns with the default Button style

* Remove Min/MaxWidth from intermediate controls

These should follow the layout root (parent grid) sizing.

* Update Expander test page

* Add fixed-height Expander example

* Stretch header content

* Standardize resource names

* The header VerticalContentAlignment must be center

* Revert "Rename 'Expanding' to 'Expanded'"

This reverts commit 1223fb1.

* Revert "Ensure Expanded/Collapsed fire after state is applied"

This reverts commit 363c732.

* Padding now applies to the Content area

* Reorg and rename expander theme resources

- Header and content resources are clearly named and separated
- Relevant control properties now apply to the content area instead of header

* Work-around DP precedence issue

- Border thickness of the content area is no longer controlled by the BorderThickness DP of the control itself
- This is required as BorderThickness of the control has local precedence over the visual state setter.
- The correct solution for this is another filter converter for border thickness

* Add resources to control header content alignment

* Fix Expander event ordering

* Fix some Static not Theme resources

* Remove some resource redirections

There is concern these would not be re-evaluated when expected

* Remove unnecessary margins
  • Loading branch information
@robloo
robloo authored Mar 26, 2021
1 parent 585e0c6 commit 9929977
Show file tree
Hide file tree
Showing 4 changed files with 166 additions and 113 deletions.
16 changes: 14 additions & 2 deletions dev/Expander/Expander.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,15 +103,27 @@ void Expander::RaiseCollapsedEvent(const winrt::Expander& container)

void Expander::OnIsExpandedPropertyChanged(const winrt::DependencyPropertyChangedEventArgs& /*args*/)
{
if (IsExpanded())
const auto isExpanded = IsExpanded();

if (isExpanded)
{
RaiseExpandingEvent(*this);
}
else
{
RaiseCollapsedEvent(*this);
// Available for a 'Collapsing' event
}

UpdateExpandState(true);

if (isExpanded)
{
// Available for an 'Expanded' event
}
else
{
RaiseCollapsedEvent(*this);
}
}

void Expander::OnExpandDirectionPropertyChanged(const winrt::DependencyPropertyChangedEventArgs& /*args*/)
Expand Down
44 changes: 21 additions & 23 deletions dev/Expander/Expander.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,17 +20,15 @@
Without this override, the narrator user that focuses the expander on a touch screen will see that pressing "Tab"
doesn't work how they would expect.-->
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Background" Value="{ThemeResource ExpanderBackground}" />
<Setter Property="Background" Value="{ThemeResource ExpanderContentBackground}" />
<contract7Present:Setter Property="BackgroundSizing" Value="InnerBorderEdge" />
<Setter Property="MinWidth" Value="{ThemeResource FlyoutThemeMinWidth}" />
<Setter Property="MaxWidth" Value="{ThemeResource FlyoutThemeMaxWidth}" />
<Setter Property="MinHeight" Value="{StaticResource ExpanderMinHeight}" />
<Setter Property="BorderThickness" Value="{ThemeResource ExpanderBorderThickness}" />
<Setter Property="BorderBrush" Value="{ThemeResource ExpanderBorderBrush}" />
<Setter Property="Padding" Value="{StaticResource ExpanderHeaderPadding}" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="BorderThickness" Value="{ThemeResource ExpanderContentDownBorderThickness}" />
<Setter Property="BorderBrush" Value="{ThemeResource ExpanderContentBorderBrush}" />
<Setter Property="Padding" Value="{StaticResource ExpanderContentPadding}" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<contract7Present:Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
<Setter Property="Template">
<Setter.Value>
Expand Down Expand Up @@ -110,7 +108,7 @@
<VisualState x:Name="Up">
<VisualState.Setters>
<Setter Target="ExpanderHeader.Style" Value="{StaticResource ExpanderHeaderUpStyle}" />
<Setter Target="ExpanderContent.BorderThickness" Value="{StaticResource ExpanderDropdownUpBorderThickness}" />
<Setter Target="ExpanderContent.BorderThickness" Value="{StaticResource ExpanderContentUpBorderThickness}" />
<contract7Present:Setter Target="ExpanderContent.CornerRadius" Value="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopCornerRadiusFilterConverter}}" />
<Setter Target="ExpanderHeader.(Grid.Row)" Value="1" />
<Setter Target="ExpanderContentClip.(Grid.Row)" Value="0" />
Expand All @@ -128,36 +126,36 @@
<ToggleButton
x:Name="ExpanderHeader"
AutomationProperties.AutomationId="ExpanderToggleButton"
Background="{TemplateBinding Background}"
Background="{ThemeResource ExpanderHeaderBackground}"
contract7Present:BackgroundSizing="{TemplateBinding BackgroundSizing}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{ThemeResource ExpanderHeaderBorderBrush}"
BorderThickness="{ThemeResource ExpanderHeaderBorderThickness}"
MinHeight="{TemplateBinding MinHeight}"
MinWidth="{TemplateBinding MinWidth}"
MaxWidth="{TemplateBinding MaxWidth}"
contract7Present:CornerRadius="{TemplateBinding CornerRadius}"
IsEnabled="{TemplateBinding IsEnabled}"
Padding="{TemplateBinding Padding}"
Padding="{StaticResource ExpanderHeaderPadding}"
Style="{StaticResource ExpanderHeaderDownStyle}"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="{StaticResource ExpanderHeaderHorizontalContentAlignment}"
VerticalContentAlignment="{StaticResource ExpanderHeaderVerticalContentAlignment}"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" />
<!-- The clip is a composition clip applied in code -->
<Border x:Name="ExpanderContentClip" Grid.Row="1">
<Border
x:Name="ExpanderContent"
x:Name="ExpanderContent"
Visibility="Collapsed"
Background="{ThemeResource ExpanderDropDownBackground}"
Background="{TemplateBinding Background}"
contract7Present:BackgroundSizing="{TemplateBinding BackgroundSizing}"
contract7Present:CornerRadius="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomCornerRadiusFilterConverter}}"
BorderBrush="{ThemeResource ExpanderDropDownBorderBrush}"
BorderThickness="{StaticResource ExpanderDropdownDownBorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{StaticResource ExpanderContentDownBorderThickness}"
MinHeight="{TemplateBinding MinHeight}"
MinWidth="{TemplateBinding MinWidth}"
MaxWidth="{TemplateBinding MaxWidth}"
Padding="{StaticResource ExpanderContentPadding}">
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Padding="{TemplateBinding Padding}">
<ContentPresenter
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Expand Down
Loading

0 comments on commit 9929977

Please sign in to comment.