CommunityToolkit / WindowsCommunityToolkit

The Windows Community Toolkit is a collection of helpers, extensions, and custom controls. It simplifies and demonstrates common developer tasks building .NET apps with UWP and the Windows App SDK / WinUI 3 for Windows 10 and Windows 11. The toolkit is part of the .NET Foundation.
https://docs.microsoft.com/windows/communitytoolkit/
Other
5.89k stars 1.38k forks source link

Expander Animation isn't smooth when bottom aligned #3404

Open michael-hawker opened 4 years ago

michael-hawker commented 4 years ago

Describe the bug

The Expander doesn't animate nicely in certain layout scenarios.

Steps to Reproduce

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

  <Page.Resources>
    <SolidColorBrush Color="{ThemeResource SystemChromeLowColor}" x:Key="SystemControlForegroundChromeLowBrush"/>
  </Page.Resources>

  <Grid>
        <controls:Expander x:Name="Expander" 
                           VerticalAlignment="Bottom"
                           Header="This is the header - expander 2"
                           HorizontalContentAlignment="Stretch"
                           IsExpanded="True">
          <Grid Height="256"
                Background="{ThemeResource SystemControlBackgroundBaseHighBrush}">
            <TextBlock HorizontalAlignment="Center"
                       TextWrapping="Wrap"
                       Text="This is the expanded content without a content overlay"
                       VerticalAlignment="Center"
                       Foreground="{ThemeResource SystemControlForegroundChromeLowBrush}" />
          </Grid>
        </controls:Expander>
  </Grid>
</Page>
  1. Use XAML above in sample app (Expander)
  2. Click on the Expander to collapse
  3. Note how that it 'jumps' to the bottom after the animation has played.

Expected behavior

Expander's height should animate along with content collapsing so it smoothly collapses?

Screenshots

If applicable, add screenshots to help explain your problem.

Environment

Store App

Windows 10 Build Number:

ghost commented 4 years ago

Hello michael-hawker, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

michael-hawker commented 4 years ago

If you set ExpandDirection to Up and have the Expander VerticalAlignment to Top you see the same problem.

michael-hawker commented 3 years ago

We should test this same scenario against the WinUI Expander to see behavior, if it exhibits the same issue, we should file an issue on WinUI and close this one since we'll eventually deprecate ours.