Idioma: HTML | XAML

Guia de início rápido: adicionando controles FlipView (XAML)

Use um controle FlipView para exibir uma coleção de itens pela qual o usuário pode inverter sequencialmente em seu aplicativo do Tempo de Execução do Windows em C++, C# ou Visual Basic.

Pré-requisitos

Nós supomos que você saiba adicionar controles a um aplicativo básico do Tempo de Execução do Windows em C++, C# ou Visual Basic. Para obter instruções sobre adicionar um controle, veja Guia de início rápido: adicionando controles e manipulando eventos.

O que é um FlipView?

O FlipView é um controle que permite que você percorra e inverta uma coleção de itens, um por vez. Esse controle é ótimo para exibir uma galeria de imagens. O FlipView é derivado da classe ItemsControl, como os controles ListView e GridView, de modo que ele compartilha vários de seus recursos. Você pode preencher um FlipView adicionando itens em linha ou associando a uma origem de dados.

Controle de exibição de inversão

Adicionando itens à coleção de itens

Você pode adicionar itens à coleção Items usando XAML ou código. Normalmente você adiciona itens dessa maneira, quando você tem um pequeno número de itens que não mudam e são facilmente definidos em XAML, ou quando você gera os itens em código no tempo de execução. Veja um FlipView com itens definidos em linha usando XAML.


<FlipView x:Name="flipView1" SelectionChanged="FlipView_SelectionChanged">
    <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");
flipView1.SelectionChanged += FlipView_SelectionChanged;

// Add the flip view to a parent container in the visual tree.
stackPanel1.Children.Add(flipView1);


Quando você adiciona itens a um FlipView eles são colocados automaticamente em um contêiner de 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 (Extensible Application Markup Language), eles também são adicionados automaticamente à coleção Items.

Definindo a origem de itens

Você geralmente usa um FlipView para exibir dados de uma origem como um banco de dados ou internet. Para preencher um FlipView a partir de uma fonte de dados, defina sua propriedade ItemsSource como uma coleção de itens de dados.

Observação  Você pode preencher um FlipView adicionando itens a sua coleção Items ou definindo sua propriedade ItemsSource mas você não pode usar as duas formas ao mesmo tempo. Se você definir a propriedade ItemsSource e adicionar um item no XAML, o item será ignorado. Se você definir a propriedade ItemsSource e adicionar um item à coleção Items no código, uma exceção será gerada.

Aqui, o FlipView ItemsSource é definido em código diretamente 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, veja Vinculação de dados com XAML.

Aqui, ItemsSource é associado a um CollectionViewSource chamado itemsViewSource.


<Page.Resources>
    <!-- Collection of items displayed by this page -->
    <CollectionViewSource x:Name="itemsViewSource" Source="{Binding Items}"/>
</Page.Resources>



<ListView x:Name="itemFlipView" 
          ItemsSource="{Binding Source={StaticResource itemsViewSource}}"/>


Especificando a aparência dos itens

Por padrão, o item de dados é exibido em FlipView como a representação da cadeia de caracteres do objeto de dados ao qual ele está associado. Você geralmente quer mostrar uma apresentação mais interessante de seus dados. Para especificar exatamente como os itens FlipView são exibidos, crie um DataTemplate. O XAML no DataTemplate define o layout e a aparência de 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 em linha. O DataTemplate é atribuído à propriedade ItemTemplate do FlipView.

Neste exemplo, o ItemTemplate de um FlipView é definido em linha. Uma sobreposição é adicionada à imagem para exibir o nome da imagem.


    <FlipView x:Name="flipView1" Width="480" Height="270" 
              BorderBrush="Black" BorderThickness="1">
            <FlipView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Image Width="480" Height="270" Source="{Binding Image}" Stretch="UniformToFill"/>
                        <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>


Veja a aparência do layout definido pelo modelo de dados.

Inverta o modelo de dados de exibição.

Definindo a orientação do FlipView

Por padrão, FlipView inverte horizontalmente. Para fazê-lo inverter verticalmente, use um StackPanel com uma orientação vertical como o ItemsPanel do modo de exibição de inversão.

Este exemplo mostra como especificar um StackPanel 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" Source="{Binding Image}" Stretch="UniformToFill"/>
                  <Border Background="#A5000000" Height="80" VerticalAlignment="Bottom">
                      <TextBlock Text="{Binding Title}" FontFamily="Segoe UI" FontSize="26.667" 
                                 Foreground="#CCFFFFFF" Padding="15,20"/>
                  </Border>
              </Grid>
          </DataTemplate>
      </FlipView.ItemTemplate>

  </FlipView>


Veja como o FlipView fica com uma orientação vertical.

Modo de exibição de inversão com orientação vertical

Resumo e próximas etapas

Você aprendeu como criar um controle FlipView para exibir uma coleção de dados.

Para ver mais exemplos, baixe a Amostra de FlipView em XAML.

Tópicos relacionados

FlipView
Diretrizes para controles FlipView
Mapa de aplicativos do Tempo de Execução do Windows em C# ou Visual Basic
Mapa de aplicativos do Tempo de Execução do Windows em C++

 

 

Mostrar:
© 2015 Microsoft