Share via

Comment : utiliser le contrôle DataGrid sur Smartphone

  • Article

Mise à jour : novembre 2007

Vous pouvez créer une application Smartphone semblable au programme Contacts Smartphone.

Remarque :

Si vous utilisez une version du .NET Compact Framework antérieure à la version 3.5, vous devez ajouter une référence à System.Windows.Forms.DataGrid.dll dans le projet pour pouvoir l'utiliser.

Cet exemple montre le formulaire principal avec une liste de noms de produits dans un contrôle DataGrid de la base de données Northwind qui est installée avec Visual Studio. Il contient également un formulaire de mode Résumé (SummaryView) pour afficher l'enregistrement actif, ainsi qu'un formulaire de mode Édition (EditView) pour modifier les données et ajouter de nouveaux enregistrements. Un objet BindingSource fournit l'accès à l'enregistrement actuellement sélectionné dans la base de données. Outre les contrôles de liaison de données, un objet BindingSource peut retourner un objet DataRowView de la ligne actuelle. Vous pouvez utiliser DataRowView pour accéder aux données pour diverses raisons, telles que la détermination de la valeur actuelle d'une colonne.

Vous pouvez aussi faire en sorte que Visual Studio génère automatiquement des formulaires de résumé et d'édition en sélectionnant Générer les formulaires de données dans le menu contextuel de la balise active d'un contrôle DataGrid. Notez qu'à des fins de démonstration, seules deux colonnes sont utilisées dans cet exemple pour les formulaires de résumé et d'édition.

Les formulaires de cette application sont décrits dans le tableau suivant. Les options de menu pour les touches programmables gauche et droite Smartphone sont également répertoriées.

Formulaire

Fonctionnalités

Touche programmable gauche

Touche programmable droite

Formulaire principal

(Form1)

Affiche une colonne du tableau dans le contrôle DataGrid sous la forme d'une liste de contacts Smartphone.

Lorsque vous appuyez sur la touche Action ou sur Entrée sur votre clavier avec l'émulateur, le formulaire SummaryView s'affiche.

New (Nouveau)

Ajoute un nouvel enregistrement à la base de données et affiche le formulaire EditView.

Edit (Modifier)

Affiche le formulaire EditView.

SummaryView

Affiche les valeurs de colonne de l'enregistrement actif, optimisées pour l'affichage.

Done (Terminé)

Retourne au formulaire principal.

(aucune)

EditView

Affiche les valeurs de colonne de l'enregistrement actif, optimisées pour l'édition.

Done (Terminé)

Accepte la boîte de dialogue, met à jour la base de données et affiche le formulaire principal.

Cancel (Annuler)

Annule la boîte de dialogue et affiche le formulaire principal.

