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>