Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SettingsCard and SettingsExpander doesn't support EntranceThemeTransition in WinUI3 #434

Open
hippieZhou opened this issue Jun 14, 2024 · 1 comment

Comments

@hippieZhou
Copy link

hippieZhou commented Jun 14, 2024

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
Copy link
Author

hippieZhou commented Jun 14, 2024

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

动画1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant