XAML Columndefinitions 宽度 * 不占用可用空间

Posted 2023-03-11

【中文标题】XAML Columndefinitions 宽度 * 不占用可用空间

【英文标题】：XAML Columndefinitions width * not taking available space

【发布时间】：2014-10-26 01:59:35

【问题描述】：

我知道列定义在 XAML 中是如何工作的，但有一些我想做但不知道如何做的事情。

我想要这样的 4 列：

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

列具有固定宽度 列必须占用所有可用空间（是的，它在列之间，这正是问题所在） 列具有固定宽度 列具有固定宽度

第 2 列包含文本，问题是当文本太短时，第 2 列不会占用所有可用空间。它会自动变小，并且每一行都会变小。我可以在文本块中使用此代码：

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>

【问题讨论】：

实际检查你的父控件宽度。这不会设置为您期望的全宽。

什么意思？什么父控件？

抱歉无法表达清楚。但是您能否调查一下您的 Grid 在 Designer 中占用了多少面积。

在设计师中它看起来非常漂亮。它占据了设备的整个宽度。但是当应用程序在模拟器或真实设备中启动时，第二列会自动调整为所需的文本宽度。所以当有一个短文本时，第二列真的很薄。

【参考方案1】：

您的布局定义明确，但错过了导致 Listviewitem 的内容向左添加边距的小问题，因为这是在 ListView Control 的默认 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"/>

【讨论】：

哇，你找到了！不知道 listview 的样式是这样的。非常感谢！