网格数据模板使用星号不会产生统一的布局

时间:2017-09-01 04:32:23

标签: c# xaml listview uwp

我有一个ListView绑定到我希望以表格形式呈现的对象集合。我创建了一个ListView.ItemTemplate

<ListView.ItemTemplate>
            <DataTemplate>
                    <Grid BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" BorderThickness="1,0,1,1" DataContext="{Binding Wpn}" VerticalAlignment="Stretch" >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="4*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="1.25*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="1.25*"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto"/>
                            <RowDefinition Height="auto"/>
                        </Grid.RowDefinitions>
                        <Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" BorderThickness="0,0,1,0" HorizontalAlignment="Stretch">
                            <TextBlock Text="{Binding WeaponName}" TextTrimming="CharacterEllipsis" Margin="12,0,0,0"/>
                        </Border>
                        <Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" BorderThickness="0,0,1,0" Grid.Column="1">
                            <TextBlock Text="{Binding WeaponLock}" TextAlignment="Center" />
                        </Border>
                        <Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" BorderThickness="0,0,1,0" Grid.Column="2">
                            <TextBlock Text="{Binding WeaponAttack}" TextAlignment="Center"/>
                        </Border>
                        <Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" BorderThickness="0,0,1,0" Grid.Column="3">
                            <TextBlock Text="{Binding WeaponDamage}" TextAlignment="Center"/>
                        </Border>
                        <Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" Grid.Column="4">
                            <TextBlock Text="{Binding WeaponArc, Converter={StaticResource EnumDisplayConv}}" TextAlignment="Center"/>
                        </Border>
                        <TextBlock Text="test" Grid.Row="1"/>
                    </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>

ListView.ItemContainerStyle以确保每件商品在ListView

的整个宽度上延伸
<ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalAlignment" Value="Stretch"/>
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                <Setter Property="Margin" Value="0"/>
                <Setter Property="Padding" Value="0"/>
                <Setter Property="VerticalAlignment" Value="Stretch"/>
                <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            </Style>
        </ListView.ItemContainerStyle>

基于ColumndDefinitions全部是星号,我希望在每个绑定项目(即垂直对齐的所有边框)上看到一个统一的表格,但我看到的是看起来像自动调整大小的内容在至少第一列中,然后在剩余列中进行星形尺寸调整。

Bad Column Alignments

任何人都可以指出我出错的地方,或者是否有更好的方法来获得所需的表格外观?

2 个答案:

答案 0 :(得分:1)

不要给listview内容提供无限空间,那么它将尊重它的给定空间:

<ListView ScrollViewer.HorizontalScrollBarVisibility="Disabled">

否则它将始终测量具有无限宽度约束的子元素,因此网格将允许其子项声明无限空间然后当一些孩子占据大量空间而其他人不需要空间时它将开始忽略星形大小一点都不。

调试布局

如上所述,父容器需要指定受限宽度,因为对于无限宽度,网格列星形大小将失败。有一种简单的方法可以确定当前的父母是否满足要求:

创建自定义控件

public class RestrictiveWidthControl : ContentControl
{
    protected override Size MeasureOverride(Size constraint)
    {
        // check constraint. If the constraint.Width is infinite, your parent layout is not ready for reliable grid sizing
        return base.MeasureOverride(constraint);
    }
}

并将其置于有问题的XAML区域:

在网格上,它可以放置在与要分析的对象相同的级别(相同的网格行/列)

<local:RestrictiveWidthControl/>
<Border BorderBrush="Black" BorderThickness="0,0,1,0" HorizontalAlignment="Stretch">
    <TextBlock DockPanel.Dock="Left" Text="{Binding Text}" TextTrimming="CharacterEllipsis" Margin="12,0,0,0"/>
</Border>

通常,只需包装分析的控件

<local:RestrictiveWidthControl>
    <Border BorderBrush="Black" BorderThickness="0,0,1,0" HorizontalAlignment="Stretch">
        <TextBlock DockPanel.Dock="Left" Text="{Binding Text}" TextTrimming="CharacterEllipsis" Margin="12,0,0,0"/>
    </Border>
</local:RestrictiveWidthControl>

MeasureOverride方法中放置一个断点并检查输入constraint。如果它是无限的,你的布局需要在某处改变。

答案 1 :(得分:0)

我发现答案埋没在MSDN中。我需要在Grid中明确设置DataTemplate的宽度。我使用WidthListView.ActualWidth语法将ElementName绑定到Path属性,结果根据需要显示。可能不适合重复使用模板,但它适用于此实例。