在GridView(XAML)组中包装/浮动项目’float：left’在最上面的项目上

2019年05月03日作者：佚名

如何编写在GridView(XAML-Win8)组中流动项目的代码,如下图所示？

我目前有一个自定义TemplateSelector,为第一个项目选择一个不同的(更大)模板,但是这里指定的流程：

<GroupStyle.Panel>
    <ItemsPanelTemplate>
        <q42:WrapPanel Orientation="Horizontal" Width="440" Margin="0,80,0"/>
        <!-- also tried VariableSizedWrapGrid -->
    </ItemsPanelTemplate>
</GroupStyle.Panel>

类似地包装项目1到3,但是然后将项目4放置在项目6的位置,而不填写项目4和5.

问题变成;我如何编写类似于css的代码：

.item  { display: inline-block; }
.item1 { float: left; }

,这将使物品像我想要的那样流动？

解决方法

Andreas Hammar将我联系到一个有效的解决方案：

using System.Collections.Generic;
using Application1.Data;
using Windows.Foundation;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace Application1
{
    public class MyGridView : GridView
    {
        int _rowVal;
        int _colVal;
        readonly List<Size> _sequence;

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

        protected override void PrepareContainerForItemOverride(DependencyObject element,object item)
        {
            base.PrepareContainerForItemOverride(element,item);
            var dataItem = item as SampleDataItem;
            var index = -1;

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

            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);
        }
    }

    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);
    }
}

<local:MyGridView.ItemsPanel>
        <ItemsPanelTemplate>                        
            <VirtualizingStackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </local:MyGridView.ItemsPanel>
    <local:MyGridView.GroupStyle>
        <GroupStyle>
            <GroupStyle.HeaderTemplate>
                <DataTemplate>
                    <Grid Margin="1,6">
                        <Button
                            AutomationProperties.Name="Group Title"
                            Content="{Binding Title}"
                            Click="Header_Click"
                            Style="{StaticResource TextButtonStyle}"/>
                    </Grid>
                </DataTemplate>
            </GroupStyle.HeaderTemplate>
            <GroupStyle.Panel>
                <ItemsPanelTemplate>
                    <VariableSizedWrapGrid ItemWidth="80" ItemHeight="160" Orientation="Vertical" Margin="0,0" MaximumRowsOrColumns="3"/>
                </ItemsPanelTemplate>
            </GroupStyle.Panel>
        </GroupStyle>
    </local:MyGridView.GroupStyle>
</local:MyGridView>

以上是来客网为你收集整理的在GridView(XAML)组中包装/浮动项目’float：left’在最上面的项目上全部内容，希望文章能够帮你解决在GridView(XAML)组中包装/浮动项目’float：left’在最上面的项目上所遇到的程序开发问题。

如果觉得来客网网站内容还不错，欢迎将来客网网站推荐给程序员好友。