Windows icon indicating copy to clipboard operation
Windows copied to clipboard

SettingsCard and SettingsExpander doesn't support EntranceThemeTransition in WinUI3

Open hippieZhou opened this issue 1 year ago • 1 comments

Describe the bug

In the WinUI3 project, when I try to use EntranceThemeTransition as a ChildrenTransition with SettingsCard or SettingsExpander on a Blank Page, this Transition animation doesn't work. 动画2

Steps to reproduce

the sample code is here:


<Page
    x:Class="Pokedex.WinUI.Views.BlankPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:behaviors="using:CommunityToolkit.WinUI.Behaviors"
    xmlns:controls="using:CommunityToolkit.WinUI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ui="using:CommunityToolkit.WinUI"
    behaviors:NavigationViewHeaderBehavior.HeaderMode="Never"
    mc:Ignorable="d">

    <Grid x:Name="ContentArea">
        <StackPanel
            x:Name="Items"
            Padding="20"
            HorizontalAlignment="Stretch"
            Orientation="Vertical"
            Spacing="10">

            <StackPanel.ChildrenTransitions>
                <EntranceThemeTransition FromVerticalOffset="100" IsStaggeringEnabled="True" />
            </StackPanel.ChildrenTransitions>

            <controls:SettingsCard
                Description="This is a default card, with the Header, HeaderIcon, Description and Content set."
                Header="This is the Header"
                HeaderIcon="{ui:FontIcon Glyph=&#xE799;}">
                <ComboBox SelectedIndex="0">
                    <ComboBoxItem>Option 1</ComboBoxItem>
                    <ComboBoxItem>Option 2</ComboBoxItem>
                    <ComboBoxItem>Option 3</ComboBoxItem>
                </ComboBox>
            </controls:SettingsCard>
            <controls:SettingsCard
                Description="This is a default card, with the Header, HeaderIcon, Description and Content set."
                Header="This is the Header"
                HeaderIcon="{ui:FontIcon Glyph=&#xE799;}">
                <ComboBox SelectedIndex="0">
                    <ComboBoxItem>Option 1</ComboBoxItem>
                    <ComboBoxItem>Option 2</ComboBoxItem>
                    <ComboBoxItem>Option 3</ComboBoxItem>
                </ComboBox>
            </controls:SettingsCard>
            <controls:SettingsCard
                Description="This is a default card, with the Header, HeaderIcon, Description and Content set."
                Header="This is the Header"
                HeaderIcon="{ui:FontIcon Glyph=&#xE799;}">
                <ComboBox SelectedIndex="0">
                    <ComboBoxItem>Option 1</ComboBoxItem>
                    <ComboBoxItem>Option 2</ComboBoxItem>
                    <ComboBoxItem>Option 3</ComboBoxItem>
                </ComboBox>
            </controls:SettingsCard>

            <Grid
                Height="50"
                Padding="10"
                BorderBrush="{ThemeResource SystemColorDisabledTextBrush}"
                BorderThickness="1"
                CornerRadius="4">
                <TextBlock VerticalAlignment="Center" TextAlignment="Center">Item 1</TextBlock>
            </Grid>
            <Grid
                Height="50"
                Padding="10"
                BorderBrush="{ThemeResource SystemColorDisabledTextBrush}"
                BorderThickness="1"
                CornerRadius="4">
                <TextBlock VerticalAlignment="Center" TextAlignment="Center">Item 2</TextBlock>
            </Grid>
            <Grid
                Height="50"
                Padding="10"
                BorderBrush="{ThemeResource SystemColorDisabledTextBrush}"
                BorderThickness="1"
                CornerRadius="4">
                <TextBlock VerticalAlignment="Center" TextAlignment="Center">Item 3</TextBlock>
            </Grid>
            <Grid
                Height="50"
                Padding="10"
                BorderBrush="{ThemeResource SystemColorDisabledTextBrush}"
                BorderThickness="1"
                CornerRadius="4">
                <TextBlock VerticalAlignment="Center" TextAlignment="Center">Item 4</TextBlock>
            </Grid>
            <Grid
                Height="50"
                Padding="10"
                BorderBrush="{ThemeResource SystemColorDisabledTextBrush}"
                BorderThickness="1"
                CornerRadius="4">
                <TextBlock VerticalAlignment="Center" TextAlignment="Center">Item 5</TextBlock>
            </Grid>
        </StackPanel>
    </Grid>
</Page>


### Expected behavior

the theme transitions can work well with each element

![动画1](https://github.com/CommunityToolkit/Windows/assets/13598361/bccbe88e-5159-4967-a0db-e1c97dab6525)


### Screenshots

_No response_

### Code Platform

- [ ] UWP
- [X] WinAppSDK / WinUI 3
- [ ] Web Assembly (WASM)
- [ ] Android
- [ ] iOS
- [ ] MacOS
- [ ] Linux / GTK

### Windows Build Number

- [ ] Windows 10 1809 (Build 17763)
- [ ] Windows 10 1903 (Build 18362)
- [ ] Windows 10 1909 (Build 18363)
- [ ] Windows 10 2004 (Build 19041)
- [ ] Windows 10 20H2 (Build 19042)
- [ ] Windows 10 21H1 (Build 19043)
- [ ] Windows 10 21H2 (Build 19044)
- [ ] Windows 10 22H2 (Build 19045)
- [ ] Windows 11 21H2 (Build 22000)
- [X] Other (specify)

### Other Windows Build number

Build 22631

### App minimum and target SDK version

- [ ] Windows 10, version 1809 (Build 17763)
- [ ] Windows 10, version 1903 (Build 18362)
- [ ] Windows 10, version 1909 (Build 18363)
- [ ] Windows 10, version 2004 (Build 19041)
- [ ] Windows 10, version 2104 (Build 20348)
- [ ] Windows 11, version 22H2 (Build 22000)
- [ ] Other (specify)

### Other SDK version

_No response_

### Visual Studio Version

_No response_

### Visual Studio Build Number

_No response_

### Device form factor

_No response_

### Additional context

_No response_

### Help us help you

Yes, I'd like to be assigned to work on this item.

hippieZhou avatar Jun 14 '24 03:06 hippieZhou

the expected behaviour is that the theme transitions can work well with each element

动画1

hippieZhou avatar Jun 14 '24 03:06 hippieZhou