Discussion :

[mat72220]

Bonjour,
Je suis en train de réaliser un diaporama en WPF.
Voici le fonctionnement général.
j'ai un fichier XML qui est chargé dans un ObservableCollection.
Ensuite, j'ai un viewModel qui accède à cette collection.
Dans le viewModel j'ai créé des fonctions permettant de naviguer dans cette liste ainsi que de retourner l'élément suivant,précédent, courant.
Enfin, ma vue en XAML et un fichier .cs associé. Ce fichier réagit au clic des boutons (suivant, précédent) et aux évènements multitouch (glisser pour chager d'image).

Le principe utilisé aujourd'hui pour changer d'image est d'avoir l'image visible ainsi qu'une autre image cachée. Lors de la navigation dans le diaporama, je fais disparaitre l'image visible, fait apparaître l'image cachée à l'aide d'une animation.

Tout fonctionne parfaitement. Par contre j'aimerai réaliser la même chase en utilisant le databinding. Comment est-ce possible ? Si je lie la source de mon image à la liste, comment est-il possible de pouvoir changer d'image en utilisant une animation ?

De plus comment utiliser les commandes pour les évènement multitouch (pour les slides à gauche ou à droite) ?

D'avance Merci.

[GuruuMeditation]

Pour les commandes, si tu utilises un Framework mvvm comme mvvm light, tu as des behaviors pour lier un évent à une commande.

Pour les animations, je gérerais ça dans le contrôle. Par exemple,tu crées une dp de type image avec l'image courante, au changement de cette propriété tu fais l'animation entre l'ancienne et la nouvelle image.

[MABROUKI]

bonjour mat72220

Bien raisonne .Comment le faire avec DataBinding .
Databinding ne pas l'oublier veut dire DataTemplate(gerer l'interface avec les donnees).
C'est ce qui fait dans le code qui suit -du à un certain Douglas Stockwell- en utilisant :
-un ListBox pour choisir l'image à afficher
-un Combo pour choisir une transition (avec effet "wipe" ou ce que tu veux)
-un ContentControl principal binde à selectedItem du ListBox mais ...dont le ContentTemplate est binde à prop Tag du Combo(qui contient un DataTemplate avec 2 ContentControls superposes dans un Grid & bindes au "transitioner"),

Le class "behavior" transitioner recupere l'objet binde(SelectedItem du listbox) actuel dans sa prop source.
-suivant l'etat de sa prop State actuelle (A ou B) affecte le contenu de Source à la prop DisplayA ou DisplayB .
Les 2 ContentControl sont bindes :
- le 1er à displayA.
- le 2eme à displyaB.
Je ne m'etendrai pas davantage sur les raffinements suivant(Visibility binde au Tansition.State,Storybord rajoute pour gerer l'opacity etc..)...
L'effet "Wipe" consiste à rajouter un 2eme grid englobant & le faire defiler d'une valeur negative egale à moins son ActualWidth ....d'ou le class ValueConverter Negative.cs....

code behind du simple class behavior Transition.cs:

Code :

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
 
using System.Windows;
namespace TransitionSample
{
    public class Transition : FrameworkElement
    {
	    public enum TransitionState
	    {
		    A,
		    B
	    }
 
	    public static DependencyProperty SourceProperty;
	    public static DependencyProperty DisplayAProperty;
	    public static DependencyProperty DisplayBProperty;
	    public static DependencyProperty StateProperty;
 
	    public object Source
	    {
		    get { return this.GetValue(SourceProperty); }
		    set { this.SetValue(SourceProperty, value); }
	    }
 
	    public object DisplayA
	    {
		    get { return this.GetValue(DisplayAProperty); }
		    set { this.SetValue(DisplayAProperty, value); }
	    }
 
	    public object DisplayB
	    {
		    get { return this.GetValue(DisplayBProperty); }
		    set { this.SetValue(DisplayBProperty, value); }
	    }
 
