Come visualizzare elementi Gridview con larghezza variabile in Window 8?

Question

I miei elementi GridView hanno le dimensioni di esso sono first item size. Come posso cambiare questo comportamento?

Come visualizzare GridView items con la variabile Width come per il contenuto?

voglio mostrare il primo, ma io sono sempre seconda.
Qualche suggerimento per farlo?

Answer 1

Ecco la mia soluzione.

// griglia di dimensioni variabili vista

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 Visualizza sorgente

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

// dimensioni vista Griglia variabile 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

Controllare Windows 8 GridView and Variable-Sized Items e Different Sized Tile Items in WinRT GridView e controllare anche Variable Sized Grid Template
Spero che questo aiuto

Answer 3

È possibile creare tale vista GridView impostando ItemsPanel-WrapPanel, è possibile ottenere WrapPanel su Jerry Nixon's blog. Ecco il codice.

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