1. Home
  2. Programmieren
  3. WPF
  4. DataGrid

DataGrid

Nützliche Code-Beispiele für das DataGrid Steuerelement

Image Description

DataGrids eigenen sich hervorragend zum Anzeigen von Daten im Tabellenformat. Hier findest du ein paar nützliche Beispiele, wie du in WPF mit dem DataGrid-Steuerelement arbeiten kannst.

Eine Datenquelle zuweisen

Damit das Steuerelement die Daten anzeigen kann musst du dieser erst eine Datenquelle, die „ItemSource“ zuweisen. Wenn deine Applikation basierend auf dem MVVM-Designmuster erstellt wird, dann wird die Eigenschaft „ItemSource“ über eine Bindung (Binding) gesetzt, welche sich im ViewModel befindet.

<DataGrid
   ItemsSource="{Binding Users}
/>
ObservableCollection<User> _users = new(); 
public ObservableCollection<User> Users 
{
    get => _users;
    set
    {
        if (value == _users)
            return;

        _users = value;
        OnPropertyChanged();
    }
}

Die Funktion OnPropertyChanged() wird von der ViewModel-Basisklasse vererbt. Ein Beispiel hierfür findest du hier.

Benutzerdefinierte Spalten

Textspalten

Um reinen Text in einer Spalte anzuzeigen, kann das Standardelement „DataGridTextColumn“ verwendet werden.

<DataGridTextColumn 
    Header="Vorname" 
    Binding="{Binding Firstname}"
    />

Dropdown-Spalten

Um eine Dropdown-Spalte zu erstellen, kann das Standardelement „DataGridComboBoxColumn“ verwendet werden.

<DataGridComboBoxColumn 
    Header="MySelection" 
    SelectedValueBinding="{Binding SelectedItem}" 
    >
     <DataGridComboBoxColumn.ElementStyle> 
         <Style TargetType="{x:Type ComboBox}"> 
            <Setter Property="ItemsSource" Value="{Binding Path=ItemsCollection}" />
         </Style> 
     </DataGridComboBoxColumn.ElementStyle> 
     <DataGridComboBoxColumn.EditingElementStyle> 
        <Style TargetType="{x:Type ComboBox}"> 
            <Setter Property="ItemsSource" Value="{Binding Path=ItemsCollection}" /> 
         </Style>
     </DataGridComboBoxColumn.EditingElementStyle> 
 </DataGridComboBoxColumn>

Bilder in Spalten anzeigen

Oft kann es nötig sein, komplexere Daten, wie Bilder, im Steuerelement DataGrid anzuzeigen. Hierfür kann das „DataGridTemplateColumn“-Element verwendet werden. 

<DataGridTemplateColumn
    Header="Image" Width="80"> 
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate> 
            <Image 
                Source="{Binding Path=Image.Source}" 
                /> 
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

Wenn der Datensatz nicht direkt das Bild, sondern den Dateipfad zum Bild enthält, dann ist ein Converter nötig. Dieser könnte wie folgt aussehen.

public sealed class UriToImageConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        Uri i = value as Uri;
        if (i != null)
            BitmapImage im = new BitmapImage();            
            try
            {
                im.BeginInit();
                im.UriSource = i;
                im.EndInit();
            }
            catch(Exception)
            {
                return null;
            }            
            return im;
        else
            return null;
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotSupportedException();
    }
}

Alternativ, sofern das Bild als Byte[] vorliegt.

public sealed class ByteArrayToImageConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        byte[] imageAsBytes = value as byte[];
        if (imageAsBytes == null)
            return null;

        BitmapImage image = new BitmapImage();
        using (MemoryStream memStream = new MemoryStream(imageAsBytes))
        {
            image.BeginInit();
            image.CacheOption = BitmapCacheOption.OnLoad;
            image.StreamSource = memStream;
            image.EndInit();
        }
        return image;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Und so kann der Converter dann im XAML verwendet werden.

<UserControl 
    x:Class="MyApp.Views.AboutView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     
    xmlns:viewModels="clr-namespace:MyApp.ViewModels"
    xmlns:converters="clr-namespace:MyApp.Converters"

    mc:Ignorable="d" 
    d:DesignHeight="450" d:DesignWidth="800"
    d:DataContext="{d:DesignInstance viewModels:AboutViewModel}"
    >
    <UserControl.Resources>
        <converters:UriToImageConverter x:Key="UriToImageConverter" />
    </UserControl.Resources>

    <!-- Your XAML Page Content -->
    </UserControl>
<DataGridTemplateColumn
    Header="Image" Width="80"> 
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate> 
            <Image 
                Source="{Binding Path=ImageUri, 
                    Converter={StaticResource UriToImageConverter}, 
                    UpdateSourceTrigger=Default}" 
                /> 
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

Tags: , , , , ,

Was this article helpful to you?

Yes No

Related Articles