Question

我对Grid在ContentTemplate中的行为感到困惑：

我想设置我的ListView样式：

   <Setter Property="ContentTemplate">
    <Setter.Value>
     <DataTemplate>
      <Grid>
       <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto"/>
        <ColumnDefinition Width="auto"/>
        <ColumnDefinition Width="auto"/>
       </Grid.ColumnDefinitions>
        <TextBlock Text="{Binding ArticleID}"
                   Grid.Column="0"
                   />
    <TextBlock Text="{Binding ArticleName}"
               Grid.Column="1"
               />
    <Button Command="{Binding DataContext.RemoveComponentFromVehicle, RelativeSource={RelativeSource AncestorType=Grid}}"
                        Grid.Column="2"
                        >
        <Button.Content>
            <StackPanel Style="{StaticResource IconTextCombo}">
                <Image Source="{StaticResource ComponentToVehicle_Delete}"/>
            </StackPanel>
        </Button.Content>
    </Button>
   </Grid>

正如您所看到的，我想确保我的按钮在右侧对齐，因为ArticleID和Name长度可能会有所不同。

按钮未按照我的要求和期望对齐。我有一个测试项目：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto"/>
        <ColumnDefinition Width="auto"/>
        <ColumnDefinition Width="auto"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <TextBox Text="Foo" 
             Grid.Column="0"/>
    <TextBox Text="Bar"
             Grid.Column="1"/>
    <Button Content="DELETE"
            Grid.Column="2"/>
    <TextBox Text="Hello World" 
             Grid.Column="0"
             Grid.Row="1"/>
    <TextBox Text="LONG TEXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXT"
             Grid.Row="1"
             Grid.Column="1"/>
    <Button Content="DELETE"
            Grid.Row="1"
            Grid.Column="2"/>
</Grid>

在这个'硬编码'版本中，每个人都按照我想要的方式对齐...我不知道为什么我的网格在模板中如此奇怪。有人能帮助我吗？

提前致谢！

Answer 1

您需要在模板中使用网格上的SharedSizeGroup属性。它适用于您的硬编码示例，因为您的所有元素都位于同一网格中。将它们放入ListBox后，每个项目都有自己的网格，并且不知道其他网格。设置此属性将确保所有这些列具有相同的大小，无论它们位于哪个网格中。

你的Grid.ColumnsDefinitions应如下所示：

<Grid.ColumnDefinitions> 
  <ColumnDefinition Width="auto" SharedSizeGroup="ColumnA"/> 
  <ColumnDefinition Width="auto" SharedSizeGroup="ColumnB"/> 
  <ColumnDefinition Width="auto" SharedSizeGroup="ButtonsColumn"/> 
</Grid.ColumnDefinitions>

您还应该使用ItemTemplate含义：

<ListBox>
   <ListBox.ItemTemplate>
*****Your Posted Code ************
   </ListBox.ItemTemplate>
</ListBox>

Answer 2

以下是解决后的解决方案：

   <ListView DockPanel.Dock="Right"
          ItemsSource="{Binding}"
          SelectedItem="{Binding }"
          Name="lvMain"
          HorizontalContentAlignment="Stretch"
          >
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="auto"/>
                        <ColumnDefinition />
                        <ColumnDefinition Width="auto"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Text="{Binding ArticleID}"
                           Grid.Column="0"
                           />
                    <TextBlock Text="{Binding ArticleName}"
                       Grid.Column="1"
                       />
                    <Button Command="{Binding }"
                                Grid.Column="2"
                                >
                        <Button.Content>
                            <StackPanel Style="{StaticResource IconTextCombo}">
                                <Image Source="{StaticResource img}"/>
                            </StackPanel>
                        </Button.Content>
                    </Button>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

我已经使用ListBox和ListView对其进行了测试......它现在可以正常使用它们！

感谢所有帮助者！

DataTemplate中混淆的wpf网格行为

2 个答案: