WPF - Apresentando o controle ListView

Neste artigo eu vou apresentar os conceitos básicos sobre o controle ListView da WPF.

Os exemplos usados neste artigos foram criados usando o Visual Studio 2010 beta 2.

Para criar um projeto WPF abra o VS 2010 e no menu File selecione New Project; Selecione a seguir o Template WPF Application e informe um nome sugestivo como Wpf_ListView;

Usando e abusando do controle ListView

A tag <ListView></ListView> representa o controle ListView na linguagem XAML.

Então para usar um controle ListView basta definir esta tag com algumas propriedades. Abaixo temos um exemplo:

O código XAML exibe a tag <ListView> com as seguintes propriedades:

Para adicionar itens no controle ListView basta usar a coleção ListsViewItem do controle definindo o atributo Contente conforme o exemplo abaixo:

Para obter o mesmo resultado via código primeiro defina em uma nova janela WPF um controle TextBox, Button e ListView conforme a figura abaixo:

A seguir defina o seguinte código no evento Click do controle Button:

 Private Sub button1_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
        ListView1.Items.Add(textBox1.Text)
    End Sub

Executando o projeto basta digitar na caixa de texto e clicar no botão para incluir no controle ListView:

Para remover um item da coleção do controle ListView podemos usar os métodos ListView.Items.Remove ou ListView.Items.RemoveAt, onde o método RemoveAt usa o índice do item na coleção.

Vamos incluir mais um controle Button na janela Window1.xaml para podermos excluir itens do ListView conforme o código abaixo:

A seguir no evento Click do botão Button2 vamos definir o código:

 Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
        ListView1.Items.RemoveAt((ListView1.Items.IndexOf(ListView1.SelectedItem)))
 End Sub

Executando o projeto podemos agora incluir e selecionar um item e clicar no botão para excluir:

Formatação e Estilo no ListView

Podemos também aplicar formatação e estilo no controle ListView

Veja no exemplo abaixo onde estamos usando os atributos ForeGround e BackGround do ListViewItem para colorir os itens.

Os atributos FontFamily, FontSize, e FontWeight são usados para definir a fonte usada do ListViewItem. Neste exemplo definimos a fonte verdane com tamanho decrescente de 15,13,11,10 e 9 e em negrito (bold).

Exibindo imagens no ListView

Vamos agora mostrar como exibir imagens em um controle ListView. Inclua uma nova janela no projeto clicando com o botão direito sobre o projeto e selecionando Add -> Window e a seguir selecione WPF Window.

Vamos incluir imagens e texto no controle ListView. Para fazer isso eu vou colocar um controle image e um controle TextBlock em um controle StackPanel.

No controle Image a propriedade Source irá definir a imagem a ser exibida, e no controle TextBlock temos a propriedade Text com o texto a ser exibido. (Lembre-se de remover a propriedade Content do controle ListView).

Para o nosso exemplo iremos obter o seguinte resultado:

 

O código usado é dado a seguir:

 

<Window x:Class="Window3"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window3" Height="292" Width="338">
    <Grid Height="234" Width="308">
        <ListView Margin="10,45,0,13" Name="ListView1" HorizontalAlignment="Left"
        VerticalAlignment="Top" Width="287" Height="180" >
            <ListViewItem Background="Aqua" Foreground="Black" FontFamily="Verdana" FontSize="15" FontWeight="Bold">
               <StackPanel Orientation="Horizontal">
                    <Image Source="santos.gif" Height="30"></Image>
                    <TextBlock Text="Santos"></TextBlock>
               </StackPanel>
            </ListViewItem>
            <ListViewItem Background="Red" Foreground="Aqua" FontFamily="Georgia" FontSize="13" FontWeight="Bold">
                <StackPanel Orientation="Horizontal">
                    <Image Source="santoandre.gif" Height="30"></Image>
                    <TextBlock Text="Santo André"></TextBlock>
                </StackPanel>
            </ListViewItem>
            <ListViewItem Background="LightBlue" Foreground="Purple" FontFamily="Verdana" FontSize="11" FontWeight="Bold">
                    <StackPanel Orientation="Horizontal">
                        <Image Source="gremioprudente.gif" Height="30"></Image>
                        <TextBlock Text="Grêmio Prudente"></TextBlock>
                    </StackPanel>
            </ListViewItem>
            <ListViewItem Background="LightGreen" Foreground="Green" FontFamily="Georgia" FontSize="10" FontWeight="Bold">
                <StackPanel Orientation="Horizontal">
                    <Image Source="saopaulo.gif" Height="30"></Image>
                    <TextBlock Text="São Paulo"></TextBlock>
                </StackPanel>
            </ListViewItem>
            <ListViewItem Background="LightBlue" Foreground="Blue" FontFamily="Verdana" FontSize="9" FontWeight="Bold">
                <StackPanel Orientation="Horizontal">
                    <Image Source="corintians.gif" Height="30"></Image>
                    <TextBlock Text="Corinthians"></TextBlock>
                </StackPanel>
            </ListViewItem>
        </ListView>
    </Grid>
</Window>

 

Podemos ainda incluir outros controles no ListView como o controle checkbox.

 

Se desejar exibir o controle CheckBox no interior do ListView basta colocá-lo no interior do controle ListViewItems. Dessa forma para exibir um checkbox ao lado da imagem e do texto do Santos basta incluir o controle CheckBox envolvendo o StackPanel:

 

               <CheckBox Name="SantosCheckBox">
                    <StackPanel Orientation="Horizontal">
                        <Image Source="santos.gif" Height="30"></Image>
                        <TextBlock Text="Santos"></TextBlock>
                   </StackPanel>
                </CheckBox>

 

Observe que eu utilizei a propriedade Name do controle CheckBox para identificar e poder usar o controle se assim for preciso.

O resultado obtido é exibido a seguir:

 

 

Para encerrar o artigo sobre o ListView eu vou falar um pouco sobre a vinculação de dados ou data binding.

 

A vinculação de dados no ListView

 

Em geral usamos a propriedade ItemsSource do controle ListView para vincular uma coleção IEnumerable como um ArrayList ao controle ListView.

Vamos incluir outra janela no projeto clicando com o botão direito do mouse sobre o mesmo e selecionando Add->Window e a seguir escolhendo WPF Window e clicando em Add;

 

Em seguida inclua um controle ListView na janela :

 

 

No exemplo do artigo primeiro eu vou definir uma função chamada CarregaListViewDados que retorna um ArrayList();

 

    Private Function CarregaListViewDados() As ArrayList
        Dim lista As New ArrayList
        lista.Add("Santos")
        lista.Add("Santo André")
        lista.Add("Grêmio Prudente")
        lista.Add("São Paulo")
        lista.Add("Corinthians")
        lista.Add("Portuguesa")
        Return lista
    End Function

 

Em seguida no evento Loaded criamos um arraylist que obtém os dados e atribuímos este arraylist ao ListView através da propriedade ItemsSource:

 

 Private Sub Window4_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded
        Dim listaTimes As ArrayList = CarregaListViewDados()
        ListView1.ItemsSource = listaTimes
    End Sub

 

Executando o projeto iremos obter:

 

 

Dessa forma dei uma visão geral sobre o controle ListView da WPF.

Pegue o projeto completo aqui: Wpf_ListView.zip

Eu sei é apenas ASP .NET , mas eu gosto...

Referências:

José Carlos Macoratti