Question

我正在学习XAML for Windows 8通用应用程序，并且遇到了如何按照我想要的方式进行布局流程的障碍。我创建了一个jsfiddle来演示我正在寻找的布局。 http://jsfiddle.net/2vs6tpzm/

＆＃13;

span {
    float:left;
    width:130px;
    line-height:130px;
    background-color:green;
    margin:3px;
    padding:10px;
    text-align:center;
}

h1 {
    padding:0px;
    margin:0px;
    padding-top:10px;
    font-size:1.25em;
}
div {
    clear:both;
}

＆＃13;

<div class="hub-section">
    <div>
        <div><h1>Heading 1</h1></div>
        <div> 
            <span>Item 1</span>
            <span>Item 2</span>
            <span>Item 3</span>
            <span>Item 4</span>
            <span>Item 5</span>
            <span>Item 6</span>
            <span>Item 7</span>
            <span>Item 8</span>
        </div>
        
        <div><h1>Heading 2</h1></div>
        <div> 
            <span>Item 1</span>
            <span>Item 2</span>
            <span>Item 3</span>
            <span>Item 4</span>
            <span>Item 5</span>
            <span>Item 6</span>
        </div>
    </div>
    
</div>

＆＃13;

以下是我正在使用的视图模型的一部分。

public class ViewModel
{
    public List<ItemTypeData> ItemTypes { get; set; }
}

public class ItemTypeData
{

    public List<ItemData> Items { get; set; }
    public string ItemTypeName { get; set; }

}

public class ItemData
{
    public string ItemName { get; set; }
}

这是我的设计数据

<vm:ViewModel
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="using:HubApp1.DataModel">

<vm:ViewModel.ItemTypes>
    <vm:ItemTypeData ItemTypeName="Type 1">
        <vm:ItemTypeData.Items >
            <vm:ItemData ItemName="Item 1"/>
            <vm:ItemData ItemName="Item 2"/>
            <vm:ItemData ItemName="Item 3"/>
            <vm:ItemData ItemName="Item 4"/>
            <vm:ItemData ItemName="Item 5"/>
            <vm:ItemData ItemName="Item 6"/>
            <vm:ItemData ItemName="Item 7"/>
            <vm:ItemData ItemName="Item 8"/>
            <vm:ItemData ItemName="Item 9"/>
        </vm:ItemTypeData.Items>
    </vm:ItemTypeData>
    <vm:ItemTypeData ItemTypeName="Type 2">
        <vm:ItemTypeData.Items >
            <vm:ItemData ItemName="Item 1"/>
            <vm:ItemData ItemName="Item 2"/>
            <vm:ItemData ItemName="Item 3"/>
            <vm:ItemData ItemName="Item 4"/>
            <vm:ItemData ItemName="Item 5"/>
            <vm:ItemData ItemName="Item 6"/>
            <vm:ItemData ItemName="Item 7"/>
        </vm:ItemTypeData.Items>
    </vm:ItemTypeData>
</vm:ViewModel.ItemTypes>

以下是我最近尝试使用上述信息的方法。

<HubSection Width="500" x:Uid="SectionTest" Header="Types!">
<DataTemplate>
    <ListView ItemsSource="{Binding Types}" >
        <ListView.ItemTemplate>
            <DataTemplate>
                <StackPanel>
                    <TextBlock Text="{Binding TypeName}" />
                    <GridView ItemsSource="{Binding Items}">
                        <GridView.ItemTemplate>
                            <DataTemplate>
                                <Border Width="150" Height="150" Background="Green">
                                    <TextBlock Text="{Binding ItemName}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                                </Border>
                            </DataTemplate>
                        </GridView.ItemTemplate>
                    </GridView>
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</DataTemplate>
</HubSection>

如果有人能帮助我，我会非常感激。

Answer 1

你可能不相信:)但与JS相比，这在XAML中令人难以置信。但你确实从虚拟化中获益。

最简单的解决方案是列出清单 - 例如一个ListView ItemsSource绑定到您的ItemTypes，其TextBlock + ItemsControl位于其ItemTemplate/DataTemplate ItemsSource Items绑定到ItemsPanel/ItemsPanelTemplate，其WrapGrid设置为Orientation="Horizontal" ItemTemplate/DataTemplate，然后其Border设置为绿色Items。这可能适用于{{1}}的有限列表，因为它不会虚拟化这些列表，但如果您想要显示大型（超过50个？）项目列表 - 它可能不够好。

然后更好的解决方案是使用grouped CollectionViewSource, ListView.GroupStyle etc.来获取完全虚拟化的列表，因此我会研究您要发布的任何内容。

Wp8.1 Xaml：在垂直布局中列出多组水平项

1 个答案: