Làm thế nào để hiển thị các mục Gridview với độ rộng biến trong Cửa sổ 8?

Question

Các mục GridView của tôi có kích thước là first item size. Làm thế nào để tôi có thể thay đổi hành vi này?

Cách hiển thị GridView items với biến số Width theo nội dung?

Tôi muốn thể hiện là người đầu tiên nhưng tôi đang nhận được một giây.
Có đề xuất nào để làm điều đó không?

Answer 1

Đây là giải pháp của tôi.

// biến lưới có kích thước xem

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 Xem nguồn

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

// biến chế độ xem Lưới cỡ 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> 

Answer 2

Kiểm tra Windows 8 GridView and Variable-Sized Items và Different Sized Tile Items in WinRT GridView và cũng kiểm tra Variable Sized Grid Template
Hy vọng điều này giúp đỡ

Answer 3

Bạn có thể tạo điểm như vậy của GridView bằng cách thiết lập ItemsPanel-WrapPanel, bạn có thể nhận WrapPanel trên Jerry Nixon's blog. Đây là mã.

XAML

<GridView x:Name="gv"> 
    <GridView.ItemsPanel> 
     <ItemsPanelTemplate> 
      <local:WrapPanel Orientation="Horizontal" /> 
     </ItemsPanelTemplate> 
    </GridView.ItemsPanel> 
    <GridView.ItemTemplate> 
     <DataTemplate> 
      <Grid Height="140" Width="{Binding MyWidth}"> 
       <Grid.Background> 
        <SolidColorBrush Color="{Binding MyColor}" /> 
       </Grid.Background> 
       <TextBlock FontSize="20" VerticalAlignment="Bottom" Margin="10,0,0,10"> 
        <Run Text="{Binding MyWidth}" /> 
       </TextBlock> 
      </Grid> 
     </DataTemplate> 
    </GridView.ItemTemplate> 
</GridView> 

C#

protected override void OnNavigatedTo(NavigationEventArgs e) 
{ 
    var list = new List<ViewModel>() 
    { 
     new ViewModel(110, Colors.LawnGreen), 
     new ViewModel(50, Colors.DarkBlue), 
     new ViewModel(130, Colors.Firebrick), 
     new ViewModel(60, Colors.RosyBrown), 
     new ViewModel(100, Colors.IndianRed), 
     new ViewModel(210, Colors.BurlyWood), 
     new ViewModel(150, Colors.Turquoise) 
    }; 

    gv.ItemsSource = list; 
} 

public class ViewModel 
{ 
    public double MyWidth { get; set; } 
    public Color MyColor { get; set; } 

    public ViewModel(double _MyWidth, Color _MyColor) 
    { 
     MyWidth = _MyWidth; 
     MyColor = _MyColor; 
    } 
}