GridView C＃UWPのアイテム数を制限する

Question

コレクションにバインドされたグリッドビューを使用します。コレクションには未知数のアイテムが含まれており、GridViewが1つの行に5つのアイテムしか表示されないように制限します。各項目は、テキストブロックと画像を保持するスタックパネル内に保持されます。

A.アイテムのGridView数を制限するにはどうすればよいですか？ B.私はそれを制限したくない場合どのように小さな矢印をグリッドを横にスクロールして1行のグリッドビューを作ることができますか？

は、ここに私のXAMLコードです：

<GridView Name="ListViewGrid" Background="Azure" 
       Grid.Row="2" 
       ItemsSource="{x:Bind ForeCasts}" 
       Foreground="Chartreuse" 
       HorizontalAlignment="Stretch" > 
     <GridView.ItemTemplate> 
      <DataTemplate x:DataType="data:ForeCast"> 
       <StackPanel Orientation="Vertical" Margin="20,20,20,20" Height="260" Width="260"> 
        <TextBlock HorizontalAlignment="Center" Margin="10,10,10,10"> 
         <Run Text="{x:Bind TempString}" FontSize="24" Foreground="Black"/> 
         <Run Text="&#x00B0;" FontFamily="Segoe Print" FontSize="24"/> 
         <Run Text="C" FontSize="24"/> 
        </TextBlock> 
        <Image Source="{x:Bind ImageString}" Width="60" Height="60"/> 
       </StackPanel> 
      </DataTemplate> 
     </GridView.ItemTemplate> 
    </GridView> 

Answer 1

コレクションは、アイテムの数が不明を保持していると私は1行で唯一の5項目を表示するようにGridViewのを制限したいです。

GridViewは、デフォルトのItemsPanelとしてItemsWrapGridを使用します。 ItemsWrapGridはMaximumRowsOrColumns propertyです。このプロパティでは、ラップする前に表示される最大の行または列を制限できます。このプロパティはOrientationプロパティで機能します。 1行で唯一の5項目を表示するには、我々は次のようにそれを設定することができます。

<GridView.ItemsPanel> 
    <ItemsPanelTemplate> 
     <ItemsWrapGrid MaximumRowsOrColumns="5" Orientation="Horizontal" /> 
    </ItemsPanelTemplate> 
</GridView.ItemsPanel> 

くださいGridViewが十分な大きさでない場合MaximumRowsOrColumnsにのみ、最大数を制限していることに注意してください、あなたはより少ない項目が表示されることがあります。

私はそれをどのように小さな矢印のグリッドを横にスクロールする1行のグリッドビューを作ることができますか？

横に積み重ねられたコレクションを表示するには、通常ListViewを使用します。あなたがGridViewを使いたいならば、あなたは次のように代わりItemsWrapGridのItemsStackPanelを使用することができます

<GridView Name="ListViewGrid" 
      Grid.Row="2" 
      HorizontalAlignment="Stretch" 
      Background="Azure" 
      Foreground="Chartreuse" 
      ItemsSource="{x:Bind ForeCasts}" 
      ScrollViewer.HorizontalScrollBarVisibility="Visible" 
      ScrollViewer.HorizontalScrollMode="Enabled"> 
    <GridView.ItemTemplate> 
     <DataTemplate x:DataType="data:ForeCast"> 
      <StackPanel Width="260" 
         Height="260" 
         Margin="20,20,20,20" 
         Orientation="Vertical"> 
       <TextBlock Margin="10,10,10,10" HorizontalAlignment="Center"> 
        <Run FontSize="24" Foreground="Black" Text="{x:Bind TempString}" /> 
        <Run FontFamily="Segoe Print" FontSize="24" Text="&#x00B0;" /> 
        <Run FontSize="24" Text="C" /> 
       </TextBlock> 
       <Image Width="60" Height="60" Source="{x:Bind ImageString}" /> 
      </StackPanel> 
     </DataTemplate> 
    </GridView.ItemTemplate> 
    <GridView.ItemsPanel> 
     <ItemsPanelTemplate> 
      <ItemsStackPanel Orientation="Horizontal" /> 
     </ItemsPanelTemplate> 
    </GridView.ItemsPanel> 
</GridView>