WPF DataGrid样式 [英] WPF DataGrid Styling

问题描述

有没有人知道/有一个例子，说明如何将WPF DataGrid布局更改为像卡片视图或其他任何东西，而不只是堆叠的行？

解决方案

结果看起来像这样。 alt text http://iwebthereforeiam.com/files/ScreenShot.gif

这里是应该展示这个想法的代码。

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 =Window1Height =300Width =300> 
 
< Window.Resources> 
< local：GreekGods x：Key =GreekGods/> 
< DataTemplate x：Key =itemTemplate> 
< Border BorderBrush =RoyalBlueBorderThickness =2Margin =2Padding =5> 
< WrapPanel Orientation =Vertical> 
< TextBlock Width =200Text ={Binding Path = Name}/> 
< TextBlock Width =200Text ={Binding Path = Description}/> 
< TextBlock Width =200Text ={Binding Path = RomanName}/> 
< / WrapPanel> 
< / Border> 
< / DataTemplate> 
< /Window.Resources> 
 
< ListBox ItemTemplate ={StaticResource itemTemplate}
 ItemsSource ={StaticResource GreekGods}/> 
< / Window> 
  

C＃代码：

 使用系统; 
使用System.Collections.Generic; 
使用System.Collections.ObjectModel; 
命名空间StackOverflow_545979 
 {
 public class GreekGod 
 {
 public string Name {get;组; } 
 public string描述{get;组; } 
 public string RomanName {get;组; 
 
 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（新的GreekGod（Artemis，狩猎的维珍女神，黛安娜））; 
 this.Add（new GreekGod（雅典娜，工艺美术与国内艺术，雅典娜））; 
 this.Add（new GreekGod（Demeter，Goddess of agriculture，Ceres））; 
 this.Add（new GreekGod（Dionysus，God of wine，Bacchus））; 
 this.Add（new GreekGod（Hephaestus，Fire and Crafts，Vulcan））; 
 this.Add（new GreekGod（Hera，Goddess of marriage，Juno））; 
 this.Add（新的GreekGod（Hermes，神的使者，Mercury））; 
 this.Add（新的GreekGod（Poseidon，海之神，地震与马，海王星））; 
 this.Add（新的GreekGod（宙斯，奥林匹克最高神，木星））; 
} 
} 
} 
  

GreekGod和GreekGods类从 Bea Stollnitz的例子。

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?

解决方案

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.

这篇关于WPF DataGrid样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！