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

Posted

技术标签:

【中文标题】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 的样式是这样的。非常感谢!

以上是关于XAML Columndefinitions 宽度 * 不占用可用空间的主要内容,如果未能解决你的问题,请参考以下文章

Xaml技术:浅谈Grid.ColumnDefinitions和Grid.RowDefinitions属性

WPF - 网格中组框的动态宽度

在代码中设置 ColumnDefinitions

将控件右对齐 - xaml

如何在宽度自动列中TextWrap TextBlock?

WPF 在 XAML 中使用 Grid 显示表格