Discussion :

[Valid90]

Bonjour, je suis nouveau au monde du WPF et je travaille actuellement sur une petite application. J'aimerais savoir s'il vous plaît comment créer un datagrid qui soit "unbound" et qui ressemble à excel. Les colonnes sont fixes car elles comportent des catégories connues à l'avance(ID article, quantité,...) par contre les lignes sont variables, de telle sorte que si l'utilisateur clique sur un bouton "Ajouter" une nouvelle ligne est créée. Comment est-ce qu'il est aussi possible de créer de nouvelles catégories, selon que l'utilisateur appuie sur un bouton "Ajouter catégorie"?

Cela fait 2 semaines que j'essaie de résoudre ce problème, et je trouve toujours des articles qui parlent d'ObservableCollections ou de Databinding à des bases de données alors que le problème ici est simple.

Je vous remercie énormément d'avance pour vos réponses.

[MABROUKI]

bonjour Valid90....
En WPF tout control est "bounded" à quelque data quelque part......
Tout control est geree par ce data ...meme l'aspect (couleur,fretillement etc...) avec des datatriggers eventuels

Pour avoir ce que tu veux il suffit de creer :
- un custom class Data Article implementant INotifyPropertyChanged...
- un ObservableCollection ListArticles......presque vide(un record)et binde au DataGrid......

La gestion de l'ajout et suppression des lignes se fait par tes soins......
code behind 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
74
75
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
//ajouter ref 
using System.ComponentModel;
using System.Collections.ObjectModel;
namespace WpfDataGridWithDataTable
{
    public class Article
    {
        public  Article ()
        {
            _modelNumber = 0;
            _modelName = "Vide";
            _unitCost = 0;
            _description = "Vide";
        }
        private int  _modelNumber;
        public int ModelNumber
        {
            get { return _modelNumber; }
            set { _modelNumber = value; OnPropertyChanged("ModelNumber"); }
        }
 
        private string _modelName;
        public string ModelName
        {
            get { return _modelName; }
            set { _modelName = value; OnPropertyChanged("ModelName"); }
        }
 
        private decimal  _unitCost;
        public decimal UnitCost
        {
            get { return _unitCost; }
            set { _unitCost = value; OnPropertyChanged("UnitCost"); }
        }
 
        private string  _description ;
        public string Description
        {
            get { return _description; }
            set { _description = value; OnPropertyChanged("Description"); }
        }
 
 
        #region INotifyPropertyChanged Membres
 
        public event PropertyChangedEventHandler PropertyChanged;
        private void OnPropertyChanged(string propName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propName));
            }
        }
        #endregion
    }
    public class ListArticles : ObservableCollection<Article > 
    {
        public Article a;
        public ListArticles()
        {
 
                //ajout enreg. par  defaut
                a = new Article();
                this.Add(a);
 
        }
 
    }
 
}

code xaml du winform:

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
 
<Window x:Class="WpfDataGridWithDataTable.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfDataGridWithDataTable"
        Title="Window1" Height="300" Width="300">
    <Grid
        Name="gridPanel">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="40"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <DataGrid 
            Grid.Column="0"
            Name="dataGrid1"  
            AutoGenerateColumns="True"  
            CanUserAddRows="True" 
            CanUserDeleteRows="True"
            CanUserResizeColumns="True"
            IsSynchronizedWithCurrentItem="True"
            ItemsSource="{Binding}"/>
        <ListBox 
            Grid.Column="1"
            Name="listBox1" 
            IsSynchronizedWithCurrentItem="True"
            ItemsSource="{Binding}">
            <ListBox.ItemTemplate>
                <DataTemplate DataType="{x:Type local:Article}">
                    <StackPanel    
                        Orientation="Horizontal">
                        <TextBlock 
                            Width="100"
                            Margin="10"  
                            Background="DarkBlue"
                            Foreground="White"
                            FontSize="14"
                            Text="{Binding ModelNumber}"/>
                        <TextBlock 
                            Width="100"
                            Margin="10" 
                            Background="DarkBlue"
                            Foreground="White"
                            FontSize="14"
                            Text="{Binding ModelName}"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
            <Button 
                Grid.Row="1"
                Grid.Column="0"
                HorizontalAlignment="Left"
                Width="100"
                Name="btnAdd"
                Content="Add Item"
                Click="btnAdd_Click">
            </Button>
            <Button
                Grid.Row="1"
                Grid.Column="1"
                HorizontalAlignment="Right"
                Width="100"
                Name="btnDelete"
                Content="Delete Item"
                Click="btnDelete_Click" >
            </Button>
    </Grid>
</Window>

code-behind du winform:

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
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
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 WpfDataGridWithDataTable
{
    /// <summary>
    /// Logique d'interaction pour Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        private ListArticles myList;
        public Window1()
        {
            InitializeComponent();
            myList = new ListArticles();
 
 
            this.DataContext = myList;
 
        }
 
        private void btnAdd_Click(object sender, RoutedEventArgs e)
        {
            myList.Add(new Article());
        }
 
        private void btnDelete_Click(object sender, RoutedEventArgs e)
        {
            myList.Remove(this.dataGrid1.SelectedItem as Article);
        }
 
    }
}

Evidemment la gestion Ajout & Suppression des items peut etre epargnee si on utilse le designer vs2010 comme suit avec ce meme class Article.....
etape 1
1/Menu Donnes->Ajouter une nouvelle source de donnees .Click Gauche
2/selectionner Objet
3/selectionner ListArticles
finish...
etape 2
1/Menu Donnes->Afficher les sources de donnees .Click Gauche
2/dropper (fenetre source de donnees) ListArticles sur le DataGrid
3/meme operation sur le Listbox
finish....
VS2010 genere un code xaml et un code behind .cs gratuit dans le winform....
etape 3:
dans le code behind .cs du winform sous Window_Loaded rajouter cette ligne:

Code :

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

1
2
 
  listArticlesViewSource.Source=new ListArticles();

generer...........
bon code...................

[Valid90]

Merci infiniment Mabrouki! J'ai essayé le code et ça correspond parfaitement à ce que je cherchais! La seule difficulté que je rencontre maintenant est celle de grouper les produits en catégories, pourrais-tu me guider un peu plus?
Encore une fois merci pour ta réponse claire et nette.