Đóng gói/thả nổi các mục trong GridView (XAML) nhóm 'phao: trái' trên mục trên cùng

Question

Làm cách nào để viết mã lưu các mục trong nhóm GridView (XAML-Win8), theo hình minh họa dưới đây?

Tôi hiện đang có một phong tục TemplateSelector rằng chọn một (lớn hơn) mẫu khác nhau cho các mục đầu tiên, nhưng dòng chảy như quy định ở đây:

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

Wraps mục từ 1 đến 3 tương tự, nhưng sau đó đặt mục 4 ở vị trí của mục 6, không điền các mục 4 hoặc 5.

Câu hỏi trở nên; làm cách nào để viết mã hoạt động tương tự như css:

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

, điều này có thể làm cho các mục như tôi muốn?

Answer 1

Andreas Hammar liên kết tôi đến một giải pháp làm việc:

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.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(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,0,0,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,80,0" MaximumRowsOrColumns="3"/> 
       </ItemsPanelTemplate> 
      </GroupStyle.Panel> 
     </GroupStyle> 
    </local:MyGridView.GroupStyle> 
</local:MyGridView> 

Answer 2

Tôi nghĩ rằng nó có thể được thực hiện với VSWG. Tôi đã nhận được nửa chừng ở đó nhưng không có đủ thời gian để hoàn thành nó ...

Trước tiên, bạn cần đặt giá trị được gắn kèm Biến đổiSửa đổiRrapGrid.RowSpan và ColSpan - và phải được đặt trên vùng chứa, bằng cách kế thừa VSWG: http://blogs.u2u.be/diederik/post/2012/03/07/Databinding-to-the-VariableSizedWrapGrid-in-Windows-8-Metro.aspx

Và trong trường hợp của bạn là 2x2 cho mặt hàng đầu tiên, 1x1 trên phần còn lại.

Đo kích thước ô được thực hiện trên phần tử đầu tiên, trừ khi bạn chỉ định ItemHeight vv một cách rõ ràng. Vì vậy, bạn phải thực hiện điều này bằng cách nào đó :) http://social.msdn.microsoft.com/Forums/en-US/winappswithcsharp/thread/569e048a-9f5e-4fb3-870a-380de5906e80 WG hỗ trợ các mục có kích thước đơn và tất cả các mục được hiển thị ở cùng kích thước đó. VSWG cho phép các mục có kích thước thay đổi nhưng kích thước vật phẩm cho phép nằm trong bội số nguyên của kích thước ô cơ sở. WG và VSWG hoạt động trong các ô bố trí. Kích thước của ô bố cục được xác định bởi các thuộc tính ItemHeight và ItemWidth. Nếu các thuộc tính này không được thiết lập, thì kích thước của mục đầu tiên được sử dụng như kích thước ô và các mục tiếp theo được đo ở kích thước đó cho WG; cho VSWG mục được đo bằng phép nhân không tách rời của kích thước ô dựa trên thuộc tính RowSpan và ColumnSpan. Dường như bạn phải đặt chiều cao và chiều rộng của VSWG để chứa kích thước của mục lớn nhất nếu bạn không muốn mục đó là đầu tiên trong danh sách. -> đây là một phần mà tôi không nhận được xung quanh.

Cuối cùng là hướng ngang.

Chúc may mắn!