如何显示的GridView项与可变宽度的窗口8？ [英] How to Display Gridview items with variable width in Window 8?

问题描述

有它的大小我的GridView的项目是第一项大小。我如何可以改变这种行为？

My GridView items having the size of it's first item size. How do i can change this behaviour ?

如何显示 GridView的项目与变量宽度按内容？

How to display GridView items with variable Width as per the content ?

我要显示的第一个，但我收到第二个。
任何建议这样做呢？

I want to show the first one but i am getting second one.
Any suggestion to do that?

推荐答案

下面是我的解决方案。

Here is my solution.

//可变大小的网格视图

//variable sized grid view

public class VariableSizedGridView : GridView
{
    protected override void PrepareContainerForItemOverride(Windows.UI.Xaml.DependencyObject element, object item)
    {
        try
        {
            dynamic gridItem = item;

            var typeItem = item as CommonType;
            if (typeItem != null)
            {
                var heightPecentage = (300.0 / typeItem.WbmImage.PixelHeight);
                var itemWidth = typeItem.WbmImage.PixelWidth * heightPecentage;
                var columnSpan = Convert.ToInt32(itemWidth / 10.0);


                if (gridItem != null)
                {
                    element.SetValue(VariableSizedWrapGrid.ItemWidthProperty, itemWidth);
                    element.SetValue(VariableSizedWrapGrid.ColumnSpanProperty, columnSpan);
                    element.SetValue(VariableSizedWrapGrid.RowSpanProperty, 1);
                }
            }
        }
        catch
        {
            element.SetValue(VariableSizedWrapGrid.ItemWidthProperty, 100);
            element.SetValue(VariableSizedWrapGrid.ColumnSpanProperty, 1);
            element.SetValue(VariableSizedWrapGrid.RowSpanProperty, 1);
        }
        finally
        {
            base.PrepareContainerForItemOverride(element, item);
        }
    }

//收藏查看源代码

//Collection View source

     <CollectionViewSource  x:Name="collectionViewSource"
                           Source="{Binding ImageList,Mode=TwoWay}"
                           IsSourceGrouped="False"
                           ItemsPath="Items" />   

//可变大小的网格视图XAML

//variable sized Grid view xaml

     <controls:VariableSizedGridView x:Name="ImageGridView"
                      AutomationProperties.AutomationId="ImageGridView"                            
                      ItemsSource="{Binding Source={StaticResource collectionViewSource}}" 
                      IsItemClickEnabled="True"
                      TabIndex="1" >
     <controls:VariableSizedGridView.ItemTemplate>
     <DataTemplate>
    <Grid Height="300" >
        <Image Stretch="Uniform" Source="{Binding WbmImage}" />
    </Grid>
    </DataTemplate>
    </controls:VariableSizedGridView.ItemTemplate>
                <controls:VariableSizedGridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VariableSizedWrapGrid  ItemWidth="10"   ItemHeight="300" Orientation="Vertical"/>
                    </ItemsPanelTemplate>
                </controls:VariableSizedGridView.ItemsPanel>                  
    </controls:VariableSizedGridView>

这篇关于如何显示的GridView项与可变宽度的窗口8？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！