XAML 列定义宽度 * 不占用可用空间 [英] XAML Columndefinitions width * not taking available space

问题描述

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

I know how the columndefinition works in XAML but there is something I want to do and don't know how.

我想要 4 个这样的列:

I want 4 columns like that:

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

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

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

The 2nd column contains text and the problem is that when that text is too short the 2nd column does not take all the available space. it get's smaller automatically and this for each row. I can make it work with this code in the textblock:

MinWidth="2000"

但这不是一个好方法，因为当屏幕很大时这个数字可能太低了.

But it's not the good way since this number could be too low when the screen is big.

这里是包含 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>

推荐答案

您的布局定义良好，但遗漏了一个小问题，导致 Listviewitem 的内容向左留边距，因为它是在默认 ListViewItemStyle 中定义的对于 ListView 控件，它被命名为ItemContainerStyle".

Your layout is well-defined but missed a small thing that is causing that the content of the Listviewitem is margined to the left because that is defined in the default ListViewItemStyle which is named "ItemContainerStyle" for the ListView Control .

您需要做的就是将我修改过的 ListViewItemStyle 添加到您的资源中，以便在项目的所有可用空间中水平和垂直地拉伸内容

All what you need to do is add this ListViewItemStyle that I've modified to stretch the content Horizontally and Vertically across all the available space for the item to your Resources

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

然后将其设置为 ListView 的 ItemContainerStyle 如下:

Then set it as the ItemContainerStyle for the ListView as follows:

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

这篇关于XAML 列定义宽度 * 不占用可用空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！