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

问题描述

我想要达到的结果非常简单，列表中有两列，两列宽度相等。在Windows Phone 7/8中，使用带有 WrapPanel 的 ListBox 作为 ItemsPanel 并将 ItemWidth 设置为240（因为屏幕宽度为480）。

现在我正在编写一个通用应用程序，但这里的问题是屏幕不保证宽度为480（即使看起来不是这样的电话），所以我不能设置 ItemWidth ，因为我希望它填充屏幕的宽度。使用以下 XAML ：

 < GridView ItemsSource ={Binding Results}Margin =12> 
< GridView.ItemTemplate> 
< DataTemplate> 
<网格> 
< Image Source ={Binding SampleImage}/> 
< / Grid> 
< / DataTemplate> 
< /GridView.ItemTemplate> 
 
< GridView.ItemsPanel> 
< ItemsPanelTemplate> 
 < / WrapGrid> 
< / ItemsPanelTemplate> 
< /GridView.ItemsPanel> 
< / GridView> 
  

其中给出以下结果：

如前所述，它成功地给出了等宽的2列，但<$ c GridView.ItemTemlate 中的$ c> Grid 不填充每列的整个宽度。我已经在 Grid 和 GridView 上设置 Horizo​​ntalAlignment =Stretch本身没有任何成功。任何人都有这个想法吗？

解决方案

您可以试试这个：



 < GridView.ItemContainerStyle> 
< Style 
 TargetType =GridViewItem> 
< Setter 
 Property =Horizo​​ntalAlignment
 Value =Stretch/> 
< Setter 
 Property =VerticalAlignment
 Value =Stretch/> 
< / style> 
< /GridView.ItemContainerStyle> 
  

您可以尝试的另一件事是手动设置 ItemWidth / ItemHeight ，当您在 GridView


如果由于某些原因，上述方法无效 - 您也可以按照以下方法进行操作并更新值 code> DoubleViewModel SizeChanged 事件资源：



 < 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> 
 /// Value属性的备份字段。 
 ///< / summary> 
私人双重价值; 
 
 ///< summary> 
 ///获取或设置一个表示值的值。 
 ///< / summary> 
 public double Value 
 {
 get {return this.value; } 
 set {this.SetProperty（ref this.value，value）; } 
} 
 #endregion 
} 
  




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).

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>

Which gives the following result:

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?

解决方案

You could try this:

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

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

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>

Where DoubleViewModel is:

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屋！