Modification ListBox d'images

Version imprimable

14/06/2010, 14h22
Z4ng3tsu

Modification ListBox d'images

Bonjour à tous !

Voilà, je souhaite développer un petit jeu de carte et la partie visuelle me pose des soucis (pas encore très doué sur ça je dirai...). J'aimerai, pour représenter les cartes en main du joueur, utiliser une listbox contenant des images (les cartes de la main du joueur) pour faire un affichage horizontal de ces cartes avec léger chevauchement l'une sur l'autre.
Seulement voilà, je ne sais pas comment plier une ListBox à mon désir :P. Quelqu'un aurait-il une explication ou bien un site expliquant de façon cool (si on peut éviter les 100 lignes de code brut où faut vraiment chercher partout, ce serait génial) comment modifier le contrôle qu'est la ListBox.

Merci d'avance à tous ceux qui prendront le temps de me répondre.
14/06/2010, 14h40
Samuel Blanchard

Bonjour,

Pour le look de tes items (de tes cartes), il faut modifier la propriété de la ListBox ItemContainerStyle. Blend fait ça très bien.

Pour le positionnement des items, regarde la propriété ItemsPanel. Il te faudra sans doute developper un Panel Spécifique.

Pour le comportement de la Listbox tu peux aller voir ça :

http://samuel-blanchard.developpez.c...tbox/index.php
14/06/2010, 14h40
Z4ng3tsu

Bon première avancée (je n'ai pas fait d'EDIT vu que c'est une évo du post), j'ai réussi à faire la ListBox de façon horizontal. Me reste plus qu'à générer le léger chevauchement des images entre elles genre 10px. Si quelqu'un sait comment faire... :)

Ci-joint le Style de ta ListBoxItem (à mettre en ressource). Remarque bien la propriété padding que j'ai modifiée à "-10,3,3,0".

Code:

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
		<Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
			<Setter Property="Padding" Value="-10,3,3,0"/>
			<Setter Property="HorizontalContentAlignment" Value="Left"/>
			<Setter Property="VerticalContentAlignment" Value="Top"/>
			<Setter Property="Background" Value="Transparent"/>
			<Setter Property="BorderThickness" Value="1"/>
			<Setter Property="TabNavigation" Value="Local"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="ListBoxItem">
						<Grid Background="{TemplateBinding Background}">
							<VisualStateManager.VisualStateGroups>
								<VisualStateGroup x:Name="CommonStates">
									<VisualState x:Name="Normal"/>
									<VisualState x:Name="MouseOver">
										<Storyboard>
											<DoubleAnimationUsingKeyFrames Storyboard.TargetName="fillColor" Storyboard.TargetProperty="Opacity">
												<SplineDoubleKeyFrame KeyTime="0" Value=".35"/>
											</DoubleAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="Disabled">
										<Storyboard>
											<DoubleAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Opacity">
												<SplineDoubleKeyFrame KeyTime="0" Value=".55"/>
											</DoubleAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
								<VisualStateGroup x:Name="SelectionStates">
									<VisualState x:Name="Unselected"/>
									<VisualState x:Name="Selected">
										<Storyboard>
											<DoubleAnimationUsingKeyFrames Storyboard.TargetName="fillColor2" Storyboard.TargetProperty="Opacity">
												<SplineDoubleKeyFrame KeyTime="0" Value=".75"/>
											</DoubleAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
								<VisualStateGroup x:Name="FocusStates">
									<VisualState x:Name="Focused">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility">
												<DiscreteObjectKeyFrame KeyTime="0">
													<DiscreteObjectKeyFrame.Value>
														<Visibility>Visible</Visibility>
													</DiscreteObjectKeyFrame.Value>
												</DiscreteObjectKeyFrame>
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="Unfocused"/>
								</VisualStateGroup>
							</VisualStateManager.VisualStateGroups>
							<Rectangle x:Name="fillColor" Fill="#FFBADDE9" RadiusX="1" RadiusY="1" IsHitTestVisible="False" Opacity="0"/>
							<Rectangle x:Name="fillColor2" Fill="#FFBADDE9" RadiusX="1" RadiusY="1" IsHitTestVisible="False" Opacity="0"/>
							<ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
							<Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1" StrokeThickness="1" RadiusX="1" RadiusY="1" Visibility="Collapsed"/>
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>

puis tu fixes le style sur ta ListBox :

Code:

<ListBox ItemContainerStyle="{StaticResource ListBoxItemStyle1}"/>

14/06/2010, 15h01
Z4ng3tsu

Yes merci bien !

Le style est pas mal. Ca fait bien un petit chauvechement comme je le souhaite. Reste plus qu'à paufiner le style et ce sera nickel.
T'as généré ce code sous Blend ou tu l'as fait toi même ? (Si la réponse est blend, tu règles où ce genre de truc ?)
14/06/2010, 15h09
Samuel Blanchard

Sous Blend.

Tu places une ListBox sur Page puis tu fais bouton droit sur la ListBox -> Edit Additional Templates -> Edit Generated Item Container (ItemContainerStyle) -> Edit a Copy et voila !
14/06/2010, 15h17
Z4ng3tsu

Ah ouais nickel ! Ecoute un grand merci encore pour ton aide. Je vais utilise ton style avec une petite touche personnelle par dessus et ça devrait le faire sans problème.

Encore merci et bonne continuation !!!
14/06/2010, 15h20
Samuel Blanchard

Merci à toi aussi :)