Transition not working correctly in ListView and GridView (WinUI 3)

youki 1,021

Hello,

the transitions in a bound ListView and GridView are not working correctly, can you confirm this?

(It is unchecked and uncoordinated, items are not added in order, especially when you reload them?)

<ListView.ItemContainerTransitions>
    <TransitionCollection>
        <ContentThemeTransition VerticalOffset="400"/>
        <EntranceThemeTransition FromVerticalOffset="400" IsStaggeringEnabled="False" />
    </TransitionCollection>
</ListView.ItemContainerTransitions>

Info:

It works properly in an ItemsView but this control has a weird behaviour (I assume this is a bug. When I reload it, the checkboxes within the items remain checked.)

<ItemsView.ItemTemplate>
    <DataTemplate x:DataType="local:xxx">
        <ItemContainer HorizontalAlignment="Stretch" Height="40" Background="#232323" x:Name="itemContainer"  Margin="0,5,20,5">
            <ItemContainer.Transitions>
                <TransitionCollection>
                    <ContentThemeTransition VerticalOffset="400"/>
                    <EntranceThemeTransition FromVerticalOffset="400" IsStaggeringEnabled="False"></EntranceThemeTransition>
                </TransitionCollection>
            </ItemContainer.Transitions>
            <StackPanel Orientation="Horizontal">
                <CheckBox Margin="10,0,-80,0" Width="0" MaxWidth="5" IsChecked="{x:Bind xxx}" Checked="cbApplication_Checked" Unchecked="cbApplication_Unchecked"/>
                <Image Height="20" Width="20" Margin="0,0,10,0"  Source="{x:Bind Icon, Mode=OneWay}"/>
                <TextBlock Text="{x:Bind xxx, Mode=OneWay}" TextWrapping="Wrap" FontSize="14" VerticalAlignment="Center"/>
            </StackPanel>
        </ItemContainer>
    </DataTemplate>
</ItemsView.ItemTemplate>

Regards

Jeanine Zhang-MSFT 9,866 Reputation points Microsoft Vendor

2024-03-21T03:17:08.2+00:00

It is unchecked and uncoordinated, items are not added in order, especially when you reload them?

Could you please tell us how do you reload items?

When I reload it, the checkboxes within the items remain checked.

Whether you have checked the item itself is checked?
youki 1,021 Reputation points

2024-03-22T18:45:00.6566667+00:00
That was nonsense, ItemsView, ListView and GridView look equally unfluid.
I reload the ItemsView by reloading the ViewModel (collection):

AppProcessViewModel().AppProcesses().Clear();

I add items as follows:

AppProcessViewModel().AppProcesses().Append(make<App1::implementation::AppProcess>(to_hstring(L"Test Value"), to_hstring(L"Test Value"), false, nullptr));

I don't know whether this should be the case with the CheckBoxes. I remember that I once read something for WPF or UWP that they fixed it by binding. They just bound the CheckBoxes and of course that works here too, it's just a bit strange.

Video:
https://github.com/yki5000/WinUI3_Unpackaged_CPP/issues/4
youki 1,021 Reputation points

2024-03-23T13:01:30.0833333+00:00

@Jeanine Zhang-MSFT

Hey,

Thank you for your help.

I think i go with the ListView and GridView. I guess I had some errors in the ListView and GridView because I didn't define it correctly according to the documentation. I guess I'll have to customize it then, although I wanted to work around that with the ItemsView.

ItemView is probably a special case, also that it seems to cache values somehow.
youki 1,021 Reputation points

2024-03-23T13:14:37.7633333+00:00

@Jeanine Zhang-MSFT

Hey,

Thank you for your help.
I guess I had some errors in the ListView and GridView because I didn't define it correctly according to the documentation. I guess I'll have to customize it then, although I wanted to work around that with the ItemsView.

ItemView is probably a special case, also that it seems to cache values somehow.

Regards

Jeanine Zhang-MSFT 9,866 Microsoft Vendor

I try to use c# blank app to reproduce the issue. However, I couldn't reproduce the issue.

Here is my code:


    public sealed partial class MainWindow : Window

    {

        public MainViewModel mainViewModel { get; set; }
 
        public MainWindow()

        {

            this.InitializeComponent();
 
            mainViewModel = new MainViewModel();

            RootPanel.DataContext = mainViewModel;

        }
 
        private void myButton_Click(object sender, RoutedEventArgs e)

        {

            mainViewModel.Items.Clear();

            mainViewModel.makeData();

        }

    }
 
    public class MainViewModel 

    {

        public ObservableCollection<ItemData> Items { get; set; }
 
        public MainViewModel()

        {

            Items = new ObservableCollection<ItemData>();

            makeData();

        }
 
        public void makeData() 

        {

            for (int i = 0; i < 10; i++)

            {

                ItemData item = new ItemData();

                item.IsChecked = false;

                item.Name = i.ToString();

                Items.Add(item);

            }

        }

    }
 
 
    public class ItemData 

    {

        public string Name { get; set; }
 
        public bool IsChecked { get; set; }

    }

}

Could you please provide a minimal sample to help us reproduce the issue in a blank project?

Roy Li - MSFT 33,456 Reputation points Microsoft Vendor

2024-04-09T02:18:11.79+00:00

Any updates about this?

Share via

Transition not working correctly in ListView and GridView (WinUI 3)

Your answer