WPF DataGrid Styling

Question

Does anybody know/have an example of how to change WPF DataGrid layout to be something like card-view or anything else, not just stack of rows?

Can you point us to an example of card-view? – JaredPar Feb 13 '09 at 13:53 — JaredPar, Feb 13 '09 at 13:53
yes you can if you still interest i will post an answer. – Henka Programmer Nov 10 '16 at 17:36 — Henka Programmer, Nov 10 '16 at 17:36

score 5 · Answer 1 · edited Jun 03 '16 at 15:33

The result looks like this. alt text http://iwebthereforeiam.com/files/ScreenShot.gif

Here's code that should demonstrate the idea.

XAML:

<Window x:Class="StackOverflow_545979.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:StackOverflow_545979"
    xmlns:debug="clr-namespace:System.Diagnostics;assembly=System"
    Title="Window1" Height="300" Width="300">

    <Window.Resources>
        <local:GreekGods  x:Key="GreekGods"/>
        <DataTemplate x:Key="itemTemplate">
            <Border BorderBrush="RoyalBlue" BorderThickness="2" Margin="2" Padding="5">
                <WrapPanel Orientation="Vertical">
                    <TextBlock Width="200" Text="{Binding Path=Name}"/>
                    <TextBlock Width="200" Text="{Binding Path=Description}"/>
                    <TextBlock Width="200" Text="{Binding Path=RomanName}"/>
                </WrapPanel>
            </Border>
        </DataTemplate>
    </Window.Resources>

    <ListBox ItemTemplate="{StaticResource itemTemplate}" 
             ItemsSource="{StaticResource GreekGods}" />
</Window>

C# code:

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
namespace StackOverflow_545979
{
    public class GreekGod
    {
        public string Name { get; set; }
        public string Description { get; set; }
        public string RomanName { get; set; }

        public GreekGod() { }
        public GreekGod(string name, string description, string romanName)
        {
            this.Name = name;
            this.Description = description;
            this.RomanName = romanName;
        }
    }

    public class GreekGods : ObservableCollection<GreekGod>
    {
        public GreekGods()
        {
            this.Add(new GreekGod("Aphrodite", "Goddess of love, beauty and fertility", "Venus"));
            this.Add(new GreekGod("Apollo", "God of prophesy, music and healing", "Apollo"));
            this.Add(new GreekGod("Ares", "God of war", "Mars"));
            this.Add(new GreekGod("Artemis", "Virgin goddess of the hunt", "Diana"));
            this.Add(new GreekGod("Athena", "Goddess of crafts and the domestic arts", "Athena"));
            this.Add(new GreekGod("Demeter", "Goddess of agriculture", "Ceres"));
            this.Add(new GreekGod("Dionysus", "God of wine", "Bacchus"));
            this.Add(new GreekGod("Hephaestus", "God of fire and crafts", "Vulcan"));
            this.Add(new GreekGod("Hera", "Goddess of marriage", "Juno"));
            this.Add(new GreekGod("Hermes", "Messenger of the Gods", "Mercury"));
            this.Add(new GreekGod("Poseidon", "God of the sea, earthquakes and horses", "Neptune"));
            this.Add(new GreekGod("Zeus", "Supreme God of the Olympians", "Jupiter"));
        }
    }
}

GreekGod and GreekGods classes lifted from Bea Stollnitz's examples.

You have changed template of the ListBox, but the question was about the DataGrid. — alex, Feb 17 '09 at 13:54
Part of this is a recommendation that you use ListView instead of DataGrid. And the other two responders were explicit in recommending not use DataGrid but ListView instead. Sometimes you ask, "How can I use X to do Y?" and people tell you, "Don't use X to do Y. Use Z." Often, that is the right way. So after 30 months with this as an open question, what do you think? — hughdbrown, Jul 21 '11 at 23:49
I think that if question is formulated "how to style X?" then it should be answered "X can be styled in such and such way (or it cannot be styled)". If questions is formulated "how can I do X?" then it can be answered "X can be done by using Y or Z". — alex, Jul 25 '11 at 21:29

score 1 · Answer 2 · answered Feb 13 '09 at 14:55

Instead of a datagrid, try using a combination of a listview or listbox (depending on which functionality you want - both derive from ItemsSource) and datatemplates. Both of these are standard WPF, not part of the toolkit.

http://blah.winsmarts.com/2007-3-WPF__The_DataTemplate,_choosing_how_your_data_will_look_like.aspx

score 1 · Answer 3 · answered Feb 13 '09 at 15:02

I don't know how to do it with WPF Toolkit's DataGrid and I doubt it's what you actually need. You can do it with a ListView or ListBox. Set ListView.View to a WrapPanel with IsItemsSource="True". Then use a DataTemplate to make the cards. There is a pretty good example that will get you most of the way there here.

WPF DataGrid Styling

3 Answers3

Linked