Discussion :

[Oberown]

Bonjour,

J'utilise ce control de Carousel http://wpfcarousel.codeplex.com/
Il hérite du canvas.

J'aurais besoin de binder mes élèments à ce canvas.

Comment faire ?

Je n'ai pas réussi à binder proprement à la manière MVVM.

Merci beaucoup de votre aide.

[MABROUKI]

bonjour Oberown
Canvas est de la famille panel comme StackPanel ,WrapPanel comme tu dois t'en rendre compte...
Pour se "binder" il faut un control et donc "ton canvas" doit etre wrappe dans un ItemsControl qui lui sera binde à ta liste de DataItem....
Pour etre wrappe dans un ItemsControl (jouer le role de IsItemHost) un panel doit satisfaire 2 conditions de taille :
-il ne doit heberger aucun autre Control à l'exclusion de ceux generes par ItemsControl.....
-la gestion de ces controls(en general des ContentPresener) est du seul ressort de ItemsControl
Voici un exemple :

Code xaml :

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
 
<ItemsControl
	ItemsSource="{Binding Path=ItemsToShowInCanvas}">   
	<ItemsControl.ItemsPanel>        
		<ItemsPanelTemplate>            
			<Canvas/>      
		</ItemsPanelTemplate>   
	</ItemsControl.ItemsPanel> 
	<ItemsControl.ItemContainerStyle>  
	<Style 
		TargetType="ContentPresenter">    
		<Setter Property="Canvas.Left" Value="{Binding Left}"/>     
		<Setter Property="Canvas.Top" Value="{Binding Top}"/>   
	</Style> 
	</ItemsControl.ItemContainerStyle>  
	<ItemsControl.ItemTemplate>   
		<DataTemplate>       
				<TextBlock Text="{Binding Path=Text}" />  
		</DataTemplate>     
	</ItemsControl.ItemTemplate> 
</ItemsControl>

Le code behind du class data exemple:

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
 
 public class ItemDetail
    {
        public string Text { get; set; }
        public double xLeft { get; set; }
        public double yTop { get; set; }    
 
    }
    public class ItemsToShowInCanvas : ObservableCollection<ItemDetail>
    {
        public ItemsToShowInCanvas()
        {
          this.Add(new ItemDetail { Text = "ABC", yTop = 10, xLeft = 200 });
          this.Add(new ItemDetail { Text = "DEF", yTop = 100, xLeft = 300 });
          this.Add( new ItemDetail { Text = "PQR", yTop = 50, xLeft = 150 } );
        }
 
    }

Helas le CarouselControl (il devrait rigoureusement s'appeler CarrouselPanel) souffre d'un defaut :
-il manipule ses "childs elements " ce que refuse Un ItemsControl pour raoson de prerogative....
Aussi je te suggere un code plus addapte d'un UserControl de Sacha Barber avec meme un exemple pour MVVM...

L'utilisation de celui-ci est un peu plus elabore:
-reference au control dans ton projet
-ref aux assemblies Expression.Samples.PathListBoxUtils.dll,Microsoft.Expression.Controls.dll,Microsoft.Expression.Drawing.dll,Microsoft.Expression.Interactions.dll & System.Windows.Interactivity.dll.....

Mieux il:
-comporte un exemple pour une utilisation dans un projet avec MVVM
-le "path" geometrique est à ta merci ,tu mettra ce que veux(un cercle,un ellipse ou un serpentin.....)
-des images graces aux styles et datatemplates de l'appli sont customizables
-les assemblies cites sont fournis dans le code de l'auteur et de plus ils sont open source sur le site CodePlex.


ici le lien code project:
http://www.google.fr/url?sa=t&rct=j&...fnT8gct6d8Z4VQ

le lien CodePLex pour le kit PathListBoxUtils for Expression Blend 4 à toutes fins utilies mais utilisable en WPF(et utilise par l'auteur)...

http://expressionblend.codeplex.com/releases/view/44915
bon code....

[Oberown]

En effet il est pas mal.
Mais il bug un peu quand on click pleins de fois vite fait sur une fléche.

Comment ca s'appelle un caroussel où on ne voit pas les élèments derrieres, mais qui fait une simple ligne ?