	    public TransitionState State
	    {
		    get { return (TransitionState) this.GetValue(StateProperty); }
		    set { this.SetValue(StateProperty, value); }
	    }
 
	    private void Swap()
	    {
		    if (this.State == TransitionState.A)
		    {
			    this.DisplayB = this.Source;
			    this.State = TransitionState.B;
		    }
		    else
		    {
			    this.DisplayA = this.Source;
			    this.State = TransitionState.A;
		    }
	    }
 
	    static Transition()
	    {
		    SourceProperty = DependencyProperty.Register(
			    "Source", 
			    typeof(object), 
			    typeof(Transition), 
			    new PropertyMetadata(
				    delegate(DependencyObject obj, DependencyPropertyChangedEventArgs args)
				    {
					    ((Transition)obj).Swap();
				    }));
 
		    DisplayAProperty = DependencyProperty.Register(
			    "DisplayA", 
			    typeof(object), 
			    typeof(Transition));
 
		    DisplayBProperty = DependencyProperty.Register(
			    "DisplayB", 
			    typeof(object), 
			    typeof(Transition));
 
		    StateProperty = DependencyProperty.Register(
			    "State", 
			    typeof(TransitionState), 
			    typeof(Transition), 
			    new PropertyMetadata(TransitionState.A));
	    }
    }
}

code behind du class value converter Negative.cs:

Code :

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
 
using System.Windows;
using System.Windows.Data;
namespace TransitionSample
{
    public class Negative : IValueConverter
    {
	    #region IValueConverter Members
	    public static Negative Instance
	    {
		    get { return new Negative(); }
	    }
	    public object Convert(object value, System.Type targetType, object parameter, System.Globalization.CultureInfo culture)
	    {
		    if (value is double)
			    return -1.0 * (double)value;
 
		    else
			    throw new System.ArgumentException();
	    }
 
	    public object ConvertBack(object value, System.Type targetType, object parameter, System.Globalization.CultureInfo culture)
	    {
		    throw new System.Exception("The method or operation is not implemented.");
	    }
 
	    #endregion
    }
}

code xaml du winform (le listbox est charge en ligne du site static.flickr.com avec les images de NY mais tu peux faire ton class MyImage et son ObservableCollection<MyImage> ):

Code :

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
 
