在模板中定义的网格之间共享列宽度

Question

我正在尝试布局几个控件：

​

​

浅灰垂直线是网格分割器。这个表中的每一行都是由三列组成的网格，左边是标签，中间是分隔符，右边是控件，包括文本框和图像。

我希望所有的列都对齐。下面是我为每一行使用的数据模板：

<DataTemplate x:Key="PropertyLineTemplate">
    <Grid Margin="0,0,0,1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition SharedSizeGroup="Name"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition SharedSizeGroup="Value"/>
        </Grid.ColumnDefinitions>

        <TextBlock 
            Grid.Column="0"            
            VerticalAlignment="Center"
            Text="{Binding Title}" /> 

        <GridSplitter Grid.Column="1" Width="2"/>

        <SomeUserControl
            Grid.Column="2"               
            Content="{Binding}"                
            Margin="4, 0, 0, 0"/>
    </Grid>
</DataTemplate>

以及视图本身的模板：

<DataTemplate DataType="{x:Type vm:PropertiesViewModel}">
    <DockPanel>            
        <!-- Properties -->
        <ScrollViewer>
            <StackPanel Margin="10">
                <ItemsControl ItemsSource="{Binding Properties}"
                        ItemTemplate="{StaticResource PropertyLineTemplate}" />
            </StackPanel>
        </ScrollViewer>
    </DockPanel>
</DataTemplate>

以及两者的使用情况：

<ContentControl Content="{Binding SelectedItem}" Grid.IsSharedSizeScope="True">          
</ContentControl>

其中SelectedItem的类型为PropertiesViewModel。

我还试图将Grid.IsSharedSizeScope="True"直接放置在每个单独的网格中，并将其放置在包含控件的面板上，而不会产生任何影响。如何实现所有列共享宽度？

Answer 1

Grid.IsSharedSizeScope应该设置在网格的第一个父ItemsControl上，在您的例子中，它将是ViewModel模板中的ItemsControl。然后调整列的宽度。

但是，如果移动一个GridSplitter，那么它只会调整该行，而不会调整其他行(如果需要调整大小，请参见WPF SharedSizeGroup GridSplitter Issue获取潜在解决方案)。

其他东西:您不需要围绕ItemsControl使用Stackpanel包装器，因为ItemsControl是唯一的子包。如果您需要调整ItemsControl使用的面板，那么在属性ItemsPanel上设置它，如下所示：

<ItemsControl ItemsSource="{Binding Properties}"
              Grid.IsSharedSizeScope="True"
              ItemTemplate="{StaticResource PropertyLineTemplate}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel/> <!-- Or <WrapPanel/> or <UniformGrid/> etc. -->
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

但是，Stackpanel是ItemsControl的默认面板。

Answer 2

通过定义两个ColumnDefinitions作为资源，并将所有相关列的Width属性绑定到这些“主列定义”的Width属性，我解决了这个问题：

<ColumnDefinition x:Key="MasterColumnDefinition" />

<ColumnDefinition x:Key="MasterColumnDefinition2" />

<DataTemplate x:Key="PropertyLineTemplate">
     <Grid Margin="0,0,0,1">
          <Grid.ColumnDefinitions>
              <ColumnDefinition Width="{Binding Source={StaticResource MasterColumnDefinition}, Path=Width, Mode=TwoWay}"/>
              <ColumnDefinition Width="Auto"/>
              <ColumnDefinition Width="{Binding Source={StaticResource MasterColumnDefinition2}, Path=Width, Mode=TwoWay}"/>
          </Grid.ColumnDefinitions>

          ...
    </Grid>
</DataTemplate>

可能有点烦躁，但很简单，而且很管用。但是，该解决方案的shared size scope并不是定义资源的范围。也就是说，将这些模板放在应用程序的资源中将导致应用程序中的所有列同步调整大小。