在 WPF 中封装重复布局

Question

在我绑定到视图模型的数据模板中，我有一个像这样的网格：

<Grid> 
 .  
 .  <!--Row & Col Definitions...-->
 .
 <TextBlock Text="Some Label" Style="{DynamicResource TextBlockLabelStyle}" />
 <TextBlock Grid.Column="1" Text="{Binding SomeValue, Mode=OneWay}"/>
 <Border Style="{DynamicResource SeparatorStyle}" />

 <TextBlock Grid.Row="1" Text="Some Label" Style="{DynamicResource TextBlockLabelStyle}" />
 <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding SomeValue, Mode=OneWay}"/>
 <Border Grid.Row="1" Style="{DynamicResource SeparatorStyle}" />   

 <TextBlock Grid.Row="2" Text="Some Label" Style="{DynamicResource TextBlockLabelStyle}" />
 <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding SomeValue, Mode=OneWay}"/>
 <Border Grid.Row="2" Style="{DynamicResource SeparatorStyle}" />   
</Grid> 

我认为添加这种重复模式（TextBlock 用于标签，TextBlock 用于值，水平规则）变得乏味，并认为最好将其封装到 UserControl 中，例如“GridRow”：

<UserControl x:Class="GridRow">
  <TextBlock Text="{Binding LabelText}" Style="{DynamicResource TextBlockLabelStyle}" />
  <TextBlock Grid.Column="1" Text="{Binding ValueText, Mode=OneWay}"/>
  <Border Style="{DynamicResource SeparatorStyle}" />
</UserControl>

然后我可以这样做：

<Grid>
  <GridRow LabelText="Some Label" ValueText="{Binding SomeValue}"/>
  <GridRow Grid.Row="1" LabelText="Some Label2" ValueText="{Binding SomeValue2}"/>
  <GridRow Grid.Row="2" LabelText="Some Label3" ValueText="{Binding SomeValue3}"/>
</Grid>

并让用户控件绑定到 LabelText 和 ValueText 属性，也许通过模板绑定？

我的问题是如何做到这一点，如果这是正确的做法，或者是否可以使用样式或数据模板来做到这一点？

Answer 1

不幸的是，这并不容易实现。网格布局查看其直接子级的 Grid.Row 和 Grid.Column 属性，以创建所需的布局。因此，将 UI 控件嵌套在另一个 Grid 中会破坏布局。

几个选项，这篇博文解决了这个问题，但很复杂：

http://www.scottlogic.co.uk/blog/colin/2010/11/using-a-grid-as-the-panel-for-an-itemscontrol/

这里有一个不错的Auto-grid，我没用过，但是看起来还不错：

http://whydoidoit.com/2010/10/06/automatic-grid-layout-for-silverlight/

问候， 科林 E.