Discussion :

[CherryChips]

Bonjour, j'essaie de créer l'interface d'un jeu de plateau en WPF. Pour représenter le plateau et ses différentes pièces, j'utilise un ItemsControl comme nous l'a conseillé notre prof. Seulement, même après de longues heures de recherches, je n'arrive pas à comprendre ce que je dois mettre en ItemsSource.
Dans mon modèle, mon plateau est un tableau à deux dimensions qui contient des objets de type Pièce. J'aimerais afficher un cercle si une case contient une pièce, et rien si la case contient null.

Voici le code que j'ai fait pour l'instant :

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
<Grid>
        <ItemsControl Name="ListPieces" ItemsSource="{Binding Liste}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Rows="{Binding Size}"  Columns="{Binding Size}">
                    </UniformGrid>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
 
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Ellipse  Name="Piece" Visibility="Visible" Fill="Yellow" />
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
 
        </ItemsControl>
</Grid>

Je ne comprend pas ce que je dois mettre en entrée de ItemsSource ?

[Pol63]

soit tu as une collection de pièce (classe) avec des coordonnées et il te faut un container capable d'aller lire ces coordonnées pour placer les pièces (grid avec un style qui permet de binder grid.column et grid.row)
soit tu as une collection de choses qui peuvent être Nothing s'il n'y a rien auquel cas c'est l'itemtemplate qui doit gérer le fait que c'est un null

après si tu ne sais pas quoi mettre dans ta collection, personne d'autre ne le sauras pour toi, l'interface s'adapte aux données, donc oublie l'interface et réfléchit d'abord à comment coder en orienté objet ton truc
d'ailleurs certains font d'abord des tests de tout leur code sans faire l'interface

[CherryChips]

J'ai déjà codé mon modèle et fais mes tests dessus, il ne me reste plus que l'interface à faire.
Mes pièces sont dans un tableau de Piece[7][7].

Je voudrais mettre la propriété visibility de l'ellipse à visible si la pièce est présente, et a colapsed sinon.
J'ai créer dans le code behind une liste (Liste dans mon code) qui contient le même nombre d'éléments que de case sur mon plateau, et la valeur de chaque élément est un boolean qui dit si la pièce doit être affichée où non. Mon code compile mais ne m'affiche rien du tout sur ma fenêtre...

[Noxen]

Tu peux préciser la propriété DataType pour que le DataTemplate ne soit invoqué que sur un type en particulier de données (ou ses types dérivés bien sûr).

Code XAML :

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

<DataTemplate DataType="{x:Type System:String}"><TextBlock Text="{Binding .}" /></DataTemplate>

[MABROUKI]

bonjour

Les notions de base du databinding sont mal maitrisées apparement ...
voici "the most simplest code " pour binder le UniformGrid à ta ListePieces !!!

code behind.cs data exemple des pièces :

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
 
using System;
using System.ComponentModel;
using System.Collections.ObjectModel;
namespace WpfTableauCroise
{
    public class Piece : INotifyPropertyChanged
    {
        private string id;
        public string ID
        {
            get { return id; }
            set { id = value; NotifypropertyChanged("ID"); }
        }
        private bool visible = true;
        public bool Visible
        {
            get { return visible; }
            set { visible = value; NotifypropertyChanged("Visible"); }
        }
        public event PropertyChangedEventHandler PropertyChanged;
        private void NotifypropertyChanged(string propName)
        {
            PropertyChangedEventHandler h = PropertyChanged;
            if (h != null)
                h(this, new PropertyChangedEventArgs(propName));
 
        }
    }
    public class ListPieces : ObservableCollection<Piece>, INotifyPropertyChanged
    {
        private Piece p;
        private Random rnd = new Random();//on randomize la visibilite piece
        public ListPieces()
        {
 
            for (int i = 0; i < numrow; i++)
            {
 
                for (int j = 0; j < numrow; j++)
                {
                    int n = rnd.Next(0, numrow * numrow);
                    p = new Piece() { ID = (i).ToString() + (j).ToString(), Visible = true };
                    if (n > 50)
                    {
                        p.Visible  = false;
                    }
 
                    this.Add(p);
                }
            }
        }
        private int numrow = 10;
        public int NumRow 
        {
            get { return numrow; }
            set { numrow = value; }
        }
 
    }
}

code XAML du Form User :

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
<Window x:Class="WpfTableauCroise.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfTableauCroise"
        mc:Ignorable="d"
        Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <local:ListPieces x:Key="pieces"/>
        <!--1er DataTemplate au fin d'illustration pour verifier placement des pieces-->
        <DataTemplate 
            x:Key="templatePieceButton">
            <Button Content="{Binding ID}"/>
        </DataTemplate>
        <!--2eme DataTemplate à utiliser avec Prop Visibility mise à Hidden-->
        <!--la prop Collapsed perturbe le Layout du Grid car le CP correspondant en est éliminé-->
        <!--notez presence du grid envellopant sinon Event="MouseLeftButtonDown" n'est plus trappé par le CP-->
        <DataTemplate 
            x:Key="templatePiece">
            <Grid Margin="5" Background="AntiqueWhite" >
                <Ellipse 
                    x:Name="ellip"
                    Margin="5" Fill="Yellow"  Stroke="Red"  />
            </Grid>
            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding Visible}" Value="false">
                    <Setter TargetName="ellip" Property="Visibility" Value="Hidden"/>
                </DataTrigger>
               
            </DataTemplate.Triggers> 
        </DataTemplate>
        <Style x:Key="cp" TargetType="{x:Type ContentPresenter}">
            <Style.Setters>
                <EventSetter Event="MouseLeftButtonDown" Handler="ContentPresenter_MouseLeftButtonDown"/>
            </Style.Setters>

        </Style>
    </Window.Resources>
    <Grid>
      
        <ItemsControl 
            ItemContainerStyle="{StaticResource cp}"
            ItemTemplate="{StaticResource  templatePiece }"
            ItemsSource="{Binding Source={StaticResource pieces} }"
           >
            <!--on fournit le nbre de rows UniformGrid se debrouille pour calculer ses colonnes-->
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate >
                    <UniformGrid Rows ="{Binding Path=NumRow,Mode=TwoWay}"   IsItemsHost="True" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
    </Grid>
</Window>
et son code behind.cs pour actionner le changement de visibilité par code :

	

	
Code  :
	
Sélectionner tout -
	Visualiser dans une fenêtre à part
	
123456789101112131415161718192021222324252627282930313233343536373839
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
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;
 
namespace WpfTableauCroise
{
    /// <summary>
    /// Logique d'interaction pour Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }
 
 
        private void ContentPresenter_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            ContentPresenter cp = sender as ContentPresenter;
            Piece p = cp.Content as Piece;
 
             p.Visible=!p.Visible ;
 
 
        }
    }
}
bon code...