Discussion :

[Oberown]

Bonjour
J'ai ItemsControl qui contient une control qui affiche un nom et un score.
Le score change, et je souhaiterais faire une animation pour que la liste se remette en ordre.

Avez-vous des pistes de comment faire ?
Je souhaite juste que les control se déplacent pour aller au bon endroit.

Merci

[DonQuiche]

Bonjour, voici l'approche de base pour faire ça :
1) Tu relèves les positions actuelles de tous les contrôles susceptibles d'être déplacés.
2) Tu réarranges les contrôles pour correspondre au nouvel ordre
3) Pour chaque contrôle qui a bougé, tu appliques une RenderTransform qui les fera apparaître à l'endroit où ils étaient précédemment et tu définis les animations à suivre pour revenir progressivement à une RenderTransform nulle (identité).

Restent à gérer les cas des items qui vont devoir disparaître (ils ne sont plus dans Items) et ceux des nouveaux items (transformations de l'opacité ?), etc. Qui plus est, le réglage des animations à suivre peut être tatillon et on peut préférer une approche manuelle (en souscrivant à l'événement du rendu d'une frame).

[goast]

Regarde du coté de FluidMoveBehavior il fait tout à ta place, il suffit de retrier ton ObservableCollection.

[Oberown]

J'ai testé, mais je n'ai pas réussi.

Quand j'appuie sur le bouton, ça change la position de mes images, mais il n'y a pas d'animation.

Code XML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<Window x:Class="BuzzerGame.Window1"
 
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 
       xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
 
       xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"     
 
       Title="MainWindow" Height="350" Width="525">
 
    <Grid>
 
        <Grid.ColumnDefinitions>
 
            <ColumnDefinition Width="Auto"/>
 
            <ColumnDefinition Width="*"/>
 
        </Grid.ColumnDefinitions>
 
 
 
 
        <ListView ItemsSource="{Binding MyItems}" Name="mylistBox">
 
            <ListView.ItemTemplate>
 
                <DataTemplate>
 
                    <StackPanel>
 
                        <Image Source="{Binding Image}" Width="200">
 
                            <i:Interaction.Behaviors>
 
                                <ei:FluidMoveSetTagBehavior Tag="DataContext"/>
 
                            </i:Interaction.Behaviors>
 
                        </Image>
 
                    </StackPanel>
 
                </DataTemplate>
 
            </ListView.ItemTemplate>
 
        </ListView>
 
        <StackPanel Grid.Column="1">
 
 
            <Button Content="Button" Height="23" Name="button1" Width="75" Click="button1_Click" />
        </StackPanel>
 
    </Grid>
 
</Window>

Code C# :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using System.Collections.ObjectModel;
 
namespace BuzzerGame
{
    /// <summary>
    /// Logique d'interaction pour Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
 
 
        public class MyItemType
        {
            public System.Windows.Media.ImageSource Image { get; set; }
        }
 
 
 
        public Window1()
        {
            InitializeComponent();
 
            this.DataContext = this;
 
            MyItems = new ObservableCollection<MyItemType>();
 
            MyItems.Add(new MyItemType { Image = new BitmapImage(new Uri(@"C:\Users\a.jpg")) });
            MyItems.Add(new MyItemType { Image = new BitmapImage(new Uri(@"C:\Users\b.jpg")) });
            MyItems.Add(new MyItemType { Image = new BitmapImage(new Uri(@"C:\Users\c.jpg")) });
        }
 
 
 
        public ObservableCollection<MyItemType> MyItems { get; set; }
 
        private void button1_Click(object sender, RoutedEventArgs e)
        {
            MyItems.Move(0, 1);          
        }
 
    }
}

[alves.seb]

J'ai récemment bossé sur une problématique similaire, cela pourra peut-être t'aider : http://www.sebastien-alves.fr/index....r-wpf-preview/