XAML Columndefinitions width *不占用可用空间

时间:2014-09-01 20:37:23

标签: xaml column-width

我知道columndefinition在XAML中是如何工作的,但我想做的事情并不知道如何。

我想要这样的4列:

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="110" />
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="80" />
    <ColumnDefinition Width="80" />
</Grid.ColumnDefinitions>
  1. 列具有固定宽度
  2. 列必须占用所有可用空间(是的,它是在列之间,这正是问题所在)
  3. 列具有固定宽度
  4. 列具有固定宽度
  5. 第二列包含文本,问题是当该文本太短时,第二列不占用所有可用空间。它会自动变小,每行都会变小。我可以在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>
    

1 个答案:

答案 0 :(得分:8)

您的布局定义明确但错过了导致Listviewitem的内容向左边距的小事,因为它是在ListView控件的名为“ItemContainerStyle”的默认ListViewItemStyle中定义的。

您需要做的就是添加我已修改过的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}"/>