Discussion :

[Pol63]

bonjour,

j'ai un contentpresenter qui recoit une instance d'objet ayant en propriété un List<machin>
machin ayant X et Y (int) en propriété (entre autre)

ce contentpresenter a un datatemplate
je voudrais un affichage en grille, et que chaque élément se trouve dans la bonne cas via X et Y

j'étais parti sur un ItemsControl (pour le List<machin>) ayant un ItemsPanel = Grid
et un ItemTemplate ayant button avec Grid.Row et Grid.Column = {Binding X}

mais ca ne fonctionne pas, j'ai bien vu quelques workarround sur le net mais qui ne vont pas dans mon cas
(dont un avec un style, mais qui n'est pas pris en charge par UWP)

c'est le grid qui est pas codé pour qu'on bind ca ? le button qui trouve pas le grid au dessus ? y a un element au milieu qui fait que grid.row n'est pas atteignable ?
une autre possibilité que grid pour faire ca ?

merci

[MABROUKI]

bonjour

Si ,si le Grid possede bien 2 props attaches Grid.Row et Grid.Column bindables comme le Canvas ,mais il faut passer par l'ItemContanerStyle du ItemsControl ...!!!
Ce qui est embêtant avec le Grid contrairement au Canvas c'est que les Rows et les Colums doivent etre ajoutés au Grid préalablement !!!
L'autre embêtement c'est que une fois surmonté ce premier obstacle , comment faire pour fixer le nbre de Rows et Columns en passant d'une liste plate liée à ItemsControl...

voici le plus simple code possible que j'ai trouvé face à ce sacré grid....
code behind .cs du class data :

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
 
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Collections.ObjectModel;
using System.ComponentModel;
 
namespace WpfApplication1
{
    public class MonItem : INotifyPropertyChanged
    {
        private string nom;
        public string Nom
        {
            get { return nom; }
            set { nom = value; RaisePropertyChanged("Nom"); }
        }
 
        private int x;
        public int X
        {
            get { return x; }
            set { x = value; RaisePropertyChanged("X"); }
        }
        private int y;
        public int Y
        {
            get { return y; }
            set { y = value; RaisePropertyChanged("Y"); }
        }
 
        public event PropertyChangedEventHandler PropertyChanged;
        private void RaisePropertyChanged(string propName)
        {
            PropertyChangedEventHandler h = PropertyChanged;
            if (h != null)
                h(this, new PropertyChangedEventArgs(propName));
        }
    }
    public class MesItems : ObservableCollection<MonItem>
    {
        private MonItem item;
        public MesItems()
        {
 
            for (int i = 0; i < 4; i++)
            {
                for (int j = 0; j < 6; j++)
                {
                    string s = (j + 1).ToString() + (i + 1).ToString();
                    item = new MonItem()
                    {
                        Nom = "Item" + s,
                        X = j,
                        Y = i
                    };
                    this.Add(item);
                }
            }
        }
    }
}

code xaml du form :

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
 
 
<Window x:Class="WpfApplication1.Window2"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:local="clr-namespace:WpfApplication1" 
        Title="Window2" Height="300" Width="300">
    <Window.Resources>
        <DataTemplate x:Key="dt"
                      DataType="{x:Type local:Item}">
            <Button Margin="5" Content="{Binding Nom}"
                   Click="Button_Click"
                    />
        </DataTemplate>
    </Window.Resources>
    <Grid DataContext="{Binding }">
        <ItemsControl ItemsSource="{Binding }"
                      ItemTemplate="{StaticResource dt}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Grid
                        Margin="10"
                        IsItemsHost="true"
                        ShowGridLines="True" 
                        Loaded="Grid_Loaded"
                      >
                    </Grid>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemContainerStyle>
                <Style TargetType="ContentPresenter">
                    <Setter Property="Grid.Column" Value="{Binding X}"/>
                    <Setter Property="Grid.Row" Value="{Binding Y}"/>
                </Style>
            </ItemsControl.ItemContainerStyle>
        </ItemsControl>
    </Grid>
</Window>

et son code behind .cs du class data :

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
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
 
namespace WpfApplication1
{
    /// <summary>
    /// Logique d'interaction pour Window2.xaml
    /// </summary>
    public partial class Window2 : Window
    {
        private MesItems liste = null;
 
        public Window2()
        {
            InitializeComponent();
            liste = new MesItems();
            this.DataContext = liste;
        }
 
 
        // on trappe le grid pour l'ajout des lignes et colonnes
        private void Grid_Loaded(object sender, RoutedEventArgs e)
        {
            Grid grd = sender as Grid;
 
            // colonnes
            int cols = liste.Max(o => o.X);
            for (int i = 0; i < cols; i++)
            {
                ColumnDefinition colDef = new ColumnDefinition();
                colDef.Width = new GridLength(1.0, GridUnitType.Star);
                grd.ColumnDefinitions.Add(colDef);
            }
 
            // lignes
 
            int rows = liste.Max(o => o.Y);
 
            for (int i = 0; i < rows; i++)
            {
                RowDefinition rowDef = new RowDefinition();
                rowDef.Height = new GridLength(1.0, GridUnitType.Star);
                grd.RowDefinitions.Add(rowDef);
            }
        }
        public int Count { get {return liste.Count  ;} }
 
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            Button btn = sender as Button;
            btn.Background = br;
        }
        private Random rnd = new Random();
        private SolidColorBrush br
        {
            get { 
                byte[] b=new byte[3]; 
                rnd.NextBytes (b);
                return new SolidColorBrush(
                    Color.FromArgb(255,b[0],b[1],b[2]));
            } 
 
 
        }
 
    }
}

