Comment Feed for Channel 9 - Controles avançados (GridView, ListView e FlipView) http://files.channel9.msdn.com/thumbnail/c6c2052f-8dde-4d9b-bcfe-3182c9bfeaa2.png Channel 9 - Controles avançados (GridView, ListView e FlipView) Por Vinícius Souza Microsoft Technical Evangelist Fabebook: http://aka.ms/facevisouza Blog: http://aka.ms/visouza Twitter: @vbs_br   Os controles GridView, ListView e FlipView não são fáceis de entender logo no primeiro contato, e essa dificuldade está relacionada ao comportamento diferente dos outros controles do tipo ItemsControl. Espero com esse artigo, ajudar você a entender e customizar estes controles. A classe ItemsControl é a classe pai para uma série de controles que exibem coleções de itens. Neste grupo você encontrará o ListBox e ComboBox, assim como os novos controles Windows GridView, FlipView e ListView. GridViewUtilizem o GridView para apresentar dados que rolam horizontalmente, se quiser que os dados rolem verticalmente utilizem o ListView abordado na próxima seção.   Por padrão, o item de dados é apresentado no GridView como uma representação de um objeto String do objeto que está ligado. Para especificar exatamente como os items de um GridView serão apresentados é necessário criar um DataTemplate para definir quais controles de layout serão utilizados para apresentar um item. Os controles no layout podem ser ligados (utilizando o binding)  para as propriedades de um objeto, ou ainda ter seu conteúdo definido diretamente no código. Você atribui o DataTemplate para a propriedade ItemTemplate do GridView. Um usuário pode selecionar um único item de um GridView, por padrão. Para alterar este comportamente alteramos o valor da propriedade SelectionMode para um dos possíveis valores da enumeração ListViewSelectionMode, permitindo assim, multipla seleção ou ainda desabilitar a seleção. O GridView ainda permite que seus itens comportam-se como botões, ao invez de ser selecionados. A tabela a seguir apresenta os possíveis comportamentos de um GridView e como responder a cada iteração: Para habilitar o comportamento Utilize esta configuração Manipule o evento Utilize esta propriedade para recuperar o item selecionado Sem interação SelectionMode = None IsItemClickEnabled = False -- -- Seleção simples SelectionMode = Single IsItemCliclEnabled = True SelectionChanged SelectedItem SelectedIndex Seleção multipla contínua SelectionMode = Multiple, IsItemClickEnabled = False SelectionChanged SelectedItems Seleção multipla não contínua SelectionMode = none IsItemClickEnabled = true ItemClick --   O GridView suporta virtualização dos dados para melhorar a performance quando estiver utilizando grande quantidades de dados. Virtualização de acesso aleatório é suportado quando a fonte de dados implementar a interface IObservableVector ou INotifyCollectionChanged. Virtualização de carga incremental é suportado quando a fonte de dados implementar a interface ISupportIncrementalLoading, neste caso você pode utilizar os membros para controlar o carregamento: DataFetchSize, IncrementalLoadingThreshold, IncrementalLoadingTrigger, LoadMoreItemsAsync. GridView implementa a interface ISemanticZoomInformation, o que possibilita sua utilização como uma visão do controle SemanticZoom. Quando utilizado em um controle SemanticZoom, sempre atualize a propriedade ScrollViewer.IsHorizontalScrollChainingEnabled para false, desta forma  <GridView ScrollViewer.IsHorizontalScrollChainingEnabled="False">. Os seguintes membros tem efeito somente quando utilizado em um GridView dentro de um SemanticZoom:  IsActiveView, IsZoomedInView, SemanticZoomOwner, CompleteViewChange, CompleteViewChangeFrom, CompleteViewChangeTo, InitializeViewChange, MakeVisible, StartViewChangeFrom, StartViewChangeTo. No trecho de código abaixo, o GridView está vinculado a uma coleção agrupada CollectionViewSource chamada cvsProjects. A aparência dos itens individuais de cada grupo é definida por um ItemTemplate. Os ItemsPanel especifica como o grupo será organizado na GridView. O GroupStyle.Panel especifica como itens individuais serão organizados em cada grupo. <GridView ItemsSource="{Binding Source={StaticResource cvsProjects}}" Margin="0,120,0,0" MaxHeight="500" Grid.Column="1"> <GridView.ItemTemplate> <DataTemplate> <StackPanel Margin="20"> <TextBlock Text="{Binding Name}" FontWeight="Bold" Style="{StaticResource ItemTextStyle}"/> <TextBlock Text="{Binding DueDate}" TextWrapping="NoWrap" Style="{StaticResource BodyTextStyle}" /> <CheckBox Content="Complete" IsChecked="{Binding Complete}" IsEnabled="False"/> </StackPanel> </DataTemplate> </GridView.ItemTemplate> <GridView.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation="Horizontal"/> </ItemsPanelTemplate> </GridView.ItemsPanel> <GridView.GroupStyle> <GroupStyle HidesIfEmpty="True"> <GroupStyle.HeaderTemplate> <DataTemplate> <Grid Background="LightGray" Margin="0"> <TextBlock Text='{Binding Name}' Foreground="Black" Margin="30" Style="{StaticResource HeaderTextStyle}"/> </Grid> </DataTemplate> </GroupStyle.HeaderTemplate> <GroupStyle.ContainerStyle> <Style TargetType="GroupItem"> <Setter Property="MinWidth" Value="600"/> <Setter Property="BorderBrush" Value="DarkGray"/> <Setter Property="BorderThickness" Value="2"/> <Setter Property="Margin" Value="3,0"/> </Style> </GroupStyle.ContainerStyle> <GroupStyle.Panel> <ItemsPanelTemplate> <VariableSizedWrapGrid/> </ItemsPanelTemplate> </GroupStyle.Panel> </GroupStyle> </GridView.GroupStyle> </GridView>[ ListViewComo dito anteriormente o ListView é utilizado para apresentar listas verticais, assim como o GridView o ListView é um controle do tipo ItemsControls, assim ele pode conter uma coleção de itens de um tipo. Para popular a visualização, adicione itens para a coleção Items, ou atualize a propriedade ItemsSource com a origem de dados a serem utilizados.   O ListView é geralmente utilizado para apresentar dados na visão Snapped, um exemplo desta utilização pode ser encontrada no template de Grid fornecido no Visual Studio. Tirando o fato que um ListView apresenta os dados na vertical, não há maiores diferenças com o GridView os controles fornecem as mesmas funcionalidades como carga incremental, acesso aleatório e zoom semântico. <ListView x:Name="itemListView" Margin="120,0,0,60" ItemsSource="{Binding Source={StaticResource itemsViewSource}}" SelectionChanged="ItemListView_SelectionChanged"> <ListView.ItemTemplate> <DataTemplate> <Grid Height="110" Margin="6"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="110" Height="110"> <Image Source="{Binding Image}" Stretch="UniformToFill"/> </Border> <StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0"> <TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextStyle}" TextWrapping="NoWrap"/> <TextBlock Text="{Binding Subtitle}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/> <TextBlock Text="{Binding Description}" Style="{StaticResource BodyTextStyle}" MaxHeight="60"/> </StackPanel> </Grid> </DataTemplate> </ListView.ItemTemplate> </ListView>  FlipViewUtilizem o controle FlipView para apresentar um coleção de itens sequencialmente, uma por vez. Este controle é muito utilizado para apresentar uma galeria de imagens, por exemplo. Galeria com o FlipView   O FlipView também é um controle do tipo ItemsControl, assim ele possui uma coleção de itens de qualquer tipo. Para populá-lo adicione itens para a coleção Items, ou atribua uma fonte de dados para a propriedade ItemsSource. O controle permite que seja utilizada todo o espaço disponível na tela para apresentar um item. Ele apresenta dois botões, um na esquerda e outro na direita que permite o usuário navegar entre os itens que serão apresentados, se você utilizar um dispositivo com suporte a touch as setas não serão apresentadas e você pode realizar movimentos do tipo swipe horizontais para avançar ou voltar. Por padrão, os dados de um FlipView é apresentado como uma representação de String de um objeto. Para especificar exatamente como os itens em um FlipView são apresentados, é necessário criar um DataTemplate para definir os controles de layout utilizados para cada item. Os controles no layout podem ser vinculados  utilizando Binding para os dados de objetos.   <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> ConclusãoO desafio de criar uma interface de usuário completamente nova, baseada em toque para aplicações metro style, requer um conjunto completo de novos controles que simplificam a nossa vida. Por essa razão, metro oferece alguns controles que implementam novos tipos de interações. en Wed, 22 May 2013 02:27:53 GMT Wed, 22 May 2013 02:27:53 GMT Rev9 Re: Controles avançados (GridView, ListView e FlipView) "como botões, ao invez de ser selecionados."

