2 列的 GridView，填充宽度 [英] GridView with 2 columns, fill width

问题描述

我想要实现的结果非常简单，一个包含 2 列且宽度相等的列表.在 Windows Phone 7/8 中，这可以使用 ListBox 和 WrapPanel 作为 ItemsPanel 并设置 ItemWidth 轻松实现> 到 240(因为屏幕宽度是 480).

The result I want to achieve is pretty simple, a list with 2 columns, both with equal width. In Windows Phone 7/8 this could easily be achieved using a ListBox with a WrapPanel as ItemsPanel and setting the ItemWidth to 240 (as the screen width was 480).

现在我正在编写一个通用应用程序，但这里的问题是屏幕的宽度不能保证为 480(甚至对于手机来说似乎也不行)所以我无法设置 ItemWidth 因为我希望它填满屏幕的宽度.我已经能够使用以下 XAML 几乎达到预期的效果:

Now I'm Writing a Universal App, but here the problem is that the screen is not guaranted to have a width of 480 (not even for the Phone it seems) so I can't set the ItemWidth as I want it to fill the width of the screen. I have been able to achieve almost the desired effect using the following XAML:

<GridView ItemsSource="{Binding Results}" Margin="12">
    <GridView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Image Source="{Binding SampleImage}" />
            </Grid>
        </DataTemplate>
    </GridView.ItemTemplate>

    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid MaximumRowsOrColumns="2" Orientation="Horizontal" HorizontalChildrenAlignment="Stretch" VerticalChildrenAlignment="Stretch">
            </WrapGrid>
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
</GridView>

结果如下:

正如所看到的那样，它成功地给出了 2 列等宽，但是 GridView.ItemTemlate 中的 Grid 并没有填满每列的整个宽度.我已经尝试在 Grid 和 GridView 本身上设置 Horizo​​ntalAlignment="Stretch" 没有任何成功.有人知道这样做吗?

As seen it successfully gives 2 columns with equal width, BUT the Grid in the GridView.ItemTemlate doesn't fill the whole width of each column. I have tried setting HorizontalAlignment="Stretch" on both that Grid and on the GridView itself witout any success. Anyone has any idea of this do this?

推荐答案

你可以试试这个:

<GridView.ItemContainerStyle>
    <Style
        TargetType="GridViewItem">
        <Setter
            Property="HorizontalAlignment"
            Value="Stretch" />
        <Setter
            Property="VerticalAlignment"
            Value="Stretch" />
    </Style>
 </GridView.ItemContainerStyle>

您可以尝试的另一件事是在 GridView<上获得 SizeChanged 事件时手动设置 ItemWidth/ItemHeight/代码>.

The other thing you could try is to manually set ItemWidth/ItemHeight whenever you get the SizeChanged event on the GridView.

如果由于某种原因上述方法不起作用 - 您也可以按照我在下面执行的操作并更新 SizeChanged<上的 DoubleViewModel 资源的 Value/code> 事件:

If for some reason the above doesn't work - you could also do what I do below and update the Value of both DoubleViewModel resources on SizeChanged events:

<UserControl.Resources>
    <viewModels:DoubleViewModel
        x:Key="ItemWidth"
        Value="120" />
    <viewModels:DoubleViewModel
        x:Key="ItemHeight"
        Value="120" />
</UserControl.Resources>

...

<ItemsControl.ItemTemplate>
    <DataTemplate>
        <local:YourItemTemplateControl
            Width="{Binding Value, Source={StaticResource ItemWidth}}"
            Height="{Binding Value, Source={StaticResource ItemHeight}}" />
    </DataTemplate>
</ItemsControl.ItemTemplate>

DoubleViewModel 在哪里:

public class DoubleViewModel : BindableBase
{
    #region Value
    /// <summary>
    /// Backing field for the Value property.
    /// </summary>
    private double value;

    /// <summary>
    /// Gets or sets a value indicating the value.
    /// </summary>
    public double Value
    {
        get { return this.value; }
        set { this.SetProperty(ref this.value, value); }
    }
    #endregion
}

这篇关于2 列的 GridView，填充宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！