Window 8에 가변 너비가있는 Gridview 항목을 표시하는 방법은 무엇입니까?

Question

내 GridView 항목의 크기는 first item size입니다. 이 동작을 어떻게 바꿀 수 있습니까?

을 변수로 사용하여 표시 할 방법 Width?

나는 첫 번째를 보여주고 싶은하지만 난 두 번째를 얻고있다.
그런 제안이 있으십니까?

Answer 1

XAML은 여기 내 솔루션입니다.

// 변수 크기의 격자보기

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

// 컬렉션 소스보기

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

// 변수 크기의 격자보기 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

확인 Windows 8 GridView and Variable-Sized Items 및 Different Sized Tile Items in WinRT GridView 또한 당신은 WrapPanel에 ItemsPanel을 설정하여 GridView 같은보기를 만들 수 있습니다 Variable Sized Grid Template
희망이 도움

Answer 3

을 확인, 당신은 Jerry Nixon's blog에 WrapPanel를 얻을 수 있습니다. 여기에 코드가 있습니다.

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