Modelos de item para exibição de grade
Esta seção contém modelos de item que você pode usar com um controle GridView. Use esses modelos para obter a aparência de tipos de aplicativos comuns.
Para demonstrar associação de dados, esses modelos associam GridViewItems à classe Recording de exemplo da visão geral da associação de dados.
Observação
No momento, quando um DataTemplate contém vários controles (por exemplo, mais de um único TextBlock), o nome acessível padrão para leitores de tela é proveniente do método .ToString() no item. Para fins de praticidade, você pode definir o AutomationProperties.Name no elemento raiz de DataTemplate. Para obter mais informações sobre acessibilidade, consulte Visão geral da acessibilidade.
Ícone e texto
Use esses modelos para exibir uma coleção de aplicativos em uma grade com ícone e texto.
<GridView ItemsSource="{x:Bind ViewModel.Recordings}">
<GridView.ItemTemplate>
<DataTemplate x:Name="IconTextTemplate" x:DataType="local:Recording">
<StackPanel Width="264" Height="48" Padding="12" Orientation="Horizontal" AutomationProperties.Name="{x:Bind CompositionName}">
<SymbolIcon Symbol="Audio" VerticalAlignment="Top"/>
<TextBlock Margin="12,0,0,0" Width="204" Text="{x:Bind CompositionName}"/>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid MaximumRowsOrColumns="4" Orientation="Horizontal" HorizontalAlignment="Center"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
<GridView ItemsSource="{x:Bind ViewModel.Recordings}">
<GridView.ItemTemplate>
<DataTemplate x:Name="IconTextTemplate2" x:DataType="local:Recording">
<StackPanel Width="264" Height="120" Padding="12" Orientation="Horizontal" AutomationProperties.Name="{x:Bind CompositionName}">
<FontIcon Margin="0,6,0,0" FontSize="48" FontFamily="Segoe MDL2 Assets" FontWeight="Bold" Glyph="" VerticalAlignment="Top"/>
<StackPanel Margin="16,1,0,0">
<TextBlock Width="176" Margin="0,0,0,2" TextWrapping="WrapWholeWords" TextTrimming="Clip" Text="{x:Bind CompositionName}"/>
<TextBlock Width="176" Height="48" Style="{ThemeResource CaptionTextBlockStyle}" Foreground="{ThemeResource SystemControlPageTextBaseMediumBrush}" TextWrapping="WrapWholeWords" TextTrimming="Clip" Text="{x:Bind ArtistName}" />
</StackPanel>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid MaximumRowsOrColumns="4" Orientation="Horizontal" HorizontalAlignment="Center" Margin="40,0"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
Galeria de imagens
Use esse modelo para exibir uma coleção de imagens em uma grade com modo de seleção múltipla.
<GridView SelectionMode="Multiple">
<GridView.ItemTemplate>
<DataTemplate x:Name="ImageGalleryDataTemplate">
<Image Source="Placeholder.png" Height="180" Width="180" Stretch="UniformToFill"/>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid MaximumRowsOrColumns="3" Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
Imagem e texto
Use esses modelos para exibir uma coleção de mídias com texto abaixo.
<GridView ItemsSource="{x:Bind ViewModel.Recordings}">
<GridView.ItemTemplate>
<DataTemplate x:Name="ImageTextDataTemplate" x:DataType="local:Recording">
<StackPanel Height="280" Width="180" Margin="12" AutomationProperties.Name="{x:Bind CompositionName}">
<Image Source="Placeholder.png" Height="180" Width="180" Stretch="UniformToFill"/>
<StackPanel Margin="0,12">
<TextBlock Text="{x:Bind CompositionName}"/>
<TextBlock Text="{x:Bind ArtistName}" Style="{ThemeResource CaptionTextBlockStyle}" Foreground="{ThemeResource SystemControlPageTextBaseMediumBrush}"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid MaximumRowsOrColumns="10" Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
<GridView ItemsSource="{x:Bind ViewModel.Recordings}">
<GridView.ItemTemplate>
<DataTemplate x:Name="ImageTextDataTemplate2" x:DataType="local:Recording">
<StackPanel Height="280" Width="320" Margin="12" AutomationProperties.Name="{x:Bind CompositionName}">
<Image Source="Placeholder.png" Height="180" Width="320" Stretch="UniformToFill"/>
<StackPanel Margin="0,12">
<TextBlock Text="{x:Bind CompositionName}"/>
<TextBlock Text="{x:Bind ArtistName}" Style="{ThemeResource CaptionTextBlockStyle}" Foreground="{ThemeResource SystemControlPageTextBaseMediumBrush}"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid MaximumRowsOrColumns="4" Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
Imagem com sobreposição de texto
Use esse modelo para exibir uma coleção de mídias com sobreposição de texto.
<GridView ItemsSource="{x:Bind ViewModel.Recordings}">
<GridView.ItemTemplate>
<DataTemplate x:Name="ImageOverlayDataTemplate" x:DataType="local:Recording">
<Grid Height="180" Width="320" AutomationProperties.Name="{x:Bind CompositionName}">
<Image Source="Placeholder.png" Stretch="UniformToFill"/>
<StackPanel Orientation="Vertical" Height="60" VerticalAlignment="Bottom" Background="{ThemeResource SystemBaseLowColor}" Padding="12">
<TextBlock Text="{x:Bind CompositionName}"/>
<TextBlock Text="{x:Bind ArtistName}" Style="{ThemeResource CaptionTextBlockStyle}" Foreground="{ThemeResource SystemControlPageTextBaseMediumBrush}"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid MaximumRowsOrColumns="4" Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
Artigos relacionados
Windows developer