Jak wyświetlić elementy Gridview o zmiennej szerokości w oknie 8?

Question

Moje pozycje GridView o rozmiarze first item size. Jak mogę zmienić to zachowanie?

Jak wyświetlić GridView items o zmiennej Width zgodnie z treścią?

Chcę pokazać pierwszy z nich, ale otrzymuję drugi.
Wszelkie sugestie, aby to zrobić?

Answer 1

Oto moje rozwiązanie.

// zmiennej wielkości siatki widok

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

// Kolekcja źródłowy

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

// zmiennej wielkości Grid view 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

Sprawdź Windows 8 GridView and Variable-Sized Items i Different Sized Tile Items in WinRT GridView a także sprawdzić Variable Sized Grid Template
nadzieję, że ta pomoc

Answer 3

można utworzyć taki widok GridView ustawiając ItemsPanel do WrapPanel, można uzyskać WrapPanel na Jerry Nixon's blog. Oto kod.

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