ListView的ItemTemplate如何实现100%宽度？

Question

当我使用时，如何使每个项的内容扩展到100％宽度？

我已尝试在中使用以及在中使用，但似乎没有起作用，内容仍然靠左对齐。

我的代码大致如下：

<ListView x:Name="questionsView" Background="{StaticResource ApplicationPageBackgroundThemeBrush}" HorizontalContentAlignment="Stretch">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Border Background="BlueViolet" HorizontalAlignment="Stretch">
                <Grid HorizontalAlignment="Stretch">
                    <TextBlock Text="{Binding}" />
                    <TextBlock HorizontalAlignment="Right">16 minutes ago</TextBlock>
                </Grid>
            </Border>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

我猜在ListView和ItemTemplate之间还有一个层级。

- kiewic

Answer 1

我明白了。通过使用HorizontalContentAlignment属性的Setter设置ListView.ItemContainerStyle可以解决问题。例如:

<ListView x:Name="questionsView" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Border Background="BlueViolet">
                <Grid HorizontalAlignment="Stretch" Margin="0">
                    <TextBlock Text="{Binding}" />
                    <TextBlock HorizontalAlignment="Right">16 minutes ago</TextBlock>
                </Grid>
            </Border>
        </DataTemplate>
    </ListView.ItemTemplate>
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        </Style>
    </ListView.ItemContainerStyle>
</ListView>

- kiewic

---

你在使用哪个控件作为DataTemplate？是Grid吗？我的技巧是，我总是使用颜色背景来查看哪个控件没有扩展。 - kiewic

如果第一个TextBlock的文本太长，它会覆盖右侧的TextBlock。为了避免这种情况，您应该创建两个Grid.ColumnDefinitions并将每个文本块放在自己的列中。 - dcastro

这个解决方案对我很有效，即使我使用了带有ListView.GroupStyle和CollectionViewSource的组。 - scher

我在UWP Windows for IoT上测试过，它完美地工作了。谢谢 :) - ZenekMetalGuru

Answer 2

将项目容器的属性HorizontalContentAlignment设置为Stretch，尝试这样做。

<ListView.ItemContainerStyle>
   <Style TargetType="ListViewItem">
       <Setter Property="HorizontalContentAlignment" Value="Stretch" />
   </Style>
</ListView.ItemContainerStyle>

- Khurram

---

你错了。应该使用HorizontalContentAlignment而不是VerticalContentAlignment。 - Ryan

Answer 3

这里重要的是ScrollViewer.HorizontalScrollBarVisibility，TextWrapping和ItemContainerStyle与HorizontalContentAlignment。其余部分都是无关紧要的内容。

<ListView VerticalAlignment="Stretch"
          ScrollViewer.VerticalScrollBarVisibility="Auto"
          ScrollViewer.HorizontalScrollBarVisibility="Disabled">

    <ListView.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Prop1}" TextWrapping="Wrap"/>
        </DataTemplate>
    </ListView.ItemTemplate>

    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        </Style>
    </ListView.ItemContainerStyle>

</ListView>

- Bluntoze MuradinBronz