<Window x:Class="TransitionSample.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
		xmlns:local="clr-namespace:TransitionSample" 
		SizeToContent="WidthAndHeight" ResizeMode="CanResize" Title="Transition Demo"
    >
	<Window.Resources>
		<DataTemplate x:Key="LearnAboutTransition">
			<StackPanel>
				<local:Transition x:Name="Transition" Source="{Binding}" />
				<TextBlock Text="{Binding ElementName=Transition, Path=State}" />
				<ContentControl Content="{Binding ElementName=Transition, Path=DisplayA}" />
				<ContentControl Content="{Binding ElementName=Transition, Path=DisplayB}" />
			</StackPanel>
		</DataTemplate>
		<DataTemplate x:Key="SimpleTransition">
			<Grid>
				<local:Transition x:Name="Transition" Source="{Binding}" />
				<ContentControl Name="a" Visibility="Hidden" 
												Content="{Binding ElementName=Transition, Path=DisplayA}" />
				<ContentControl Name="b" Visibility="Hidden" 
												Content="{Binding ElementName=Transition, Path=DisplayB}" />
			</Grid>
			<DataTemplate.Triggers>
				<DataTrigger Binding="{Binding ElementName=Transition, Path=State}" Value="A">
					<Setter TargetName="a" Property="Visibility" Value="Visible" />
				</DataTrigger>
				<DataTrigger Binding="{Binding ElementName=Transition, Path=State}" Value="B">
					<Setter TargetName="b" Property="Visibility" Value="Visible" />
				</DataTrigger>
			</DataTemplate.Triggers>
		</DataTemplate>
		<DataTemplate x:Key="WipeTransition">
			<Grid>
				<ContentControl x:Name="a" Visibility="Hidden" Content="{Binding ElementName=t, Path=DisplayA}" />
				<ContentControl x:Name="b" Visibility="Hidden" Content="{Binding ElementName=t, Path=DisplayB}" />
				<local:Transition x:Name="t" Source="{Binding}" />
			</Grid>
			<DataTemplate.Triggers>
				<DataTrigger Binding="{Binding ElementName=t, Path=State}" Value="A">
					<Setter TargetName="a" Property="Panel.ZIndex" Value="1" />
					<Setter TargetName="a" Property="Visibility" Value="Visible" />
					<Setter TargetName="a" Property="OpacityMask">
						<Setter.Value>
							<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
								<GradientStop Offset="0" Color="Black" />
								<GradientStop Offset="0" Color="Transparent" />
							</LinearGradientBrush>
						</Setter.Value>
					</Setter>
					<DataTrigger.EnterActions>
						<BeginStoryboard>
							<Storyboard>
								<DoubleAnimation Storyboard.TargetName="a" 
																 Storyboard.TargetProperty="OpacityMask.(GradientBrush.GradientStops)[1].Offset" 
																 By="1"  Duration="0:0:0.5"   />
								<DoubleAnimation Storyboard.TargetName="a" 
																 Storyboard.TargetProperty="OpacityMask.(GradientBrush.GradientStops)[0].Offset" 
																 By="1" Duration="0:0:0.5" 
																 BeginTime="0:0:0.05" />
								<ObjectAnimationUsingKeyFrames Storyboard.TargetName="b"
																							 Storyboard.TargetProperty="Visibility" 
																							 Duration="0:0:0.55" FillBehavior="Stop">
									<DiscreteObjectKeyFrame KeyTime="0:0:0">
										<DiscreteObjectKeyFrame.Value>
											<Visibility>Visible</Visibility>
										</DiscreteObjectKeyFrame.Value>
									</DiscreteObjectKeyFrame>
								</ObjectAnimationUsingKeyFrames>
							</Storyboard>
						</BeginStoryboard>
					</DataTrigger.EnterActions>
				</DataTrigger>
				<DataTrigger Binding="{Binding ElementName=t, Path=State}" Value="B">
					<Setter TargetName="b" Property="Panel.ZIndex" Value="1" />
					<Setter TargetName="b" Property="Visibility" Value="Visible" />
					<Setter TargetName="b" Property="OpacityMask">
						<Setter.Value>
							<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
								<GradientStop Offset="0" Color="Black" />
								<GradientStop Offset="0" Color="Transparent" />
							</LinearGradientBrush>
						</Setter.Value>
					</Setter>
					<DataTrigger.EnterActions>
						<BeginStoryboard>
							<Storyboard>
								<DoubleAnimation Storyboard.TargetName="b" 
																 Storyboard.TargetProperty="OpacityMask.(GradientBrush.GradientStops)[1].Offset" 
																 By="1"  Duration="0:0:0.5"   />
								<DoubleAnimation Storyboard.TargetName="b" 
																 Storyboard.TargetProperty="OpacityMask.(GradientBrush.GradientStops)[0].Offset" 
																 By="1" Duration="0:0:0.5" 
																 BeginTime="0:0:0.05" />
								<ObjectAnimationUsingKeyFrames Storyboard.TargetName="a"
																							 Storyboard.TargetProperty="Visibility" 
																							 Duration="0:0:0.55" FillBehavior="Stop">
									<DiscreteObjectKeyFrame KeyTime="0:0:0">
										<DiscreteObjectKeyFrame.Value>
											<Visibility>Visible</Visibility>
										</DiscreteObjectKeyFrame.Value>
									</DiscreteObjectKeyFrame>
								</ObjectAnimationUsingKeyFrames>
							</Storyboard>
						</BeginStoryboard>
					</DataTrigger.EnterActions>
				</DataTrigger>
			</DataTemplate.Triggers>
		</DataTemplate>
		<DataTemplate x:Key="FadeTransition">
			<Grid>
				<local:Transition x:Name="t"  Source="{Binding}" />
				<ContentControl x:Name="a" Visibility="Hidden" Opacity="1" Content="{Binding ElementName=t, Path=DisplayA}" />
				<ContentControl x:Name="b" Visibility="Hidden" Opacity="1" Content="{Binding ElementName=t, Path=DisplayB}" />
			</Grid>
			<DataTemplate.Triggers>
				<DataTrigger Binding="{Binding ElementName=t, Path=State}" Value="A">
					<Setter TargetName="a" Property="Panel.ZIndex" Value="1" />
					<Setter TargetName="a" Property="Visibility" Value="Visible" />
					<DataTrigger.EnterActions>
						<BeginStoryboard>
							<Storyboard>
								<DoubleAnimation Storyboard.TargetName="a" Storyboard.TargetProperty="Opacity"
												From="0" To="1" Duration="0:0:0.5" FillBehavior="HoldEnd" />
								<ObjectAnimationUsingKeyFrames 
									Storyboard.TargetName="b"
									Storyboard.TargetProperty="Visibility" 
									Duration="0:0:0.5" FillBehavior="Stop"
								>
									<DiscreteObjectKeyFrame KeyTime="0:0:0">
										<DiscreteObjectKeyFrame.Value>
											<Visibility>Visible</Visibility>
										</DiscreteObjectKeyFrame.Value>
									</DiscreteObjectKeyFrame>
								</ObjectAnimationUsingKeyFrames>
							</Storyboard>
						</BeginStoryboard>
					</DataTrigger.EnterActions>
				</DataTrigger>
				<DataTrigger Binding="{Binding ElementName=t, Path=State}" Value="B">
					<Setter TargetName="b" Property="Panel.ZIndex" Value="1" />
					<Setter TargetName="b" Property="Visibility" Value="Visible" />
					<DataTrigger.EnterActions>
						<BeginStoryboard>
							<Storyboard>
								<DoubleAnimation Storyboard.TargetName="b" Storyboard.TargetProperty="Opacity"
												 From="0" To="1" Duration="0:0:0.5" FillBehavior="HoldEnd" />
								<ObjectAnimationUsingKeyFrames 
									Storyboard.TargetName="a"
									Storyboard.TargetProperty="Visibility" 
									Duration="0:0:0.5" FillBehavior="Stop"
								>
									<DiscreteObjectKeyFrame KeyTime="0:0:0">
										<DiscreteObjectKeyFrame.Value>
											<Visibility>Visible</Visibility>
										</DiscreteObjectKeyFrame.Value>
									</DiscreteObjectKeyFrame>
								</ObjectAnimationUsingKeyFrames>
							</Storyboard>
						</BeginStoryboard>
					</DataTrigger.EnterActions>
				</DataTrigger>
			</DataTemplate.Triggers>
		</DataTemplate>
		<DataTemplate x:Key="NYTimesTransition">
			<DataTemplate.Resources>
				<Visibility x:Key="Visible">Visible</Visibility>
				<Storyboard x:Key="SlideStoryboard">
					<DoubleAnimation 
						Storyboard.TargetName="container" 
						Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)"
						From="0" FillBehavior="Stop"
						Duration="0:0:0.2"
						DecelerationRatio="0.5"/>
					<ObjectAnimationUsingKeyFrames 
						Storyboard.TargetName="a" 
						Storyboard.TargetProperty="Visibility" 
						Duration="0:0:0.2" FillBehavior="Stop">
						<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource Visible}" />
					</ObjectAnimationUsingKeyFrames>
					<ObjectAnimationUsingKeyFrames 
						Storyboard.TargetName="b"
						Storyboard.TargetProperty="Visibility" 
						Duration="0:0:0.2" FillBehavior="Stop">
						<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource Visible}" />
					</ObjectAnimationUsingKeyFrames>
				</Storyboard>
			</DataTemplate.Resources>
			<Grid ClipToBounds="True">
				<local:Transition x:Name="transition" Source="{Binding}" />
				<Grid Name="container">
					<Grid.RenderTransform>
						<TranslateTransform  X="{Binding ElementName=container, Path=ActualWidth, Converter={x:Static local:Negative.Instance}}" />
					</Grid.RenderTransform>
					<ContentControl Name="a" Visibility="Hidden" Content="{Binding ElementName=transition, Path=DisplayA}" />
					<ContentControl Name="b" Visibility="Hidden" Content="{Binding ElementName=transition, Path=DisplayB}" />
				</Grid>
			</Grid>
			<DataTemplate.Triggers>
				<DataTrigger Binding="{Binding ElementName=transition, Path=State}" Value="A">
					<Setter TargetName="a" Property="Visibility" Value="Visible" />
					<Setter TargetName="a" Property="RenderTransform">
						<Setter.Value>
							<TranslateTransform X="{Binding ElementName=container, Path=ActualWidth}" />
						</Setter.Value>
					</Setter>
					<DataTrigger.EnterActions>
						<BeginStoryboard Storyboard="{StaticResource SlideStoryboard}" />
					</DataTrigger.EnterActions>
				</DataTrigger>
				<DataTrigger Binding="{Binding ElementName=transition, Path=State}" Value="B">
					<Setter TargetName="b" Property="Visibility" Value="Visible" />
					<Setter TargetName="b" Property="RenderTransform">
						<Setter.Value>
							<TranslateTransform X="{Binding ElementName=container, Path=ActualWidth}" />
						</Setter.Value>
					</Setter>
					<DataTrigger.EnterActions>
						<BeginStoryboard Storyboard="{StaticResource SlideStoryboard}" />
					</DataTrigger.EnterActions>
				</DataTrigger>
			</DataTemplate.Triggers>
		</DataTemplate>
	</Window.Resources>
	<DockPanel>
		<ContentControl DockPanel.Dock="Right"  
			Content="{Binding ElementName=Items, Path=SelectedItem}" 
			ContentTemplate="{Binding ElementName=Transitions, Path=SelectedItem.Tag}">
			<ContentControl.Resources>
				<DataTemplate DataType="{x:Type ImageSource}">
					<Grid>
						<Image StretchDirection="DownOnly" Source="{Binding}" />
					</Grid>
				</DataTemplate>
			</ContentControl.Resources>
		</ContentControl>
		<ComboBox Name="Transitions" DockPanel.Dock="Top" SelectedIndex="0">
			<ComboBox.ItemsSource>
				<x:Array Type="{x:Type TextBlock}">
					<TextBlock Text="New York Times" Tag="{StaticResource NYTimesTransition}" />
					<TextBlock Text="Fade" Tag="{StaticResource FadeTransition}" />
					<TextBlock Text="Wipe" Tag="{StaticResource WipeTransition}" />
					<TextBlock Text="Learn About" Tag="{StaticResource LearnAboutTransition}" />
					<TextBlock Text="Simple" Tag="{StaticResource SimpleTransition}" />
				</x:Array>
			</ComboBox.ItemsSource>
		</ComboBox>
		<ListBox Name="Items" SelectedIndex="0">
			<ListBox.Resources>
				<DataTemplate DataType="{x:Type ImageSource}">
					<Image Margin="3" Width="100" Source="{Binding}" />
				</DataTemplate>
			</ListBox.Resources>
			<ListBox.ItemsSource>
				<x:Array Type="{x:Type ImageSource}">
					<ImageSource>http://static.flickr.com/34/70703587_b35cf6d9eb.jpg</ImageSource>
					<ImageSource>http://static.flickr.com/20/70703557_494d721b23.jpg</ImageSource>
					<ImageSource>http://static.flickr.com/35/70703504_3ebf8f0150.jpg</ImageSource>
					<ImageSource>http://static.flickr.com/35/70703474_18ef30450f.jpg</ImageSource>
				</x:Array>
			</ListBox.ItemsSource>
		</ListBox>
	</DockPanel>
</Window>

zero code behind du winform....

L'effet "wipe" peut etre illustre par ce simple exemple:

Code :

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
 
 
<Window x:Class="TransitionSample.Window2"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window2" Height="300" Width="300">
    <Window.Resources>
        <Storyboard x:Key="SlideStoryboard">
            <DoubleAnimation 
				Storyboard.TargetName="containerGrid" 
				Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)"
				From="0" FillBehavior="Stop"
				Duration="0:0:0.2"
				DecelerationRatio="0.5"/>
        </Storyboard>
    </Window.Resources>
    <Grid
        Background="Pink"
        x:Name="containerGrid" >
 
        <Grid.RenderTransform>
            <TranslateTransform X="-200">
            </TranslateTransform>
        </Grid.RenderTransform>
        <Grid.Triggers>
            <EventTrigger RoutedEvent="Grid.MouseEnter">
                <BeginStoryboard Storyboard="{StaticResource SlideStoryboard}" />
            </EventTrigger>
            <EventTrigger RoutedEvent="Grid.MouseLeave">
                <BeginStoryboard Storyboard="{StaticResource SlideStoryboard}" />
            </EventTrigger>
        </Grid.Triggers>
        <TextBlock
            Margin="20"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            TextAlignment="Center"
            Text="DIAPORAMA"
            FontSize="24"
            Foreground="White" 
            Background="DarkBlue" 
            FontFamily="Arial" 
            FontStyle="Italic">
        </TextBlock>
    </Grid>