Pour créer le projet et concevoir le formulaire principal

  1. Dans Visual Studio, créez un projet Smart Device et configurez la plateforme cible en tant que Kit de développement Windows Mobile 5.0 pour Smartphone ou Windows Mobile 6 Standard.

  2. Dans le menu Données, cliquez sur Ajouter une nouvelle source de données.

  3. Dans l'Assistant Configuration de source de données, connectez-vous à la base de données Northwind à l'aide de Microsoft SQL Server Compact Edition (fournisseur de données .NET Framework pour SQL Server CE). La base de données Northwind (Northwind.sdf) est installée dans le dossier \Program Files\Microsoft SQL Server Compact Edition\v3.5\Samples.

    Remarque :

    Sous Windows Vista, vous devez exécuter Visual Studio en tant qu'administrateur pour accéder à la base de données Northwind. Pour plus d'informations sur l'ajout d'une base de données, consultez Comment : ajouter une base de données à un projet Smart Device.

  4. Dans la page Choisir vos objets de base de données de l'Assistant, sélectionnez la table Products et toutes ses colonnes.

  5. Dans la Boîte à outils, ajoutez un contrôle DataGrid au formulaire.

  6. Pour que le contrôle DataGrid se présente comme la liste Contacts Smartphone, définissez ses propriétés comme indiqué dans le tableau ci-dessous.

    Propriété DataGrid

    Définir la valeur

    ColumnHeadersVisible

    False

    RowHeadersVisible

    False

    GridLineColor

    Window

    Location

    Structure Point avec -2 pour x, et -2 pour y.

    Size

    Structure Size avec 184 pour la largeur et 190 pour la hauteur.

  7. Affectez à la propriété DataSource la valeur de la table Orders. Visual Studio ajoute les objets NorthwindDataSet, ProductsBindingSource et ProductsTableAdapter à votre projet.

  8. Cliquez sur la propriété TableStyles dans le volet Propriétés. Cette action affiche la boîte de dialogue Éditeur de collections DataGridTableStyle. Effectuez ensuite les opérations suivantes :

    1. Ajoutez un objet DataGridTableStyle à la collection TableStyles.

    2. Spécifiez "Products" pour la propriété MappingName.

    3. Cliquez sur la propriété GridColumnStyle. Cette action affiche la boîte de dialogue Éditeur de collections DataGridColumnStyle.

    4. Ajoutez un objet DataGridTextBoxColumn à la collection GridColumnStyles.

    5. Cliquez sur la propriété MappingName et sélectionnez Product Name (Nom du produit).

    6. Définissez les valeurs Texte de l'en-tête et Largeur voulues.

    7. Répétez cette procédure pour les colonnes supplémentaires.

    8. Fermez les boîtes de dialogue.

  9. Ajoutez deux formulaires au projet, un pour le mode Résumé et l'autre pour le mode Édition. Nommez-les SummaryView et EditView.

  10. Ajoutez un paramètre aux constructeurs des formulaires SummaryView et EditView pour prendre un objet BindingSource. Dans ces formulaires, déclarez une variable globale, CurrentBindingSouce, devant avoir pour valeur l'objet BindingSource qui est passé au constructeur. Notez qu'elle doit être définie avant que la méthode InitializeComponent ne soit appelée.

    Les développeurs Visual Basic doivent ajouter Sub New au formulaire, en ajoutant une méthode New dans la liste Nom de la méthode située en haut à droite dans le volet de code.

    Dim CurrentBindingSource As BindingSource
Public Sub New(ByVal bsource As BindingSource)
    CurrentBindingSource = bsource
    InitializeComponent()
End Sub

    private BindingSource CurrentBindingSource;
public SummaryView(BindingSource bsource)
{
    CurrentBindingSource = bsource;
    InitializeComponent();
}

  11. Dans le formulaire principal, ajoutez un objet MenuItem nommé New(MenuItem1) et un autre nommé Edit (MenuItem2). Ces menus correspondent aux touches programmables gauche et droite Smartphone. Ajoutez le code suivant pour les événements Click de New et Edit.

    ' Add new record.
Private Sub MenuItem1_Click(ByVal sender As System.Object, _
  ByVal e As System.EventArgs) Handles MenuItem1.Click
    ProductsBindingSource.AddNew()
    Dim EditViewDialog As New EditView(ProductsBindingSource)
    If EditViewDialog.ShowDialog() <> DialogResult.OK Then
        ProductsBindingSource.CancelEdit()
    Else
        ProductsBindingSource.EndEdit()
        ProductsTableAdapter.Update(Me.NorthwindDataSet)
    End If
End Sub
' Edit record.
Private Sub MenuItem2_Click(ByVal sender As System.Object, _
  ByVal e As System.EventArgs) Handles MenuItem1.Click
    Dim EditViewDialog As New EditView(ProductsBindingSource)
    If EditViewDialog.ShowDialog() <> DialogResult.OK Then
        ProductsBindingSource.CancelEdit()
    Else
        ProductsBindingSource.EndEdit()
        ProductsTableAdapter.Update(Me.NorthwindDataSet)
    End If
End Sub

    // Add new record.
