I use a grid view which is binded to a collection. The collection is holding an unknown number of items and I want to limit the GridView to show only 5 items in one row. Each item is hold inside a stackpanel which holds a text block and an image.
A. How can I limit the GridView num of items? B. If I don't want to limit it how can I make a gridview of 1 row which with a little arrow scroll the grid to the side?
Here is my xaml code:
<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="°" 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>
The collection is holding an unknown number of items and I want to limit the GridView to show only 5 items in one row.
GridView uses ItemsWrapGrid as the default ItemsPanel . And ItemsWrapGrid has a MaximumRowsOrColumns property . With this property we can limit the maximum rows or columns that will present before wrapping. This property works with Orientation property. To show only 5 items in one row, we can set it like following:
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid MaximumRowsOrColumns="5" Orientation="Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
Please note that MaximumRowsOrColumns
only limits the maximum number, if the GridView
is not large enough, you might see less items.
If I don't want to limit it how can I make a gridview of 1 row which with a little arrow scroll the grid to the side?
To display a collection stacked horizontally, we usually use a ListView . If you do want to use GridView
, you can using ItemsStackPanel instead of ItemsWrapGrid
like following:
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsStackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
To enable scrolling, you might also need to set ScrollViewer.HorizontalScrollBarVisibility property and ScrollViewer.HorizontalScrollMode property like following:
<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="°" />
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.