</Window>

Lien du blog de Douglas Stockwell:
http://www.google.fr/url?sa=t&rct=j&q=transitions%20in%20wpf%20-%20douglas%20stockwell's%20weblog&source=web&cd=1&ved=0CEoQFjAA&url=http%3A%2F%2Fwww.11011.net%2Fwpf-transitions&ei=7egmUPLyIubT4QThnoHQBQ&usg=AFQjCNGAQleIQiBz27IPYT4M-c8Ko7Ujzw
bon diaporama..........................

[john-thiriet]

Bonjour,

Je te souhaite de trouver une solution à ton problème via ViewModel puisqu'il semble que c'est ce que tu souhaite faire. Si je me permet d'intervenir ici c'est que je pense que l'approche par ViewModel dans ce cas précis est mauvaise. Je m'explique.

Ici la majorité de ton comportement est liée à la vue et juste à la vue. Seule la partie chargement des données de ton Diaporama a effectivement un intérêt à rester dans le viewmodel.

Voici ce que moi j'aurai fait.
J'aurai créé un CustomControl héritant de ItemsControl, appellons le DiaporamaControl.
Dans le template DiaporamaControl j'aurai mis tout ce qui est nécessaire à la vue, VisualStates pour les transitions, Storyboard et par exemple une ListBox templatée pour afficher la liste des images.
Dans la méthode OnApplyTemplate de mon DiaporamaControl j'aurai récupéré l'instance de ma ListBox en appellant GetTemplateChild et je l'aurai enregistré dans une variable membre du contrôle pour pouvoir y accéder plus tard.
Je me serai aussi pluggué sur les différents évènement permettant de savoir quand la collection source du contôle est modifiée etc pour pouvoir savoir quand charger les images, switcher d'image active etc...
Tu peux aussi facilement gérer les évènements multitouch car tu es au niveau de la vue à cet endroit là.

Si ta collection d'images est très grande (ce qui serai donc une erreur d'ergonomie à mon sens pour un Diaporama mais acceptable pour un FlipView) tu peux la virtualiser et donc être tranquille au niveau mémoire.

Simon Ferquel a fait une telle chose dans sa library FlowLayouts pour Silverlight. A mon sens réadapter son code où s'en inspirer en WPF est assez facile. Même en ce qui concerne l'élément Projection.

http://slflow.codeplex.com/

Je te laisse juge de ce que tu trouves le meilleur néanmoins réfléchis-y bien. A mon avis tu te compliques un maximum la vie pour rien du tout.