WPF 4 DataGrid 進階篇（二）：RowDetailsTemplate 實現主從明細行展開

DataGrid 的 RowDetailsTemplate 功能讓每行數據可展開顯示詳細資訊，完美支援「主從關係」呈現（如：訂單行展開明細、學生行展開科目成績）。本文示範如何定義模板、綁定嵌套數據、實現流暢的展開/摺疊體驗。

資料模型擴展：加入子明細屬性

public class Member {
    public string Name { get; set; }
    public string Age { get; set; }
    public SexOpt Sex { get; set; }
    public bool Pass { get; set; }
    public DateTime ExamDate { get; set; }
    public Uri Email { get; set; }
    // 新增：科目成績（作為 RowDetails 顯示）
    public int Math { get; set; }
    public int History { get; set; }
}

測試資料填充

var memberData = new ObservableCollection<Member>();
memberData.Add(new Member {
    Name = "Lucy", Age = "25", Sex = SexOpt.Female, Pass = true,
    ExamDate = new DateTime(2010, 4, 10),
    Email = new Uri("mailto:Lucy@school.com"),
    Math = 80, History = 85
});
// ... 更多資料
dataGrid.DataContext = memberData;

定義 RowDetailsTemplate：兩種等效方式

方式一：資源字典定義 + StaticResource 引用（推薦複用）

<Window.Resources>
    <DataTemplate x:Key="RowDetailsTemplate">
        <Border BorderThickness="0" Background="Orchid" Padding="10">
            <StackPanel Orientation="Vertical">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Math: " VerticalAlignment="Center"/>
                    <TextBlock Text="{Binding Math}" VerticalAlignment="Center" 
                               FontSize="15" FontWeight="Bold"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="History: " VerticalAlignment="Center"/>
                    <TextBlock Text="{Binding History}" VerticalAlignment="Center" 
                               FontSize="15" FontWeight="Bold"/>
                </StackPanel>
            </StackPanel>
        </Border>
    </DataTemplate>
</Window.Resources>

<DataGrid x:Name="dataGrid" ItemsSource="{Binding}" AutoGenerateColumns="False"
          RowDetailsTemplate="{StaticResource RowDetailsTemplate}">
    <!-- Columns 定義 -->
</DataGrid>

方式二：內聯定義（簡單場景）

<DataGrid.RowDetailsTemplate>
    <DataTemplate>
        <Border BorderThickness="0" Background="Orchid" Padding="10">
            <StackPanel Orientation="Vertical">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Math: " VerticalAlignment="Center"/>
                    <TextBlock Text="{Binding Math}" VerticalAlignment="Center" 
                               FontSize="15" FontWeight="Bold"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="History: " VerticalAlignment="Center"/>
                    <TextBlock Text="{Binding History}" VerticalAlignment="Center" 
                               FontSize="15" FontWeight="Bold"/>
                </StackPanel>
            </StackPanel>
        </Border>
    </DataTemplate>
</DataGrid.RowDetailsTemplate>

關鍵屬性與行為控制

VisibilityMode 選項

• VisibleWhenSelected：選中行時顯示（預設，最常用）
• Visible：永遠顯示所有行明細
• Collapsed：永遠隱藏（程式碼控制）

進階：RowDetailsTemplateSelector 動態切換模板

public class ScoreDetailTemplateSelector : DataTemplateSelector {
    public DataTemplate HighScoreTemplate { get; set; }
    public DataTemplate LowScoreTemplate { get; set; }

    public override DataTemplate SelectTemplate(object item, DependencyObject container) {
        var member = item as Member;
        return (member != null && member.Math > 90) ? HighScoreTemplate : LowScoreTemplate;
    }
}

<Window.Resources>
    <local:ScoreDetailTemplateSelector x:Key="templateSelector"
        HighScoreTemplate="{StaticResource HighScoreTemplate}"
        LowScoreTemplate="{StaticResource LowScoreTemplate}"/>
</Window.Resources>

<DataGrid RowDetailsTemplateSelector="{StaticResource templateSelector}" />

執行效果

點擊行首（或選中行），明細區域平滑展開顯示數學、歷史成績。

樣式美化建議

• 動畫過渡：DataGrid 內建展開動畫，可透過 `RowDetailsVisibilityChanged` 事件微調
• 視覺分隔：Border 背景色與主表區別，Padding 留白提升閱讀性
• 巢狀 DataGrid：明細模板中可再放入 DataGrid 顯示集合型子數據
• 條件顯示：Converter 根據資料決定 `Visibility`，避免空白明細區域

源碼下載

https://cid-c75f4e27adfe5bbc.office.live.com/self.aspx/GnieTech/WPF4DataGridControl.zip

總結

RowDetailsTemplate 是 DataGrid 實現「主從明細」的核心功能，配合 `RowDetailsVisibilityMode` 控制展開邏輯，`TemplateSelector` 支援動態模板選擇。將從屬資料內嵌於行展開區域，避免跳轉頁面，保持上下文連續，是桌面端數據密集型應用的優選交互模式。