Discussion :

[Z4ng3tsu]

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 . 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.

[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

[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...

[Samuel Blanchard]

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 :

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
		<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 :

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

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

[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 ?)

[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 !

[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 !!!