Exibição de inversão
Use um recurso exibição de inversão para procurar imagens ou outros itens em uma coleção, como fotos em um álbum ou itens em uma página de detalhes do produto, um item por vez. Em dispositivos sensíveis ao toque, deslizar o dedo em um item move a coleção. Com um mouse, os botões de navegação aparecem na passagem do mouse. No teclado, as teclas de seta movem a coleção.
Esse é o controle correto?
O recurso exibição de inversão é melhor para examinar imagens em coleções pequenas a médias (até 25 itens ou algo assim). Exemplos de tais coleções incluem itens em uma página de detalhes do produto ou fotos em um álbum de fotos. Embora não recomendemos o modo de exibição invertido em coleções maiores, o controle é comum para a visualização de imagens individuais em um álbum de fotos.
Recomendações
- O recurso exibição de inversão funciona melhor para coleções de até aproximadamente 25 itens.
- Evite usar um controle de modo exibição invertido em coleções grandes, já que o movimento repetitivo de inversão em cada item pode ser entediante. Uma exceção seria para álbuns de fotos, que costumam ter centenas ou milhares de imagens. Álbuns de fotos quase sempre alternam para um modo de exibição invertido depois que uma foto é selecionada no layout do modo de exibição de grade. Para outras coleções grandes, considere o Modo de exibição de lista ou de grade.
Lista de verificação de globalização e localização
- Considerações bidirecionais: use o espelhamento padrão para linguagens RTL. Os controles de avançar e voltar devem ser baseados na direção do idioma, portanto para idiomas RTL, o botão direito deve navegar para trás e o botão esquerdo deve navegar para a frente.
Exemplos
A navegação horizontal, começando pelo item mais à esquerda e invertendo à direita, é o layout típico para um modo de exibição invertido. Esse layout funciona bem na orientação retrato ou paisagem em todos os dispositivos:
O recurso exibição de inversão também pode ser procurado verticalmente:
UWP e WinUI 2
Importante
As informações e exemplos neste artigo são otimizados para aplicativos que usam o SDK do Aplicativo Windows e o WinUI 3, mas geralmente são aplicáveis a aplicativos UWP que usam o WinUI 2. Consulte a referência da API da UWP para obter informações e exemplos específicos da plataforma.
Esta seção contém informações necessárias para usar o controle em um aplicativo UWP ou WinUI 2.
As APIs para esse controle existem no namespace Windows.UI.Xaml.Controls .
- ApIs UWP:classe FlipView, propriedade ItemsSource, propriedade ItemTemplate
- Abra o aplicativo Galeria do WinUI 2 e veja o FlipView em ação. Os aplicativos da Galeria do WinUI 2 incluem exemplos interativos da maioria dos controles, recursos e funcionalidades do WinUI 2. Obtenha o aplicativo na Microsoft Store ou o código-fonte no GitHub.
Recomendamos usar o WinUI 2 mais recente para obter os estilos e modelos mais atuais para todos os controles. O WinUI 2.2 ou posterior inclui um novo modelo para esse controle que usa cantos arredondados. Para obter mais informações, confira Raio de canto.
Criar um recurso exibição de inversão
- APIs importantes: classe FlipView, propriedade ItemsSource, propriedade ItemTemplate
O aplicativo Galeria da WinUI 3 inclui exemplos interativos da maioria dos controles, recursos e funcionalidades da WinUI 3. Obtenha o aplicativo na Microsoft Store ou o código-fonte no GitHub
FlipView é um ItemsControl e, por isso, pode conter uma coleção de itens de qualquer tipo. Para popular a exibição, adicione itens à coleção de Itens ou defina a propriedade ItemsSource como uma fonte de dados.
Por padrão, o item de dados é exibido no recurso exibição de inversão como a representação do objeto de dados ao qual ele está associado. Para especificar exatamente como os itens em exibição de inversão são exibidos, crie um DataTemplate para definir o layout dos controles usados para exibir cada item. Os controles no layout podem ser associados a propriedades de um objeto de dados ou ter conteúdo definido embutido. Você atribui o DataTemplate à propriedade ItemTemplate do FlipView.
Adicionar itens à coleção Items
Você pode adicionar itens à coleção Items usando XAML ou código. Normalmente, você adiciona itens dessa maneira quando tem um pequeno número de itens que não mudam e são facilmente definidos no XAML ou ao gerar os itens em código no tempo de execução. Este é um recurso exibição de inversão com itens definidos embutidos.
<FlipView x:Name="flipView1">
<Image Source="Assets/Logo.png" />
<Image Source="Assets/SplashScreen.png" />
<Image Source="Assets/SmallLogo.png" />
</FlipView>
// Create a new flip view, add content,
// and add a SelectionChanged event handler.
FlipView flipView1 = new FlipView();
flipView1.Items.Add("Item 1");
flipView1.Items.Add("Item 2");
// Add the flip view to a parent container in the visual tree.
stackPanel1.Children.Add(flipView1);
Quando você adiciona itens a um recurso exibição de inversão, eles são colocados automaticamente no contêiner FlipViewItem. Para alterar como um item é exibido, você pode aplicar um estilo ao contêiner de item definindo a propriedade ItemContainerStyle.
Quando você define os itens em XAML, eles também são adicionados automaticamente à coleção Items.
Definir a origem de itens
Geralmente, você usa um recurso de exibição de inversão para exibir dados de uma origem, como um banco de dados ou a Internet. Para popular um recurso exibição de inversão em uma fonte de dados, você define sua propriedade ItemsSource como uma coleção de itens de dados.
Aqui, o ItemsSource do recurso exibição de inversão está definido diretamente no código em uma instância de uma coleção.
// Data source.
List<String> itemsList = new List<string>();
itemsList.Add("Item 1");
itemsList.Add("Item 2");
// Create a new flip view, add content,
// and add a SelectionChanged event handler.
FlipView flipView1 = new FlipView();
flipView1.ItemsSource = itemsList;
flipView1.SelectionChanged += FlipView_SelectionChanged;
// Add the flip view to a parent container in the visual tree.
stackPanel1.Children.Add(flipView1);
Você também pode associar a propriedade ItemsSource a uma coleção em XAML. Para saber mais, consulte Vinculação de dados com XAML.
Aqui, o ItemsSource está associado a um CollectionViewSource denominado itemsViewSource.
<Page.Resources>
<!-- Collection of items displayed by this page -->
<CollectionViewSource x:Name="itemsViewSource" Source="{Binding Items}"/>
</Page.Resources>
...
<FlipView x:Name="itemFlipView"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"/>
Cuidado
Você pode popular uma visualização de inversão adicionando itens à Coleção de itens dela ou configurando a propriedade ItemsSource. Não é possível usar os dois métodos ao mesmo tempo. Se você definir a propriedade ItemsSource e adicionar um item em XAML, o item adicionado será ignorado. Se você definir a propriedade ItemsSource e adicionar um item à coleção Items no código, uma exceção será gerada.
Especificar a aparência dos itens
Por padrão, o item de dados é exibido no recurso exibição de inversão como a representação do objeto de dados ao qual ele está associado. Você geralmente quer mostrar uma apresentação mais sofisticada de seus dados. Para especificar exatamente como os itens são exibidos no recurso exibição de inversão, você cria o DataTemplate. O XAML no DataTemplate define o layout e a aparência dos controles usados para exibir cada item. Os controles no layout podem ser associados a propriedades de um objeto de dados ou ter conteúdo definido embutido. O DataTemplate é atribuído à propriedade ItemTemplate do controle FlipView.
Neste exemplo, o ItemTemplate de um FlipView é definido embutido. Uma sobreposição é adicionada à imagem para exibir o nome da imagem.
<FlipView MaxWidth="400" Height="180" BorderBrush="Black" BorderThickness="1"
ItemsSource="{x:Bind Items, Mode=OneWay}">
<FlipView.ItemTemplate>
<DataTemplate x:DataType="data:ControlInfoDataItem">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Width="36" Source="{x:Bind ImagePath}" Stretch="Uniform"
VerticalAlignment="Center" />
<Border Background="#A5FFFFFF" Height="60" Grid.Row="1">
<TextBlock x:Name="Control2Text" Text="{x:Bind Title}" Foreground="Black"
Padding="12,12" Style="{StaticResource TitleTextBlockStyle}"
HorizontalAlignment="Center" />
</Border>
</Grid>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
Esta é a aparência do layout definido pelo modelo de dados.
Definir a orientação do recurso exibição de inversão
Por padrão, o recurso exibição de inversão inverte horizontalmente. Para fazê-lo inverter verticalmente, use um painel de pilha com uma orientação vertical como o ItemsPanel do recurso exibição de inversão.
Este exemplo mostra como usar o painel de pilha com uma orientação vertical como o ItemsPanel de um FlipView.
<FlipView x:Name="flipViewVertical" Width="480" Height="270"
BorderBrush="Black" BorderThickness="1">
<!-- Use a vertical stack panel for vertical flipping. -->
<FlipView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</FlipView.ItemsPanel>
<FlipView.ItemTemplate>
<DataTemplate>
<Grid>
<Image Width="480" Height="270" Stretch="UniformToFill"
Source="{Binding Image}"/>
<Border Background="#A5000000" Height="80" VerticalAlignment="Bottom">
<TextBlock Text="{Binding Name}"
FontFamily="Segoe UI" FontSize="26.667"
Foreground="#CCFFFFFF" Padding="15,20"/>
</Border>
</Grid>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
Esta é a aparência do recurso exibição de inversão com uma orientação vertical.
Adicionando um indicador de contexto
Use um indicador de contexto (como um PipsPager ou uma faixa de filme) com um modo de exibição de inversão para ajudar a fornecer aos usuários um ponto de referência dentro do conteúdo.
A imagem a seguir mostra um PipsPager usado com uma pequena galeria de fotos (recomendamos centralizar o PipsPager abaixo da galeria).
Este snippet de código mostra como associar um PipsPager a um FlipView.
<StackPanel>
<FlipView x:Name="Gallery" MaxWidth="400" Height="270" ItemsSource="{x:Bind Pictures}">
<FlipView.ItemTemplate>
<DataTemplate x:DataType="x:String">
<Image Source="{x:Bind Mode=OneWay}"/>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
<!-- The SelectedPageIndex is bound to the FlipView to keep the two in sync -->
<PipsPager x:Name="FlipViewPipsPager"
HorizontalAlignment="Center"
Margin="0, 10, 0, 0"
NumberOfPages="{x:Bind Pictures.Count}"
SelectedPageIndex="{x:Bind Path=Gallery.SelectedIndex, Mode=TwoWay}" />
</StackPanel>
Para coleções maiores (10 ou mais itens), é altamente recomendável usar um indicador contextual, como uma tira de filme de miniaturas. Ao contrário de um PipsPager que usa pontos ou glifos simples, cada miniatura na faixa de filme mostra uma versão menor e selecionável da imagem correspondente.
Para obter um exemplo completo mostrando como adicionar um indicador de contexto a um FlipView, consulte Exemplo de FlipView XAML.
Obter o código de exemplo
- Exemplo da Galeria do WinUI – consulte todos os controles XAML em um formato interativo.
Artigos relacionados
Windows developer
Comentários
Em breve: Ao longo de 2024, eliminaremos os problemas do GitHub como o mecanismo de comentários para conteúdo e o substituiremos por um novo sistema de comentários. Para obter mais informações, consulte https://aka.ms/ContentUserFeedback.
Enviar e exibir comentários de