ton code dependra du besoin fonctionnel souhaité ...
bon code ....

[Pol63]

merci bien pour tout ce code mais ...
le problème est bien que je suis sur UWP, qui ressemble à WPF mais qui est reparti sur d'autres bases (c'est à la mode en ce moment chez MS)
et donc il n'y a pas tout pareil

j'ai du retirer ca :

Code XAML :

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

1
2
   IsItemsHost="true"
   ShowGridLines="True"

et transformer ca

Code :

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

1
2
<DataTemplate x:Key="dt"
                      x:DataType="local:MonItem">

(datatype n'existe pas et {x:Type} n'a pas l'air d'être apprécié)

et au final il me reste une erreur irrémédiable E_UNEXPECTED sur la ligne <Setter Property="Grid.Column" Value="{Binding X}"/>

ca compile quand même et ca se lance, mais je n'ai qu'un bouton de visible en haut à gauche

[MABROUKI]

bonjour

Pour DataTemplate la syntaxe XAML a subi une circonvolution sur la page officielle MSDN ainsi (copier-coller) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
<DataTemplate x:DataType="local:Recording">
                        <StackPanel Orientation="Horizontal" Margin="6">
                            <SymbolIcon Symbol="Audio" Margin="0,0,12,0"/>
                            <StackPanel>
                                <TextBlock Text="{x:Bind ArtistName}" FontWeight="Bold"/>
                                <TextBlock Text="{x:Bind CompositionName}"/>
                            </StackPanel>
                        </StackPanel>
                    </DataTemplate>
 
                </ListView.ItemTemplate>

Nouveaute c'est ce x:Bind mais selon la même page MSDN la syntaxe Binding est aussi admise ....

lien MSDN fr :

https://www.google.fr/url?sa=t&rct=j...246,bs.1,d.d2s

Pour le ItemContainerStyle c'est dramatique selon le forum StackOverflow car il ne supporte plus le binding dans les Setters de Props ,uniquement des valeurs en dur ...
Pour contourner ce problème un class Helper est requis avec des props attaches qui se charger d'assigner les valeurs aux Grid.Column et Grid.Row...Vraiment bizarre comme solution....
sur ce lien est fourni leur solution :
http://www.google.fr/url?sa=t&rct=j&...37132246,d.d2s

bon code....

[Pol63]

je vais regarder le lien

sinon oui il y a x:Bind en plus de Binding
ca permet moins de choses, mais ce sont des bindings compilés donc plus performants

[Pol63]

ayant créé un panel custom pour faire l'effet du grid comme je le souhaite je viens de voir que le problème n'est pas là où je pensais

mon datatemplate fait que mes items sont "transformés" en button
le button a bien une propriété attachée bindée, avec la bonne valeur
par contre au moment de l'Arrange (placement) les children pour le grid ne sont pas les boutons, mais des contentpresenter contenant un item
et donc le GetValue sur la propriété attachée ne trouve pas de valeur settée pour ce content presenter

du coup je comprends pourquoi en wpf on passait par le style, pour que ca soit le contentpresenter qui récupère les valeurs pour les propriétés attachées

je vais continuer de creuser ...