如何从子绑定中使用父内容控件？

Question

我当前有以下代码：

<DataTemplate DataType="{x:Type vm:SectionViewModel}">
    <ScrollViewer>
        <ItemsControl ItemsSource="{Binding ViewModels}">
        </ItemsControl>
    </ScrollViewer>
</DataTemplate>
<DataTemplate DataType="{x:Type vm:StringViewModel}">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition/>
        </Grid.RowDefinitions>
       <Label Name="Left" Grid.Row="0" Grid.Column="0" Content="{Binding Label}"/>
       <TextBox Name="Right" HorizontalAlignment="Stretch" Grid.Row="0" Grid.Column="1" Text="{Binding Value}"/>
    </Grid>
</DataTemplate>

绑定到SectionViewModel ItemsControl 的ViewModels 属性是StringViewModel 的列表。我想将每个 StringViewModel 插入 ItemsControl 中的某种内容控件中。目前，我只是让每个 StringViewModel 来制作自己的网格，但这使得事情没有对齐。我想将这些项目插入到 ItemsControl 中的某种内容控件中，它不一定必须是网格，但它应该位于 ItemsControl 内。我该怎么做？我也在关注 MVVM，使用 MVVM Light。

编辑：我修改了 XAML 以反映我当前的设置方式。

Answer 1

如果您想控制包含模板中的宽度，您可以使用继承的附加属性：

public class WidthInformation
{
   // Use propa snippet to create LabelWidth property with this metadata:
   ... RegisterAttached("LabelWidth", typeof(double), typeof(WidthInformation), new FrameworkPropertyMetadata
   {
     Inherits = true
   });
}

它将这样使用：

<DataTemplate DataType="{x:Type vm:SectionViewModel}">      
  <ScrollViewer>      
    <ItemsControl ItemsSource="{Binding ViewModels}"
                  local:WidthInformation.LabelWidth="60" />
  </ScrollViewer>      
</DataTemplate>      
<DataTemplate DataType="{x:Type vm:StringViewModel}">      
  <DockPanel>
    <Label Content="{Binding Label}"
           Width="{Binding Path=(local:WidthInformation.LabelWidth)"/>      
    <TextBox Text="{Binding Value}"/>      
  </DockPanel>
</DataTemplate>

使用 DockPanel 将导致 TextBox 宽度自动填充剩余空间。

另一方面，如果您希望两列相对于彼此具有相同的百分比大小，则可以在列上使用星号调整大小：

<DataTemplate DataType="{x:Type vm:StringViewModel}">      
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="2*" />
      <ColumnDefinition Width="3*" />
    </Grid.ColumnDefinitions>
    <Label Content="{Binding Label}" />      
    <TextBox Text="{Binding Value}" Grid.Column="1" />      
  </DockPanel>
</DataTemplate>

一个非常简单的解决方案是对 DockPanel 内的宽度进行硬编码，而不是使用附加的宽度属性：

<DataTemplate DataType="{x:Type vm:StringViewModel}">      
  <DockPanel>
    <Label Content="{Binding Label}" Width="80" />
    <TextBox Text="{Binding Value}"/>      
  </DockPanel>
</DataTemplate>

最后，如果您需要根据标签大小调整宽度，您可以使用具有共享大小的网格：

<DataTemplate DataType="{x:Type vm:SectionViewModel}">      
  <ScrollViewer>      
    <ItemsControl ItemsSource="{Binding ViewModels}"
                  Grid.IsSharedSizeScope="true" />
  </ScrollViewer>      
</DataTemplate>      
<DataTemplate DataType="{x:Type vm:StringViewModel}">      
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto" SharedSizeGroup="Label" />
      <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Label Content="{Binding Label}" />      
    <TextBox Text="{Binding Value}" Grid.Column="1" />      
  </DockPanel>
</DataTemplate>

WPF 充满了可能性！

Answer 2

最简单的方法是更改​​您的 DataTemplate（对于 SectionViewModel）以使用 ListBox 而不是那里更通用的控件。设置完成后，将数据模板更改为附加到列表框。

不幸的是，没有真正简单的方法来设置您所描述的控件，而无需进入更复杂的布局。我建议像这样设置它，然后如果您需要绑定到列的特定宽度，请将其附加到您的父控件（或设置一个确定最大宽度的属性并将它们全部绑定到该属性）。

    <ListBox ItemsSource="{Binding Path=ViewModels}">
        <ListBox.ItemTemplate>
            <DataTemplate DataType="{x:Type vm:StringViewModel}">
                <StackPanel Orientation="Horizontal">
                    <Label x:Name="Left" Content="{Binding Label}" Width="{Binding ElementName=SourceControlHere, Path=WidthToBindTo}"/>
                    <TextBox x:Name="Right" HorizontalAlignment="Stretch" Text="{Binding Value}" Width="{Binding ElementName=SourceControlHere, Path=WidthToBindTo2}"/>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>