XAML列定义宽度*无法利用可用空间

Question

我知道XAML中的ColumnDefinition是如何工作的，但我有一个想要实现却不知道如何做到的需求。

我想要创建4列，像这样：

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="110" />
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="80" />
    <ColumnDefinition Width="80" />
</Grid.ColumnDefinitions>

1. 列宽固定
2. 列必须占用所有可用空间（是的，它在列之间，这正是问题所在）
3. 列宽固定
4. 列宽固定

第二列包含文本，问题在于当文本太短时，第二列不会占用所有可用空间。它会自动变小，每一行都是如此。我可以通过在textblock中使用以下代码解决该问题：

MinWidth="2000"

但这不是一个好的方式，因为当屏幕变大时，这个数字可能会太低。

这里是包含4列的整个列表视图：

<ListView Grid.Row="1" Grid.ColumnSpan="4" ItemsSource="{Binding blabla}" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="110" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="80" />
                    <ColumnDefinition Width="80" />
                 </Grid.ColumnDefinitions>
                <Image Height="110" Width="110" Grid.Column="0" Source="{Binding blabla}" HorizontalAlignment="Stretch" />
                <TextBlock Text="{Binding blabla}" TextWrapping="Wrap" Margin="5,0,0,0" Grid.Column="1" FontSize="16" HorizontalAlignment="Stretch" TextAlignment="Left" FlowDirection="LeftToRight" MinWidth="2000" VerticalAlignment="Center" ScrollViewer.HorizontalScrollBarVisibility="Disabled" FontStretch="UltraCondensed"/>
                <TextBlock Grid.Column="2" TextWrapping="Wrap" Foreground="Black" Margin="5,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
                <Image Source="{Binding blabla, Converter={StaticResource ImgConverter}}" Grid.Column="3" Width="76" Height="76" HorizontalAlignment="Center" Stretch="None" VerticalAlignment="Center" Margin="0"/>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

- XHotSniperX

---

实际上，检查一下您父控件的宽度。它不会被设置为您预期的完整宽度。 - loop

你是什么意思？什么父控件？ - XHotSniperX

抱歉无法清楚地表达。但是您能否调查一下在设计师中您的网格占用了多少区域。 - loop

在设计师中看起来非常好。它占据了整个设备的宽度。但是当应用程序在模拟器或真实设备中启动时，第二列会自动调整为所需的文本宽度。因此，当文本很短时，第二列就会变得非常窄。 - XHotSniperX

Answer 1

你的布局已经很好定义了，但是有一个小问题导致ListViewitem的内容被左对齐了，这是因为在ListView控件中默认的ListViewItemStyle（名为“ItemContainerStyle”）中定义了此设置。

你只需要将我修改过以使内容横向和纵向跨越所有可用空间的ListViewItemStyle添加到你的资源中即可。

<Style x:Key="StretchedListViewItemStyle"
           TargetType="ListViewItem">
         <Setter Property="HorizontalContentAlignment"
                Value="Stretch" />
        <Setter Property="VerticalContentAlignment"
                Value="Stretch" />
</Style>

然后将其设置为ListView的ItemContainerStyle，如下所示：

<ListView Grid.Row="1" Grid.ColumnSpan="4" ItemsSource="{Binding blabla}" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" ItemContainerStyle="{StaticResource StretchedListViewItemStyle}"/>

- Abdullah Al Nady

---

哇，你找到了！不知道ListView可以这样样式化。非常感谢你！ - XHotSniperX