"ao invés" seria a expressão correta.

Desculpa ser chato, mas eu gosto quando me corrigem em meus textos. É fácil e normal passar alguma coisa.

posted by brunojuliao7

]]> http://channel9.msdn.com/posts/Controles-Avancados-GridView-ListView-FlipView#c634798827828749838 Mon, 06 Aug 2012 20:46:22 GMT http://channel9.msdn.com/posts/Controles-Avancados-GridView-ListView-FlipView#c634798827828749838 brunojuliao7 Re: Controles avançados (GridView, ListView e FlipView) Sem outro assunto me despesso
Julio Cunha Silva

posted by Julio Cunha Silva

]]> http://channel9.msdn.com/posts/Controles-Avancados-GridView-ListView-FlipView#c634799679746433706 Tue, 07 Aug 2012 20:26:14 GMT http://channel9.msdn.com/posts/Controles-Avancados-GridView-ListView-FlipView#c634799679746433706 Julio Cunha Silva Re: Controles avançados (GridView, ListView e FlipView) @brunojuliao7:Legal vc corrigir o texto, mas acho que foi muito deselegante a forma como o fez. Deveria mandar um email para a pessoa que escreveu o artigo. 

posted by MichaellDantas

]]> http://channel9.msdn.com/posts/Controles-Avancados-GridView-ListView-FlipView#c634863494045237075 Sat, 20 Oct 2012 17:03:24 GMT http://channel9.msdn.com/posts/Controles-Avancados-GridView-ListView-FlipView#c634863494045237075 MichaellDantas