Search code examples
c#winui-3autosuggestwinui

Disable animation on AutoSuggestBox items change?


When making input changes to AutoSuggestBox, the transition to the new search results has an animation, making the lines jump/bounce. I don't want this effect, instead I want the new search results to be displayed without any animation.

So, how can one disable this animation?

This is how it looks by default with the animations (and how I don't want it)

enter image description here


Solution

  • The AutoSuggestBox shows a ListView for the suggestions. That animation is actually the ListView's animation. The following code should disable the animation:

    public MainPage()
    {
        this.InitializeComponent();
        this.AutoSuggestBoxControl.Loaded += AutoSuggestBoxControl_Loaded;
    }
    
    private void AutoSuggestBoxControl_Loaded(object sender, RoutedEventArgs _)
    {
        if (sender is not AutoSuggestBox autoSuggestBox ||
            VisualTreeHelper.GetChild(autoSuggestBox, 0) is not Grid grid ||
            grid.Children.FirstOrDefault(gridChild => gridChild is Popup) is not Popup popup ||
            popup.Child is not Border popupChildBorder ||
            popupChildBorder.Child is not ListView popupListView)
        {
            return;
        }
    
        popupListView.ItemContainerTransitions = null;
    }
    

    UPDATE

    If you want to do this in XAML:

    <AutoSuggestBox
        ItemsSource="{x:Bind Cats}"
        TextChanged="AutoSuggestBoxControl_TextChanged">
        <AutoSuggestBox.Resources>
            <Style TargetType="ListView">
                <Setter Property="ItemContainerTransitions">
                    <Setter.Value>
                        <TransitionCollection/>
                    </Setter.Value>
                </Setter>
            </Style>
        </AutoSuggestBox.Resources>
    </AutoSuggestBox>