ListView DataTemplate 中的 ColumnDefinition 未扩展到全宽

Posted 2023-04-12

【中文标题】ListView DataTemplate 中的 ColumnDefinition 未扩展到全宽

【英文标题】：ColumnDefinition in ListView DataTemplate does not expand to full width

【发布时间】：2021-06-23 18:48:11

【问题描述】：

我正在创建一个ListView，其中DataTemplate 是一个唯一的文本和一个按钮。我希望按钮位于最右侧，文本位于最左侧。但是我注意到我的Grid.ColumnDefinitions 似乎没有占用ListViewItem 的所有空间（或者我是这么认为的）。我希望它们扩大到全宽。

<ListView Padding="5" x:Name="RecipeList" FontSize="15">
   <ListView.ItemTemplate>
      <DataTemplate>
         <Grid>
            <Grid.ColumnDefinitions>
               <ColumnDefinition></ColumnDefinition>
               <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>
                                
            <TextBlock Text="Binding Name" Grid.Column="0"/>
            <Button Grid.Column="1">Delete</Button>
         </Grid>
      </DataTemplate>
   </ListView.ItemTemplate>
</ListView>

【参考方案1】：

ListViewItem（由您的数据模板定义的内容容器）的默认内容对齐方式是Left，因此Grid 只会占用所需的空间，但不会缩放到可用宽度。将其更改为 Stretch 是一个项目容器样式。

<ListView Padding="5" x:Name="RecipeList" FontSize="15">
   <ListView.ItemContainerStyle>
      <Style TargetType="x:Type ListViewItem">
         <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
      </Style>
   </ListView.ItemContainerStyle>
   <ListView.ItemTemplate>
      <DataTemplate>
         <Grid>
            <Grid.ColumnDefinitions>
               <ColumnDefinition></ColumnDefinition>
               <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>
                                
            <TextBlock Text="Binding Name" Grid.Column="0"/>
            <Button Grid.Column="1">Delete</Button>
         </Grid>
      </DataTemplate>
   </ListView.ItemTemplate>
</ListView>

您的列定义为TextBlock 和Button 在网格中的比例相等。如果要将Button 向右对齐，TextBlock 占用剩余空间，请将第二列的Width 设置为Auto。然后Button 只使用它需要的空间。

<Grid>
   <Grid.ColumnDefinitions>
      <ColumnDefinition></ColumnDefinition>
      <ColumnDefinition Width="Auto"/>
   </Grid.ColumnDefinitions>

   <TextBlock Text="Binding Name" Grid.Column="0"/>
   <Button Grid.Column="1">Delete</Button>
</Grid>