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

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

但是,如果您移动一个GridSplitter,那么它只会调整该行而不是其他行(如果需要调整大小,请参阅WPF SharedSizeGroup GridSplitter问题以获取可能的解决方案.)

其他的东西:你不需要在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的默认面板.