GRID et MVVM: Cherche une piste svp

Version imprimable

10/06/2010, 21h22
pmorestin

GRID et MVVM: Cherche une piste svp

Bonjour, voici ma problématique:

J'utilise MVVM et je veux afficher ds un objet de type GRID (? à voir), des données (EF+RIA ) du genre.... List<List<String>>. Par exemple:
C1R1 |C2R1 |C3R1 |C4R1 |C5R1
C1R2 |C2R2 |C3R2 |C4R2 |C5R2... mais je ne connais pas au départ le nb de colonnes....

J'ai bien des idées: customControl, dependyProperty... mais je ne sais pas comment partir...
- faut-t-il utiliser un GRID? et comment faire puisque ColumnDefinition ne propose pas de binding ...
- un DataGrid ?....là je vois pas comment faire...
Bref si quelqu'un a déja eu cette problématique ou une piste... merci d'avance

PM
11/06/2010, 00h00
Pragmateek

Une méthode brute mais efficace est de générer des objets dynamiquement avec autant de propriétés que nécessaire.

Une implémentation de ce principe : http://blog.bodurov.com/How-to-bind-...of-IDictionary

Le problème principal reste bien sûr la maintenance d'un code aussi bas niveau.
Donc à bien encapsuler dans la couche de données afin d'éviter tout couplage.
11/06/2010, 07h21
pmorestin

Ok, merci pour cette 1ere approche. Mais j'aurais préféré une solution avec un binding directement en xaml...car ViewModel et pas de code dans le c# de ma View. -> et la solution n'est-ce pas de passer par un control personnalisé de type GRID avec des DependencyProperty ....?
11/06/2010, 08h11
Samuel Blanchard

Bonjour,

Si tu connais la taille exacte d'une colonne tu peux utiliser un WrapPanel en fixant La taille dynamiquement sur nombre de colonne * taille d'une colonne; Il arrangera les cellules tout seul et tu pourras utiliser le Binding en le couplant à un ItemsControl ou une ListBox.

Sinon si tu veux absolument utiliser le Binding, tu ne pourras pas utiliser un Grid, mais rien ne t'empeche de créer ton propre Panel (plus adapté) ou un CustomControl à la rigueur (plus facile peut être).
11/06/2010, 12h51
pmorestin

Merci.
Effectivement, mon but est d'avoir un control dont la propriété column binde une valeur pour que celui-ci puisse redessiner dynamiquement son nombre de colonnes ...me suis-je bien fais comprendre .....:?

Voici l'exemple dont je te parlais tout à l'heure

coté XAML :

Code:

1
2
3
4
5
6
7
8
 
<ItemsControl ItemsSource="{Binding Table.Datas}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <controlsToolkit:WrapPanel ItemWidth="{Binding Table.ColumnWidth}" Width="{Binding Table.TableWidth}"></controlsToolkit:WrapPanel>
        </ItemsPanelTemplate>                
    </ItemsControl.ItemsPanel>                    
</ItemsControl>

coté CS :

la structure des données :

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
 
public class Table : INotifyPropertyChanged
{
    public Table()
    {
        this.Datas = new ObservableCollection<string>();
    }
 
    public ObservableCollection<string> Datas
    {
        get;
        set;
    }
 
    public int ColumnsByRow
    {
        get
        {
            return this.columnsByRow;
        }
 
        set
        {
            this.columnsByRow = value;
            this.RaisePropertyChanged("ColumnsByRow");
            this.RaisePropertyChanged("TableWidth");
        }
    }
 
    private int columnsByRow = 4;
 
    /// <summary>
    /// Taille de la colonne
    /// </summary>
 
    public double ColumnWidth
    {
        get
        {
            return this.columnWidth;
        }
 
        set
        {
            this.columnWidth = value;
            this.RaisePropertyChanged("ColumnWidth");
            this.RaisePropertyChanged("TableWidth");
        }
    }
 
    private double columnWidth = 0;
 
 
    public double TableWidth
    {
        get
        {
            return this.ColumnWidth * this.ColumnsByRow;
        }
    }
 
    public event PropertyChangedEventHandler PropertyChanged;
 
    /// <summary>
    /// Raise
    /// </summary>
    /// <param name="propertyName"></param>
 
    protected void RaisePropertyChanged(string propertyName)
    {
        if (this.PropertyChanged != null)
        {
            this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

la mise en place

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
 
public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();
        this.LayoutRoot.DataContext = this;
 
        Table table = new Table();
 
        // les données
 
        ObservableCollection<string> datas = new ObservableCollection<string>();
 
 
        datas.Add("Super 1");
        datas.Add("Super 2");
        datas.Add("Super 3");
        datas.Add("Super 4");
 
        table.Datas = datas;
 
        table.ColumnWidth = 100;
        table.ColumnsByRow = 3;
 
        this.Table = table;
    }
 
    public Table Table
    {
        get { return (Table)GetValue(TableProperty); }
        set { SetValue(TableProperty, value); }
    }
 
    // Using a DependencyProperty as the backing store for Table.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty TableProperty =
        DependencyProperty.Register("Table", typeof(Table), typeof(MainPage), new PropertyMetadata(null));
 
}

14/06/2010, 11h33
pmorestin

ok et merci....

Malheureusement ce n'est pas tout a fait ce que je veux.
Il me faut un composant de type GRID mais dont le nombre de colonne et de ligne dépendrait du résultat d'une List<List<String>>.

Et même sans cela, ce composant doit pouvoir augmenter ou diminuer son nombre de colonne directement par binding sur une valeur d'un slider par exemple.
14/06/2010, 11h44
Samuel Blanchard

Citation:

Il me faut un composant de type GRID mais dont le nombre de colonne et de ligne dépendrait du résultat d'une List<List<String>>.

En fait, ton List<List<String>>, correspond à une matrice à deux dimensions soit un tableau String[][] correspondant aux Lignes et Colonnes. Or, un tableau à deux dimension est un tableau à 1 dimension avec une indexation un peu plus complexe :

Code:

index = y * NombredeColonne + x;

Tout ça pour dire que la manière dont tu te sers de List<List<String>> est la même que List<String> avec une indexation un peut différente (il suffit juste de faire une conversion).

Citation:

Et même sans cela, ce composant doit pouvoir augmenter ou diminuer son nombre de colonne directement par binding sur une valeur d'un slider par exemple.

Avec quelques converter, ça doit pouvoir se faire assez facilement sur la classe Table.

Voila, maintenant c'etait une proposition, si elle ne te convient pas, pas de soucis :) mais à mon avis, elle doit pouvoir fonctionner dans ton cas avec quelques adaptations.
14/06/2010, 21h27
pmorestin

Mais si! .. cette proposition colle bien à ma problématique. Enfin, il faut que je creuse car derrière cette 1ère approche, mon objectif final est:

-Exposer un SpinnerButton ou un Slider dont la nouvelle valeur doit régler 'en live' le nombre de colonnes de ma 'custom Grid'.
-Chaque colonne contient un textBox qui expose les datas (List<String>..)
-Le tout en utilisant MVVM, of course...

Merci encore.