Question

我想用图像填充GridView控件中的可用空间。具体来说，我想制作4列，每列都有一个Image。列之间没有空格。

首先想到：GridView填充页面中可用的整个空间，所以我只需要一个绑定到GridView的ActualWidth属性的转换器，然后将其除以四（列）。这应该给我四个具有相同宽度的列。问题是，不幸的是Width不是一个简单的数字，除以4它可能得到一个不完美的数字，所以4列Width的总和可以超过网格，结果是我只能看到三列而不是四列。即使我将边距和填充设置为零，结果也不会改变。代码如下：

<GridView x:Name="Photos">
        <GridView.ItemTemplate>
            <DataTemplate>
                <Image Source="{Binding Url}" 
                       Width="{Binding ElementName=Photos, Path=ActualWidth, Converter={StaticResource DivideByFourConverter}}"
                       Height="{Binding ElementName=Photos, Path=ActualWidth, Converter={StaticResource DivideByFourConverter}}
                       Stretch="UniformToFill" />
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>

第二个想法：尝试不在图像上设置宽度和高度，但要使WrapGrid设置最大行数和列数。没什么，我看到同样的结果......

<GridView x:Name="Photos">
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <ItemsWrapGrid MaximumRowsOrColumns="4"
                               Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
        <GridView.ItemTemplate>
            <DataTemplate>
                <Image Source="{Binding Url}" 
                       Stretch="UniformToFill" />
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>

为了清楚起见，这是屏幕： http://i.imgur.com/J6h5s0Z.png

是否有可能有一个简单的网格，项目填充没有边距？平台是Windows Phone 8.1 RT，因此无法使用GridViewColumns。

我甚至想过做一个带有4个列的隐藏网格*大小并将图像绑定到列的宽度但是...我正在寻找更智能的解决方案：）

Answer 1

您不应绑定到ActualWidth属性。 docs提到：

出于ElementName绑定的目的，ActualWidth在更改时不会发布更新（由于其异步和运行时计算的性质）。不要尝试使用ActualWidth作为ElementName绑定的绑定源。如果您的方案需要基于ActualWidth进行更新，请使用SizeChanged处理程序。

我设法让它像这样工作：

<GridView x:Name="GridView" SizeChanged="GridView_SizeChanged">
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid
                MaximumRowsOrColumns="4"
                Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
    <GridView.ItemTemplate>
        <DataTemplate>
            <Image Source="ms-appx:///Assets/Logo.png" />
        </DataTemplate>
    </GridView.ItemTemplate>

    <x:String>Test</x:String>
    <x:String>Test</x:String>
    <x:String>Test</x:String>
    <x:String>Test</x:String>
    <x:String>Test</x:String>
    <x:String>Test</x:String>
    <x:String>Test</x:String>
    <x:String>Test</x:String>
    <x:String>Test</x:String>
    <x:String>Test</x:String>
    <x:String>Test</x:String>
    <x:String>Test</x:String>
</GridView>

然后在后面的代码中：

private void GridView_SizeChanged(object sender, SizeChangedEventArgs e)
{
    var panel = (ItemsWrapGrid)GridView.ItemsPanelRoot;
    panel.ItemWidth = panel.ItemHeight = e.NewSize.Width / 4;
}

Screenshot

它也适用于6“模拟器。

填充GridView的空间

1 个答案: