限制GridView C＃UWP中的項目數

Question

我使用綁定到集合的網格視圖。 集合中包含未知數量的項目，我想限制GridView在一行中僅顯示5個項目。 每個項目都保存在一個堆棧面板中，該面板中包含一個文本塊和一個圖像。

答：如何限制GridView的項目數？ B.如果我不想限制它，如何制作1行的gridview，並用小箭頭將網格滾動到側面？

這是我的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

集合中包含未知數量的項目，我想限制GridView在一行中僅顯示5個項目。

GridView控件使用ItemsWrapGrid作為默認ItemsPanel 。 而且ItemsWrapGrid具有MaximumRowsOrColumns屬性 。 使用此屬性，我們可以限制在包裝之前將出現的最大行數或列數。 該屬性與Orientation屬性一起使用。 要在一行中僅顯示5個項目，我們可以將其設置如下：

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

請注意， MaximumRowsOrColumns僅限制最大數量，如果GridView不夠大，則可能會看到較少的項目。

如果我不想限制它，如何制作1行的gridview，並用一個小箭頭將網格滾動到側面？

為了顯示水平堆疊的集合，我們通常使用ListView 。 如果確實要使用GridView ，則可以使用ItemsStackPanel而不是ItemsWrapGrid ，如下所示：

<GridView.ItemsPanel>
    <ItemsPanelTemplate>
        <ItemsStackPanel Orientation="Horizontal" />
    </ItemsPanelTemplate>
</GridView.ItemsPanel>

要啟用滾動，您可能還需要設置ScrollViewer.Horizo​​ntalScrollBarVisibility屬性和ScrollViewer.Horizo​​ntalScrollMode屬性，如下所示：

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