一、前情提要
在编写 Collections 软件时，需要一个能够显示资源元数据的展示表格，样式参考了某个网站，主要特征为键值对应、键元素共享宽度、右对齐键、左对齐值、无边框、无选中标识。
<!-- 示例代码 -->
<!DOCTYPE html>
<html lang="en">
<style>table#work_outline {font-size: 13px;line-height: 1.4;}tbody {display: table-row-group;vertical-align: middle;unicode-bidi: isolate;border-color: inherit;}tr {display: table-row;vertical-align: inherit;unicode-bidi: isolate;border-color: inherit;}table#work_outline th {min-width: 100px;height: 22px;padding: 0 6px 0 0;box-sizing: border-box;}table#work_outline th {text-align: right;vertical-align: top;white-space: nowrap;}table#work_outline td {vertical-align: top;padding-bottom: 2px;}
</style>
<body><table id="work_outline"><tr><th>Company</th><td>Contact</td></tr><tr><th>Alfreds Futterkiste</th><td>Maria Anders</td></tr><tr><th>Centro comercial Moctezuma</th><td>Francisco Chang</td></tr>
</table></body>
</html>
二、失败案例
在 Avalonia 中，对应的表格实现有 DataGrid 、 ItemsControl 、 Grid 等。
1、 DataGrid
DataGrid 是一个复杂的表格控件，因为需要修改较多样式才能达到目标效果（未实际验证过），所以到目前为止不在考虑中。
2、 ItemsControl
ItemsControl 是一个基础的数据展示控件，需要自行定义要显示的样式、在什么面板中显示，是最先考虑使用的。
（1）模板内部为 Grid
<ItemsControl ItemsSource="{Binding Directories}"><ItemsControl.ItemTemplate><DataTemplate><Grid ColumnDefinitions="Auto,Auto,*"Margin="0 4"><SelectableTextBlock Grid.Column="0"Text="{Binding Key}" TextAlignment="Right"MinWidth="100"/><TextBlock Grid.Column="1"Text=":"Margin="8 0" /><ItemsControl Grid.Column="2"ItemsSource="{Binding Value,Converter={StaticResource JsonToListConverter}}"><ItemsControl.ItemsPanel><ItemsPanelTemplate><WrapPanel Orientation="Horizontal"/></ItemsPanelTemplate></ItemsControl.ItemsPanel><ItemsControl.ItemTemplate><DataTemplate><SelectableTextBlock Text="{Binding}"Margin="0 0 4 0" ><SelectableTextBlock.Styles><Style Selector="SelectableTextBlock:pointerover"><Setter Property="Foreground"Value="{DynamicResource SemiColorLinkPointerover}" /><Setter Property="Cursor" Value="Hand"/></Style></SelectableTextBlock.Styles></SelectableTextBlock></DataTemplate></ItemsControl.ItemTemplate></ItemsControl></Grid></DataTemplate></ItemsControl.ItemTemplate>
</ItemsControl>
在搭建时，最早是使用内部为 Grid 的方式，打算靠 Grid 自身内部对齐的特性实现。问题在于 ItemsControl 的每一个 Item 均包裹在 ContentPresenter 中，其 DataTemplate 中的 Grid 并不共享键元素的最大宽度，最终设置键元素的最小宽度，使其看起来右对齐了，如果字体大小变化、字数增加等情况下，该方案呈现的效果不符合目标。
（2）模板内部为 StackPanel
<ItemsControl ItemsSource="{Binding Directories}"><ItemsControl.ItemTemplate><DataTemplate><StackPanel Orientation="Horizontal"Margin="0 0 0 8"><TextBlock Text="{Binding Key, StringFormat={}{0}：}"Width="120"TextAlignment="Right" /><ItemsControl ItemsSource="{Binding Value}"><ItemsControl.ItemTemplate><DataTemplate><TextBlock Text="{Binding Value}"/></DataTemplate></ItemsControl.ItemTemplate><ItemsControl.ItemsPanel><ItemsPanelTemplate><WrapPanel ItemSpacing="10" /></ItemsPanelTemplate></ItemsControl.ItemsPanel></ItemsControl></StackPanel></DataTemplate></ItemsControl.ItemTemplate>
</ItemsControl>
这个方案是在上一个方案中优化而来，既然 DataTemplate 中的 Grid 并不共享键元素的最大宽度，那干脆固定键元素的宽度，同时将 Grid 简化为 StackPanel ，遇到的问题实质上与上一个是一样的。
3、 Grid
Grid 本身并不提供像 ItemsControl 那样自动显示数据的能力，如果是固定显示的内容，可以使用该控件进行简单展示。
三、灵感来源
在使用 Irihi.Ursa 中的 Form 控件时，发现该控件满足键值对应、键元素共享宽度、无边框、无选中标识，本想直接使用该控件的，但该控件是一个较为复杂的控件，有着预定义的样式，且主要承担表单输入快速实现的功能，与 DataGrid 一样，需要修改较多样式才能实现目标效果，最终并未选择该控件。
在修改 Form 控件的模板样式以达到预期效果的过程中，注意到了两个不同寻常的属性： Grid.IsSharedSizeScope 、 SharedSizeGroup 。
<ControlTheme x:Key="{x:Type Form}"TargetType="Form"><Style Selector="^:fixed-width"><Setter Property="Grid.IsSharedSizeScope" Value="True" /></Style>
</ControlTheme>
<Style Selector="^:not(:no-label):horizontal"><Setter Property="Template"><ControlTemplate TargetType="FormItem"><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="Auto" SharedSizeGroup="Label" /><ColumnDefinition Width="*" /></Grid.ColumnDefinitions><BorderGrid.Row="0"Grid.Column="0"Width="{TemplateBinding LabelWidth}"><!-- Content --></Border><ContentPresenterName="PART_ContentPresenter"Grid.Row="0"Grid.Column="1"VerticalAlignment="Stretch"VerticalContentAlignment="Center"ContentTemplate="{TemplateBinding ContentTemplate}"Content="{TemplateBinding Content}" /></Grid></ControlTemplate></Setter>
</Style>
四、属性解析
（1） Grid.IsSharedSizeScope
该属性是附加属性，值为 bool 类型，默认为 false ， true 为开启状态，效果为附加了该属性的控件下的所有 Grid 可以共享 Size 。
（2） SharedSizeGroup
该属性是 Grid 内部的 ColumnDefinition 和 RowDefinition 的属性，值为 string? 类型，效果为同一个分组名共享 Size ，需要和 Grid.IsSharedSizeScope 附加属性配合，类似于 RadioButton 的 GroupName 。
五、最终实现
<ItemsControl ItemsSource="{Binding Metadata}"Grid.IsSharedSizeScope="True"><ItemsControl.ItemTemplate><DataTemplate><Grid Margin="0 8"><Grid.ColumnDefinitions><ColumnDefinition Width="Auto" SharedSizeGroup="Label"/><ColumnDefinition Width="*" /></Grid.ColumnDefinitions><TextBlock Grid.Column="0"Text="{Binding Name, StringFormat={}{0}：}" TextAlignment="Right"HorizontalAlignment="Stretch"/><ItemsControl Grid.Column="1"ItemsSource="{Binding Items}"><ItemsControl.ItemTemplate><DataTemplate><TextBlock Text="{Binding Value}"/></DataTemplate></ItemsControl.ItemTemplate><ItemsControl.ItemsPanel><ItemsPanelTemplate><WrapPanel ItemSpacing="10"LineSpacing="4"/></ItemsPanelTemplate></ItemsControl.ItemsPanel></ItemsControl></Grid></DataTemplate></ItemsControl.ItemTemplate>
</ItemsControl>