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

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>

以及 View 本身的模板:

<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 应设置在 Grid 的第一个父 ItemsControl 上，在您的情况下，它将是 ViewModel 模板中的 ItemsControl。然后将调整列宽。

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

其他内容:您不需要围绕 ItemsControl 的 Stackpanel 包装器，因为 ItemsControl 是唯一的 child 。如果需要调整 ItemsControl 使用的面板，则在 Property 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 的默认面板。