Categories: WPF 教程

WPF教程之 DataGrid行详细信息

DataGrid 控件:

DataGrid行详细信息

使用DataGrid控件时非常常见的使用场景是能够显示每行的详细信息，通常位于行本身的正下方。 WPF DataGrid控件很好地支持了这一点，也很容易使用。让我们从一个例子开始，然后我们将讨论它是如何工作的以及它之后给你的选项：

<Window x:Class="WpfTutorialSamples.DataGrid_control.DataGridDetailsSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DataGridDetailsSample" Height="200" Width="400">
 <Grid Margin="10">
  <DataGrid Name="dgUsers" AutoGenerateColumns="False">
   <DataGrid.Columns>
    <DataGridTextColumn Header="Name" Binding="{Binding Name}" />
    <DataGridTextColumn Header="Birthday" Binding="{Binding Birthday}" />
   </DataGrid.Columns>
   <DataGrid.RowDetailsTemplate>
    <DataTemplate>
     <TextBlock Text="{Binding Details}" Margin="10" />
    </DataTemplate>
   </DataGrid.RowDetailsTemplate>
  </DataGrid>
 </Grid>
</Window>

using System;
using System.Collections.Generic;
using System.Windows;

namespace WpfTutorialSamples.DataGrid_control
{
 public partial class DataGridDetailsSample : Window
 {
  public DataGridDetailsSample()
  {
   InitializeComponent();
   List<User> users = new List<User>();
   users.Add(new User() { Id = 1, Name = "John Doe", Birthday = new DateTime(1971, 7, 23) });
   users.Add(new User() { Id = 2, Name = "Jane Doe", Birthday = new DateTime(1974, 1, 17) });
   users.Add(new User() { Id = 3, Name = "Sammy Doe", Birthday = new DateTime(1991, 9, 2) });

   dgUsers.ItemsSource = users;
  }
 }

 public class User
 {
  public int Id { get; set; }

  public string Name { get; set; }

  public DateTime Birthday { get; set; }

  public string Details
  {
   get
   {
    return String.Format("{0} was born on {1} and this is a long description of the person.", this.Name, this.Birthday.ToLongDateString());
   }
  }
 }
}

正如您所看到的，我已经使用User类的新属性扩展了前面章节中的示例：Description属性。对于我们的详细信息行，它只返回有关用户的一些信息。

在标记中，我定义了几列，然后使用RowDetailsTemplate为行详细信息指定模板。正如您所看到的，它的工作方式与任何其他WPF模板相似，我在其中使用DataTemplate，内部包含一个或多个控件，以及针对数据源上的属性的标准绑定，在本例中为Description属性。

从结果的屏幕截图中可以看到，或者如果您自己运行示例，现在会在所选行的下方显示详细信息。选择另一行后，将显示该行的详细信息，并隐藏先前所选行的详细信息。

控制行详细信息可见性

使用RowDetailsVisibilityMode属性，您可以更改上述行为。它默认为VisibleWhenSelected，详细信息仅在选中行时可见，但您可以将其更改为Visible或Collapsed。如果将其设置为Visible，则所有详细信息行将始终可见，如下所示：

如果将其设置为Collapsed，则所有详细信息将始终不可见。

更多详细信息

本文的第一个例子可能有点无聊，只使用一个简单的TextBlock控件。由于这是一个DataTemplate，你可以做任何你想做的事情，所以我决定扩展一下这个例子，以便更好地了解各种可能。以下是它现在的样子：

正如您从代码清单中看到的那样，主要是将细节模板扩展为使用面板，而面板又可以容纳更多面板和/或控件。使用Grid面板，我们可以获得用户数据的表格外观，Image控件允许我们显示用户的图片（您最好加载本地资源而不是远程资源，就像我在例子中所做的那样 – 抱歉懒得找到Jane和Sammy Doe的匹配图片。

<Window x:Class="WpfTutorialSamples.DataGrid_control.DataGridDetailsSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DataGridDetailsSample" Height="300" Width="300">
 <Grid Margin="10">
  <DataGrid Name="dgUsers" AutoGenerateColumns="False">
   <DataGrid.Columns>
    <DataGridTextColumn Header="Name" Binding="{Binding Name}" />
    <DataGridTextColumn Header="Birthday" Binding="{Binding Birthday}" />
   </DataGrid.Columns>
   <DataGrid.RowDetailsTemplate>
    <DataTemplate>
     <DockPanel Background="GhostWhite">
      <Image DockPanel.Dock="Left" Source="{Binding ImageUrl}" Height="64" Margin="10" />
      <Grid Margin="0,10">
       <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
       </Grid.ColumnDefinitions>
       <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
       </Grid.RowDefinitions>

       <TextBlock Text="ID: " FontWeight="Bold" />
       <TextBlock Text="{Binding Id}" Grid.Column="1" />
       <TextBlock Text="Name: " FontWeight="Bold" Grid.Row="1" />
       <TextBlock Text="{Binding Name}" Grid.Column="1" Grid.Row="1" />
       <TextBlock Text="Birthday: " FontWeight="Bold" Grid.Row="2" />
       <TextBlock Text="{Binding Birthday, StringFormat=d}" Grid.Column="1" Grid.Row="2" />

      </Grid>
     </DockPanel>
    </DataTemplate>
   </DataGrid.RowDetailsTemplate>
  </DataGrid>
 </Grid>
</Window>

using System;
using System.Collections.Generic;
using System.Windows;

namespace WpfTutorialSamples.DataGrid_control
{
 public partial class DataGridDetailsSample : Window
 {
  public DataGridDetailsSample()
  {
   InitializeComponent();
   List<User> users = new List<User>();
   users.Add(new User() { Id = 1, Name = "John Doe", Birthday = new DateTime(1971, 7, 23), ImageUrl = "http://www.wpf-tutorial.com/images/misc/john_doe.jpg" });
   users.Add(new User() { Id = 2, Name = "Jane Doe", Birthday = new DateTime(1974, 1, 17) });
   users.Add(new User() { Id = 3, Name = "Sammy Doe", Birthday = new DateTime(1991, 9, 2) });

   dgUsers.ItemsSource = users;
  }
 }

 public class User
 {
  public int Id { get; set; }

  public string Name { get; set; }

  public DateTime Birthday { get; set; }

  public string ImageUrl { get; set; }
 }
}