{"id":57028,"date":"2021-10-30T08:54:18","date_gmt":"2021-10-30T06:54:18","guid":{"rendered":"https:\/\/ar3dp.de\/docs\/programmieren\/wpf\/datagrid\/"},"modified":"2021-10-30T08:54:18","modified_gmt":"2021-10-30T06:54:18","slug":"datagrid","status":"publish","type":"docs","link":"https:\/\/ar3dp.de\/en\/docs\/programmieren\/wpf\/datagrid\/","title":{"rendered":"DataGrid"},"content":{"rendered":"

DataGrids eigenen sich hervorragend zum Anzeigen von Daten im Tabellenformat. Hier findest du ein paar n\u00fctzliche Beispiele, wie du in WPF mit dem DataGrid-Steuerelement arbeiten kannst. <\/p>\n\n\n\n

Eine Datenquelle zuweisen<\/h3>\n\n\n\n

Damit das Steuerelement die Daten anzeigen kann musst du dieser erst eine Datenquelle, die “ItemSource” zuweisen. Wenn deine Applikation basierend auf dem MVVM-Designmuster<\/a> erstellt wird, dann wird die Eigenschaft “ItemSource” \u00fcber eine Bindung (Binding) gesetzt, welche sich im ViewModel befindet.<\/p>\n\n\n\n

<DataGrid\n   ItemsSource="{Binding Users}\n\/><\/pre><\/div>\n\n\n\n
ObservableCollection<User> _users = new(); \npublic ObservableCollection<User> Users \n{\n    get => _users;\n    set\n    {\n        if (value == _users)\n            return;\n\n        _users = value;\n        OnPropertyChanged();\n    }\n}<\/pre><\/div>\n\n\n\n
Die Funktion OnPropertyChanged() wird von der ViewModel-Basisklasse vererbt. Ein Beispiel hierf\u00fcr findest du hier<\/a>.<\/p>\n\n\n\n
Benutzerdefinierte Spalten<\/h3>\n\n\n\n
Textspalten<\/h4>\n\n\n\n
Um reinen Text in einer Spalte anzuzeigen, kann das Standardelement “DataGridTextColumn” verwendet werden.<\/p>\n\n\n\n
<DataGridTextColumn \n    Header="Vorname" \n    Binding="{Binding Firstname}"\n    \/> <\/pre><\/div>\n\n\n\n
Dropdown-Spalten<\/h4>\n\n\n\n
Um eine Dropdown-Spalte zu erstellen, kann das Standardelement “DataGridComboBoxColumn” verwendet werden.<\/p>\n\n\n\n
<DataGridComboBoxColumn \n    Header="MySelection" \n    SelectedValueBinding="{Binding SelectedItem}" \n    >\n     <DataGridComboBoxColumn.ElementStyle> \n         <Style TargetType="{x:Type ComboBox}"> \n            <Setter Property="ItemsSource" Value="{Binding Path=ItemsCollection}" \/>\n         <\/Style> \n     <\/DataGridComboBoxColumn.ElementStyle> \n     <DataGridComboBoxColumn.EditingElementStyle> \n        <Style TargetType="{x:Type ComboBox}"> \n            <Setter Property="ItemsSource" Value="{Binding Path=ItemsCollection}" \/> \n         <\/Style>\n     <\/DataGridComboBoxColumn.EditingElementStyle> \n <\/DataGridComboBoxColumn><\/pre><\/div>\n\n\n\n
Bilder in Spalten anzeigen<\/h4>\n\n\n\n
Oft kann es n\u00f6tig sein, komplexere Daten, wie Bilder, im Steuerelement DataGrid anzuzeigen. Hierf\u00fcr kann das “DataGridTemplateColumn”-Element verwendet werden. <\/p>\n\n\n\n
<DataGridTemplateColumn\n    Header="Image" Width="80"> \n    <DataGridTemplateColumn.CellTemplate>\n        <DataTemplate> \n            <Image \n                Source="{Binding Path=Image.Source}" \n                \/> \n        <\/DataTemplate>\n    <\/DataGridTemplateColumn.CellTemplate>\n<\/DataGridTemplateColumn><\/pre><\/div>\n\n\n\n
Wenn der Datensatz nicht direkt das Bild, sondern den Dateipfad zum Bild enth\u00e4lt, dann ist ein Converter n\u00f6tig. Dieser k\u00f6nnte wie folgt aussehen.<\/p>\n\n\n\n
public sealed class UriToImageConverter : IValueConverter\n{\n    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)\n    {\n        Uri i = value as Uri;\n        if (i != null)\n            BitmapImage im = new BitmapImage();            \n            try\n            {\n                im.BeginInit();\n                im.UriSource = i;\n                im.EndInit();\n            }\n            catch(Exception)\n            {\n                return null;\n            }            \n            return im;\n        else\n            return null;\n    }\n\n    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)\n    {\n        throw new NotSupportedException();\n    }\n}<\/pre><\/div>\n\n\n\n
Alternativ, sofern das Bild als Byte[] vorliegt.<\/p>\n\n\n\n
public sealed class ByteArrayToImageConverter : IValueConverter\n{\n    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)\n    {\n        byte[] imageAsBytes = value as byte[];\n        if (imageAsBytes == null)\n            return null;\n\n        BitmapImage image = new BitmapImage();\n        using (MemoryStream memStream = new MemoryStream(imageAsBytes))\n        {\n            image.BeginInit();\n            image.CacheOption = BitmapCacheOption.OnLoad;\n            image.StreamSource = memStream;\n            image.EndInit();\n        }\n        return image;\n    }\n\n    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)\n    {\n        throw new NotImplementedException();\n    }\n}<\/pre><\/div>\n\n\n\n
Und so kann der Converter dann im XAML verwendet werden.<\/p>\n\n\n\n
<UserControl \n    x:Class="MyApp.Views.AboutView"\n    xmlns="http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\/presentation"\n    xmlns:x="http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml"\n    xmlns:mc="http:\/\/schemas.openxmlformats.org\/markup-compatibility\/2006" \n    xmlns:d="http:\/\/schemas.microsoft.com\/expression\/blend\/2008" \n     \n    xmlns:viewModels="clr-namespace:MyApp.ViewModels"\n    xmlns:converters="clr-namespace:MyApp.Converters"\n\n    mc:Ignorable="d" \n    d:DesignHeight="450" d:DesignWidth="800"\n    d:DataContext="{d:DesignInstance viewModels:AboutViewModel}"\n    >\n    <UserControl.Resources>\n        <converters:UriToImageConverter x:Key="UriToImageConverter" \/>\n    <\/UserControl.Resources>\n\n    <!-- Your XAML Page Content -->\n    <\/UserControl><\/pre><\/div>\n\n\n\n
<DataGridTemplateColumn\n    Header="Image" Width="80"> \n    <DataGridTemplateColumn.CellTemplate>\n        <DataTemplate> \n            <Image \n                Source="{Binding Path=ImageUri, \n                    Converter={StaticResource UriToImageConverter}, \n                    UpdateSourceTrigger=Default}" \n                \/> \n        <\/DataTemplate>\n    <\/DataGridTemplateColumn.CellTemplate>\n<\/DataGridTemplateColumn><\/pre><\/div>\n\n\n\n
<\/p>","protected":false},"excerpt":{"rendered":"
N\u00fctzliche Code-Beispiele f\u00fcr das DataGrid Steuerelement<\/p>","protected":false},"author":1,"featured_media":0,"parent":54212,"menu_order":1,"comment_status":"open","ping_status":"closed","template":"","meta":{"_featured":false,"_is_vendor_doc":"0","footnotes":""},"doc_tag":[912,910,908,913,909,911],"class_list":["post-57028","docs","type-docs","status-publish","hentry","doc_tag-anzeigen","doc_tag-control","doc_tag-datagrid","doc_tag-daten","doc_tag-steuerelement","doc_tag-tabelle"],"comment_count":0,"_links":{"self":[{"href":"https:\/\/ar3dp.de\/en\/wp-json\/wp\/v2\/docs\/57028","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ar3dp.de\/en\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/ar3dp.de\/en\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/ar3dp.de\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ar3dp.de\/en\/wp-json\/wp\/v2\/comments?post=57028"}],"version-history":[{"count":0,"href":"https:\/\/ar3dp.de\/en\/wp-json\/wp\/v2\/docs\/57028\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/ar3dp.de\/en\/wp-json\/wp\/v2\/docs\/54212"}],"next":[{"title":"MVVM - Model-View-ViewModel Design","link":"https:\/\/ar3dp.de\/en\/docs\/programmieren\/wpf\/mvvm-model-view-viewmodel-design\/","href":"https:\/\/ar3dp.de\/en\/wp-json\/wp\/v2\/docs\/57030"}],"prev":[{"title":"N\u00fctzliche Bindings f\u00fcr WPF-Anwendungen","link":"https:\/\/ar3dp.de\/en\/docs\/programmieren\/wpf\/nuetzliche-bindings-fuer-wpf-anwendungen\/","href":"https:\/\/ar3dp.de\/en\/wp-json\/wp\/v2\/docs\/57001"}],"wp:attachment":[{"href":"https:\/\/ar3dp.de\/en\/wp-json\/wp\/v2\/media?parent=57028"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/ar3dp.de\/en\/wp-json\/wp\/v2\/doc_tag?post=57028"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}