private void menuItem1_Click(object sender, EventArgs e)
{
    productsBindingSource.AllowNew = true;
    productsBindingSource.AddNew();
    EditView EditViewDialog = new EditView(productsBindingSource);
    if (EditViewDialog.ShowDialog() != DialogResult.OK)
    {
        productsBindingSource.CancelEdit();
    }
    else
    {
        ProductsBindingSource.EndEdit();
        this.productsTableAdapter.Update(this.northwindDataSet);
     }
}
// Edit record (Edit).
private void menuItem2_Click(object sender, EventArgs e)
{
    EditView EditViewDialog = new EditView(productsBindingSource);
    if (EditViewDialog.ShowDialog() != DialogResult.OK)
    {
        productsBindingSource.CancelEdit();
    }
    else
    {
        productsBindingSource.EndEdit();
        this.productsTableAdapter.Update(this.northwindDataSet);
    }
}

  12. Dans le formulaire principal, ajoutez du code pour l'événement KeyDown qui se produit lorsqu'on appuie sur la touche d'action Smartphone. Cette action affiche le formulaire SummaryView.

    Private Sub DataGrid1_KeyDown(ByVal sender As System.Object, _
    ByVal e As System.Windows.Forms.KeyEventArgs) _
    Handles DataGrid1.KeyDown
    If (e.KeyCode = Keys.Enter) Then
        Dim SummaryViewDialog As SummaryView = New SummaryView(ProductsBindingSource)
        Cursor.Current = Cursors.Default
        SummaryView.ShowDialog()
    End If
End Sub

    private void dataGrid1_KeyDown(object sender, KeyEventArgs e)
{
    if (e.KeyCode == Keys.Enter)
    {
        SummaryView SummaryViewDialog = 
          new SummaryView(productsBindingSource);
        SummaryViewDialog.ShowDialog();
     }
}

Pour créer le mode Résumé

  1. Ajoutez les contrôles suivants au formulaire :

    • un contrôle Label pour l'en-tête de Product Name, tel que "Product Name:" ;

    • un contrôle Label pour la valeur de Product Name ;

    • un contrôle Label pour la valeur de Discontinued, qui s'affiche uniquement lorsque la valeur de la colonne Discontinued de la table Products est true ; intitulez cette étiquette "DISCONTINUED" avec une police rouge.

  2. Ajoutez le code suivant au constructeur pour le formulaire SummaryView pour définir les liaisons de données. Déclarez une variable de formulaire nommée CurrentBindingSource devant avoir pour valeur l'instance BindingSource passée au constructeur du formulaire. Un objet DataRowView détermine que si la colonne Discontinued a la valeur true, l'étiquette Discontinued s'affiche.

    Public Sub New(ByVal bsource As BindingSource)
    CurrentBindingSource = bsource

    ' This call is required by the Windows Forms Designer.
    InitializeComponent()
    ' Bind the label that shows the product name.
    ProductNameLabelVal.DataBindings.Add("Text", _
      CurrentBindingSource, "Product Name")
        ' Show the Discontinued label if
        ' that value is true in the database.
        Dim drView As DataRowView
        drView = CurrentBindingSource.Current
        If drView.Item("Discontinued") = True Then
            DiscontinuedLabel.Visible = True
        Else
            DiscontinuedLabel.Visible = False
        End If
    End Sub

    private BindingSource CurrentBindingSource;
public SummaryView(BindingSource bsource)
{
    CurrentBindingSource = bsource;
    InitializeComponent();
    // Bind the label that shows the product name.
    ProductNameLabelVal.DataBindings.Add("Text",
      CurrentBindingSource, "Product Name");
    // Show the Discontinued label if
    // that value is true in the database.
    DataRowView drView;
    drView = (DataRowView) CurrentBindingSource.Current;
    if (drView["Discontinued"] == true)
    {
        DiscontinuedLabel.Visible = true;
    }
    else
    {
        DiscontinuedLabel.Visible = false;
    }
}

  3. Ajoutez un objet MenuItem intitulé Done pour que la touche programmable gauche ferme le formulaire et retourne au formulaire principal.

    Private Sub MenuItem1_Click(ByVal sender As System.Object, _
  ByVal e As System.EventArgs) Handles MenuItem1.Click
    Me.Close
End Sub

    private void MenuItem1_Click(object sender, System.EventArgs e)
{
    this.Close();
}

