1

我有 Windows 8 Metro 应用程序，该应用程序具有包含项目和组的网格视图。

我希望我的 gridview 的包装顺序是从左到右而不是自上而下，如屏幕截图所示。

在此处输入图像描述

有可能吗？怎么做？

更新：这是我正在使用的相关代码；

网格视图 xaml

    <!-- Horizontal scrolling grid used in most view states -->
    <local:MyGridView
        x:Name="itemGridView"
        AutomationProperties.AutomationId="ItemGridView"
        AutomationProperties.Name="Grouped Items"
        Grid.RowSpan="2"
        Padding="116,137,40,46"
        ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
        ItemTemplate="{StaticResource VariableSizedTileItem}"
        SelectionMode="None"
        IsSwipeEnabled="false"
        IsItemClickEnabled="True"
        ItemClick="ItemView_ItemClick">


        <GridView.ItemsPanel>
            <ItemsPanelTemplate>                        
                <VirtualizingStackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
        <GridView.GroupStyle>
            <GroupStyle>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <Grid Margin="1,0,0,6">
                            <Button
                                AutomationProperties.Name="Group Title"
                                Click="Header_Click"
                                Style="{StaticResource TextPrimaryButtonStyle}" >
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" />
                                    <TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/>
                                </StackPanel>
                            </Button>
                        </Grid>
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
                <GroupStyle.Panel>
                    <ItemsPanelTemplate>
                        <VariableSizedWrapGrid ItemWidth="75" ItemHeight="150" Orientation="Vertical" Margin="0,0,80,0" MaximumRowsOrColumns="3"/>
                    </ItemsPanelTemplate>
                </GroupStyle.Panel>
            </GroupStyle>
        </GridView.GroupStyle>
    </local:MyGridView>

        <DataTemplate x:Key="VariableSizedTileItem">
        <Grid>
            <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
                <Image Source="{Binding Image}" Stretch="UniformToFill"/>
            </Border>
            <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
                <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="20" Margin="15,0,15,0"/>
                <TextBlock Text="{Binding Subtitle}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
            </StackPanel>
        </Grid>
    </DataTemplate>

自定义可变大小的网格视图

public class MyGridView : GridView
{
    private List<Size> _sequence;

    public MyGridView()
    {
        _sequence = new List<Size>
            {
                LayoutSizes.PrimaryItem,
                LayoutSizes.SecondarySmallItem,
                LayoutSizes.SecondarySmallItem,
                LayoutSizes.OtherSmallItem,
                LayoutSizes.OtherSmallItem, // 5 
                LayoutSizes.OtherSmallItem,
                LayoutSizes.SecondaryTallItem, // 7
                LayoutSizes.OtherSmallItem,
                LayoutSizes.SecondarySmallItem, // 9
                LayoutSizes.OtherSmallItem,
                LayoutSizes.SecondarySmallItem, // 11
                LayoutSizes.SecondarySmallItem,
                LayoutSizes.OtherSmallItem,
                LayoutSizes.OtherSmallItem
            };

    }

    protected override void PrepareContainerForItemOverride(Windows.UI.Xaml.DependencyObject element, object item)
    {
            var dataItem = item as SyndicatedDataItem;
            int index = -1;

            if(dataItem != null)
            {
                index = dataItem.Group.Items.IndexOf(dataItem);
            }

            int colVal;
            int rowVal;

            if (index >= 0 && index < _sequence.Count)
            {
                colVal = (int)_sequence[index].Width;
                rowVal = (int)_sequence[index].Height;
            }
            else
            {
                colVal = (int)LayoutSizes.OtherSmallItem.Width;
                rowVal = (int)LayoutSizes.OtherSmallItem.Height;
            }

            VariableSizedWrapGrid.SetRowSpan(element as UIElement, rowVal);
            VariableSizedWrapGrid.SetColumnSpan(element as UIElement, colVal);


            base.PrepareContainerForItemOverride(element, item);
    }

    /* 14 items style */
    public static class LayoutSizes
    {
        public static Size PrimaryItem = new Size(6, 2);
        public static Size SecondarySmallItem = new Size(3, 1);
        public static Size SecondaryTallItem = new Size(2, 2);
        public static Size OtherSmallItem = new Size(2, 1);
    }
}
4

1 回答 1

0

VariableSizedWrapGrid用以下代码替换您的。我想它可能会对你有所帮助。

<VariableSizedWrapGrid ItemWidth="75" ItemHeight="150" 
                       Orientation="Vertical" Margin="0,0,80,0" 
                       MaximumRowsOrColumns="3"/>

我希望它能解决你的问题。

谢谢你。

于 2013-01-18T08:49:41.667 回答