数据模板中混乱的 wpf 网格行为

本文关键字：wpf 网格 混乱 数据 | 更新日期: 2023-09-27 18:37:18

我对ContentTemplate中网格的行为感到困惑：

我想设置我的列表视图的样式：

   <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 和名称长度可能会有所不同。

按钮没有按照我想要和期望的方式对齐。我有一个测试项目：

<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>

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

提前感谢！

数据模板中混乱的 wpf 网格行为

这是变通后的解决方案：

   <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>

我已经用列表框和列表视图测试了它...它对我现在想要的他们俩都有效！

感谢所有帮手！

您需要

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

您的 Grid.ColumnsDefinition 应如下所示：

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

您还应该使用项模板的含义：

<ListBox>
   <ListBox.ItemTemplate>
*****Your Posted Code ************
   </ListBox.ItemTemplate>
</ListBox>
相关文章：