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)
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>