Pencere 8'de değişken genişlikte Gridview öğeleri nasıl görüntülenir?

Question

Benim GridView öğelerinin boyutu first item size. Bu davranışı nasıl değiştirebilirim?

GridView items, Width değişkenine göre nasıl görüntülenebilir?

İlkini göstermek istiyorum ama ikincisini alıyorum.
Bunu yapmak için herhangi bir öneri?

Answer 1

XAML İşte benim çözümdür.

// değişken büyüklükte ızgara görünümü

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

// Koleksiyon Kaynağı görüntüle

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

// değişken büyüklükte Tablo görünümü 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

Kontrol Windows 8 GridView and Variable-Sized Items ve Different Sized Tile Items in WinRT GridView ve ayrıca Sen WrapPanel için ItemsPanel ayarlayarak GridView böyle görünüm oluşturabilirsiniz Variable Sized Grid Template
Umut bu yardım

Answer 3

kontrol edip, Jerry Nixon's blog üzerinde WrapPanel alabilirsiniz. İşte kod.

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