Quel format pour itemsSource d'un itemControl ?

Version imprimable

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:

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 ?

04/01/2018, 20h23
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
05/01/2018, 00h59
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...
05/01/2018, 13h37
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:

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

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:

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:

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