Sharing ширина колонки между сетками, определенными в шаблоне

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 имеет type PropertiesViewModel.

Я также попытался разместить Grid.IsSharedSizeScope="True" в каждой отдельной сетке непосредственно и на панелях, содержащих элемент управления, без эффектов. Как я могу добиться, чтобы все столбцы делили ширину?

Answer 1

Grid.IsSharedSizeScope должен быть установлен на первом родителе ItemsControl сетки, в вашем случае это будет ItemControl в шаблоне ViewModel. Затем будет отрегулирована ширина колонок.

Однако, если вы перемещаете одну GridSplitter, то он будет регулировать только эту строку, а не другие (см WPF SharedSizeGroup GridSplitter Issue для возможного решения, если вам нужно изменение размера.)

Другие вещи: вам не нужен Stackpanel wrapper вокруг ItemsControl, поскольку ItemControl - единственный ребенок. Если вам нужно настроить панель дисплея 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

на основе Nautious' ответа я решил эту проблему, определив два 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 этого решения является областью, в которой определены ресурсы. То есть размещение этих шаблонов в ресурсах приложения приведет к синхронному изменению всех столбцов в приложении.