2016-11-27 162 views
0

我使用绑定到集合的网格视图。该集合保存着未知数量的项目,我想限制GridView在一行中只显示5个项目。每个项目都包含在一个包含文本块和图像的堆叠面板内。GridView中的项目数量限制C#UWP

A.如何限制GridView中的项目数量? B.如果我不想限制它,我怎样才能制作一行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> 

回答

2

收集拿着一个未知数量的项目,我想,限制GridView显示在一行中只有5个项目。

GridView使用ItemsWrapGrid作为默认ItemsPanel。并且ItemsWrapGrid有一个MaximumRowsOrColumns property。有了这个属性,我们可以限制包装之前出现的最大行数或列数。该属性适用于Orientation属性。要显示在一排只有5个项目,我们可以设置它像以下:

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

请注意:MaximumRowsOrColumns只限制最大数,如果GridView不够大,你可能会看到更少的项目。

如果我不想限制它,我该如何制作一行gridview,并用小箭头将网格滚动到一边?

要显示水平堆叠的集合,我们通常使用ListView。如果你想使用GridView,您可以使用ItemsStackPanel代替ItemsWrapGrid像以下:

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

要启用滚动,你可能还需要设置ScrollViewer.HorizontalScrollBarVisibility财产和ScrollViewer.HorizontalScrollMode性质类似以下内容:

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

你好周杰伦说,例如我使用ItemsWrap GridMaximumRowsOrColumns =“3”,并且我总共有18项由6行显示。但是,我只想显示第1行或者第1&2行。有没有办法做到这一点? – axcelenator

+0

@axcelenator如果您只想显示第一行,那么您可能需要更改'ItemsSource'。例如,如果要显示前三项,可以从'ForeCasts'中检索它们,并将三项设置为'ItemsSource'。 –

+0

谢谢。得到它了。我认为有一些方法可以在不更改原始来源的情况下限制该来源。 – axcelenator