web-dev-qa-db-fra.com

Comment WPG DataGrid à ObservableCollection

Pouvez-vous me donner un conseil pour lier un WPF DataGrid à ObservableCollection. J'avais vu certains messages et je n'ai pas trouvé de réponse directe. Là et partout des problèmes complexes sont décrits mais mon problème n’est pas sophistiqué. J'ai une collection observable et WPF DataGrid. Les deux sont dans l'application WPF qui est un client d'un service WCF sous contrat en duplex. Voici une ObservableCollection:

private ObservableCollection<MyClass> _myCollection = new ObservableCollection<MyClass>();
public ObservableCollection<MyClass> DownloadsCollection
{
    get { return this._downloadsCollection; }
}

Voici un balisage XAML avec DataGrid:

<Window x:Class="DownloadManager_Client.MainWindow"
. . . . . . . .>

    <DataGrid Name="dgDownloadsInfo" Grid.Row="2" Grid.Column="0" AutoGenerateColumns="False" CanUserAddRows="False"
              CanUserDeleteRows="False" CanUserReorderColumns="False" CanUserResizeColumns="False"
              CanUserResizeRows="False" CanUserSortColumns="False" SelectionMode="Single" SelectionChanged="dgDownloadsInfo_SelectionChanged">
          <DataGrid.Columns>
                <DataGridTextColumn Header="DownloadId" Visibility="Hidden"/>
                <DataGridTextColumn Header="Target URL" FontFamily="Arial" />
                <DataGridTextColumn Header="Content Size" FontFamily="Arial"/>
                <DataGridTextColumn Header="Path to Save" FontFamily="Arial"/>
                <DataGridTextColumn Header="Bytes Downloaded" FontFamily="Arial"/>
                <DataGridTextColumn Header="Percent (%)" FontFamily="Arial"/>
                <DataGridTextColumn Header="Status" FontFamily="Arial"/>
          </DataGrid.Columns>
    </DataGrid>
. . . . . . . .
</Window>

Et voici la classe myClass. Il implémenté dans le service WCF. Le client reçoit des instances de MyClass dans les rappels du service WCF avec contrat recto verso. Une fois que chaque instance de MyClass a été reçue, elle est placée dans ObservableCollection pour remplacer la précédente par le même identifiant unique.

[DataContract]
public class MyClass
{
    #region Properties

    /// <summary>
    /// Downloading unique ID.
    /// </summary>
    [DataMember]
    public Guid UniqueId { get; set; }
    /// <summary>
    /// Target URL.
    /// </summary>
    [DataMember]
    public String TargetUrl { get; set; }
    /// <summary>
    /// Path to Save.
    /// </summary>
    [DataMember]
    public String PathToSave { get; set; }
    /// <summary>
    /// Percentage.
    /// </summary>
    [DataMember]
    public Int32 Percentage { get; set; }
    /// <summary>
    /// Downloaded bytes number.
    /// </summary>
    [DataMember]
    public Int64 DownloadedBytesQuantity { get; set; }
    /// <summary>
    /// Content size.
    /// </summary>
    [DataMember]
    public Int64 RealContentLength { get; set; }
    /// <summary>
    /// Downloading status.
    /// </summary>
    [DataMember]
    public String Status { get; set; }

    #endregion
}

Comment lier DataGrid à ObservableCollection dans mon exemple? Donnez un indice sur ce sujet. Je vous demande pardon pour mon pauvre anglais.

c#wpfwcf
5
user3769902

Vous devriez pouvoir le faire en utilisant la propriété ItemsSource de la grille et en référençant votre collection (probablement située dans votre modèle de vue), comme ceci:

ItemsSource="{Binding Path=DownloadsCollection}"

Ajoutez ensuite une liaison sur vos colonnes pour afficher les informations (propriétés) de vos objets MyClass dans la collection.

Pour un tutoriel plus détaillé sur la procédure à suivre, consultez this link.

Modifier:

Vous pouvez simplement essayer quelque chose comme ceci pour voir si tout fonctionne correctement, puis passer aux colonnes personnalisées:

<DataGrid ItemsSource="{Binding DownloadsCollection}" />
6
Nahuel Ianni

Liaison de la grille de données dans WPF cochez cette réponse. En gros, vous devez ajouter la liaison ItemSource pour que votre grille connaisse le contexte de données.

Ensuite, vous devez ajouter une liaison pour datagrid columns, de sorte qu'il sache quoi afficher. J'espère que cela a aidé.

De plus, vous voudrez peut-être ajouter setter pour votre DownloadsCollection et binding mode si nécessaire. C'est utile si vous avez besoin de mises à jour.

1
makambi
<DataGrid x:Name="employeeGrid" HorizontalAlignment="Center" VerticalAlignment="Center" AlternatingRowBackground="LightBlue" AlternationCount="2" AutoGenerateColumns="False" ItemsSource="{Binding}">
    <DataGrid.Columns>
        <DataGridTextColumn Header="Emp #" Binding="{Binding EmpId}"/>
        <DataGridTextColumn Header="First Name" Binding="{Binding FirstName}"/>
        <DataGridTextColumn Header="Last Name" Binding="{Binding LastName}"/>
    </DataGrid.Columns>
</DataGrid>

La suite suit dans votre fichier .cs correspondant:

employeeGrid.ItemsSource = employeeDetails;
1
Rakesh

Vous pouvez avoir votre grille de données dynamique remplie comme ceci:

ObservableCollection<CaseItem> data = new ObservableCollection<CaseItem>();
this.CasesDataGrid.ItemsSource = data;

Mais n'oubliez pas de lier les colonnes avec chaque élément de votre classe.

Le code XAML ressemblerait à ceci:

<DataGrid x:Name="CasesDataGrid" Grid.Row="1" Grid.Column="0" AutoGenerateColumns="False" SelectionUnit="FullRow" SelectionMode="Extended" CanUserAddRows="False" GridLinesVisibility="Horizontal">
<DataGrid.Columns>
<DataGridTextColumn Width="*" Header="ID" Binding="{Binding CaseID}"/>
<DataGridTextColumn Width="*" Header="Date" Binding="{Binding CaseDate}"/>
<DataGridTextColumn Width="*" Header="Plate" Binding="{Binding CasePlate}"/>
<DataGridTextColumn Width="*" Header="Candidate" Binding="{Binding CaseCandidate}"/>
<DataGridTextColumn Width="*" Header="Base" Binding="{Binding CaseBase}"/>
<DataGridTextColumn Width="*" Header="Speed" Binding="{Binding CaseSpeed}"/>
<DataGridTextColumn Width="*" Header="Photo" Binding="{Binding CasePhoto}"/>
</DataGrid.Columns>
</DataGrid>

J'espère que cela vous sera utile.

0
Luis Leon Gonzalez