Pour créer le mode Édition

  1. Ajoutez une référence à l'espace de noms Microsoft.WindowsCE.Forms de votre projet. Ceci est nécessaire pour définir le paramètre InputMode Smartphone sur les contrôles de zone de texte.

  2. Ajoutez les contrôles suivants au formulaire :

    • un contrôle Label pour la zone de texte Product Name ;

    • un contrôle TextBox pour la colonne Product Name ;

    • un contrôle CheckBox pour la valeur de Discontinued.

  3. Pour définir les liaisons de données, ajoutez le code suivant au constructeur du formulaire après l'appel de InitializeComponent. Ce code permet l'ajout d'un nouvel enregistrement ou la modification d'un enregistrement existant. Si un nouvel enregistrement est ajouté, un objet DataRowView détermine si la colonne Discontinued a une valeur null. Si la valeur est null, la case à cocher a la valeur false.

    Public Sub New(ByVal bsource As BindingSource)
    CurrentBindingSource = bsource

    ' This call is required by the Windows Forms Designer.
    InitializeComponent()

    ' Add any initialization after the InitializeComponent() call.

    ' Set the Smartphone input mode.
    InputModeEditor.SetInputMode(ProductNameTextBox,_
      InputMode.AlphaT9)
    ProductNameTextBox.DataBindings.Add("Text",_
      CurrentBindingSource, "Product Name")

    ' Determine the Discontinued value.
    ' If null, change to False.
    Dim drView As DataRowView
    drView = CurrentBindingSource.Current
    ' Set the bindings.
    If IsDBNull(drView("Discontinued")) Then
        DiscontinuedCheckBox.DataBindings.Add("CheckState",_
          CurrentBindingSource, "Discontinued", True,_
          DataSourceUpdateMode.OnValidation, False, "")
    Else
        DiscontinuedCheckBox.DataBindings.Add("Checked",_
          CurrentBindingSource, "Discontinued")
     End If
End Sub

    public EditView(BindingSource bsource)
{
    CurrentBindingSource = bsource;
    InitializeComponent();
    // Set the Smartphone input mode.
    InputModeEditor.SetInputMode(ProductNameTextBox,
      InputMode.AlphaT9);
    // Set the bindings.
    ProductNameTextBox.DataBindings.Add("Text",
      CurrentBindingSource,"Product Name");
    // Determine the Discontinued value.
    // If null, change to False.
    DataRowView drView;
    drView = (DataRowView) CurrentBindingSource.Current;
    if(drView("Discontinued")== null)
    {
        DiscontinuedCheckBox.DataBindings.Add("CheckState",
          CurrentBindingSource, "Discontinued",
          true,DataSourceUpdateMode.OnValidation,false,"");
    }
    else
    {
        DiscontinuedCheckBox.DataBindings.Add("Checked",
          CurrentBindingSource, "Discontinued");
    }
}

  1. Ajoutez un objet MenuItem intitulé Done pour que la touche programmable gauche mette à jour la base de données avec les modifications et retourne au formulaire principal.

    Private Sub MenuItem1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MenuItem1.Click
    Me.DialogResult = DialogResult.OK
    Me.Close()
End Sub

    Private void MenuItem1_Click(object sender, System.EventArgs e)
{
    this.DialogResult = DialogResult.OK;
    this.Close();
}

  1. Ajoutez un objet MenuItem intitulé Cancel pour que la touche programmable droite ignore les modifications et retourne au formulaire principal.

    Private Sub MenuItem2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MenuItem1.Click
    Me.DialogResult = DialogResult.Cancel
    Me.Close()
End Sub

    Private void MenuItem2_Click(object sender, System.EventArgs e)
{
    this.DialogResult = DialogResult.Cancel;
    this.Close();
}

Compilation du code

Cet exemple nécessite des références aux espaces de noms suivants :

Voir aussi

Tâches

Comment : utiliser le contrôle DataGrid sur Pocket PC

Concepts

Génération d'objets DataSet fortement typés (ADO.NET)

Autres ressources

Accès aux données et prise en charge du langage XML dans le .NET Compact Framework