Je crée actuellement un contrôle qui est principalement un ItemsControl
affichant certains éléments. En outre, j'ai quelques contrôles qui permet à l'utilisateur de filtrer les éléments dans ce ItemsControl
.Comment animer le filtrage des éléments affichés dans un ItemsControl (WPF)
Ce que j'essaie de faire est de rendre visible à l'utilisateur les éléments qui sont supprimés lorsque le filtre est appliqué.
Donc ce que j'ai fait était au lieu de vraiment filtrer le ICollectionView
, j'ai introduit une nouvelle propriété IsVisible
sur la VM utilisée pour chaque élément. Puis j'ai ajouté un ScaleTransform
comme LayoutTransform
au DataTemplate
, et j'ai ajouté un DataTrigger
pour animer la transform:
<Style x:Key="FilterCollapse" TargetType="{x:Type StackPanel}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsVisible}" Value="False">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
To="0"
Duration="0:0:0.5"/>
<DoubleAnimation Storyboard.TargetProperty="LayoutTransform.ScaleY"
To="0"
BeginTime="0:0:0.0"
Duration="0:0:0.5"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="LayoutTransform.ScaleY"
To="1"
Duration="0:0:0.5"/>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
To="1"
BeginTime="0:0:0.5"
Duration="0:0:0.5"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
<DataTemplate x:Key="MyTemplate">
<StackPanel Style="{StaticResource FilterCollapse}">
<StackPanel.LayoutTransform>
<ScaleTransform ScaleX="1" ScaleY="1"/>
</StackPanel.LayoutTransform>
Si l'utilisateur filtre maintenant tout fonctionne bien. Mais le problème que j'ai est que si quelque chose a changé dans la liste (ajout de nouveaux éléments, ...) le Storyboard
est à nouveau appliqué, bien que l'utilisateur ait filtré n'importe quoi. La raison en est que, après que la liste a été modifiée, le DataTemplate
sera recréé avec un ScaleY de "1", puis le DataTrigger
est à nouveau appliqué et le tableau de résultats est de nouveau appliqué.
Dans ce cas, je voudrais qu'aucune animation ne se produise.
Des idées comment faire ceci? tia Martin