Vinculação de dados e listas

  • 10 minutos

Tech logo of U W P and W P F. W P F appears dimmed.

Até agora, você só usou a vinculação de dados para exibir e editar as propriedades de um único objeto. Nesta lição, você aplicará conceitos de vinculação de dados para exibir uma coleção de objetos. Para simplificar, esses objetos serão cores. Mais especificamente, serão várias instâncias da ColorDescriptor classe.

1. Crie a ColorDescriptor classe

Vamos criar uma classe para representar uma cor. Clique com o botão direito do mouse no projeto no Gerenciador de Soluções, selecione Adicionar / Classe e insira ColorDescriptor como o DatabindingSample nome da classe. Selecione Adicionar para criar a classe.

ColorDescriptor Contém duas propriedades: a própria cor como um objeto e um Windows.UI.Color nome de cor. Ele também tem um construtor que preenche essas propriedades, um ToString() método que exibe o nome da cor e valores hexadecimais para os componentes de cor R, G e B. Aqui está a aula inteira ColorDescriptor .

using Windows.UI;

namespace DatabindingSample
{
    public class ColorDescriptor : ObservableObject
    {
        public ColorDescriptor(Color color, string name)
        {
            Color = color;
            Name = name;
        }

        public Color Color { get; private set; }

        public string Name { get; private set; }

        public override string ToString()
        {
            return $"{Name} (#{Color.R:X2}{Color.G:X2}{Color.B:X2})";
        }
    }
}

Substitua o conteúdo padrão do arquivo ColorDescriptor.cs pelo código anterior.

2. Crie a página ColorList.xaml

Para exibir a lista de cores, usaremos uma nova página XAML. Clique com o botão direito do DatabindingSample mouse no projeto no Gerenciador de Soluções e selecione Adicionar / Novo Item. Escolha Página em Branco na lista de itens disponíveis e insira ColorList como o nome. Selecione Adicionar para criar a página.

Screenshot that shows Blank Page selected under Visual C Sharp, in the Add New Item dialog box.

3. Defina a página de inicialização

Agora, se você iniciar o aplicativo, ele será aberto com a página MainPage . Como você vai trabalhar com a página ColorList.xaml recém-criada, seria bom ter isso como a página inicial. Para que isso aconteça, abra App.xaml.cs e localize a linha que navega até MainPage.

rootFrame.Navigate(typeof(MainPage), e.Arguments);

Substitua por , e verifique se a página ColorList é iniciada quando você inicia o aplicativo (pressione F5 ou selecione Depurar / Iniciar Depuração).ColorListMainPage

4. Crie a lógica para a lista de cores

Continuaremos a prática recomendada introduzida anteriormente de criar uma lógica separada para a nova página. Então, vá em frente e crie uma nova classe, chamada ColorListLogic.

Clique com o botão direito do mouse no projeto no Gerenciador de Soluções, selecione Adicionar / Classe e digite ColorListLogic como o DatabindingSample nome da classe. Selecione Adicionar para criar a classe e cole o seguinte no arquivo:

using System.Collections.Generic;
using System.Collections.ObjectModel;

using Windows.UI;

namespace DatabindingSample
{
    public class ColorListLogic : ObservableObject
    {
        public List<ColorDescriptor> LotsOfColors { get; private set; }

        public ColorListLogic()
        {
            LotsOfColors = new List<ColorDescriptor>
            {
               new ColorDescriptor(Colors.Red, "red"),
               new ColorDescriptor(Colors.White, "white"),
               new ColorDescriptor(Colors.Green, "green"),
               new ColorDescriptor(Colors.Yellow, "yellow"),
               new ColorDescriptor(Colors.Blue, "blue"),
               new ColorDescriptor(Colors.Black, "black")
            };

        }
    }
}

A ColorListLogic aula é muito simples (por enquanto). Tem uma propriedade chamada LotsOfColors, que é um List dos ColorDescriptor objetos. A lista é preenchida com algumas cores no construtor da classe. E já está!

5. Exiba as cores em um ListBox

O próximo passo é exibir as cores em nosso aplicativo. Primeiro, vamos tornar o acessível a ColorListLogic partir de XAML. ColorList.xaml.csAbra e adicione isso à ColorList classe:

public ColorListLogic Logic { get; } = new ColorListLogic();

Estamos usando aqui a mesma sintaxe que usamos anteriormente MainPageLogic . Ele cria uma propriedade get-only e inicializa seu valor para um objeto recém-criado ColorListLogic .

Em seguida, abra ColorList.xaml e adicione o seguinte XAML dentro do Grid elemento .

<ListBox ItemsSource="{x:Bind Logic.LotsOfColors}" 
         Margin="20" 
         Width="200"
         HorizontalAlignment="Left" 
         VerticalAlignment="Top"/>

A parte interessante aqui é o ItemsSource atributo. Como o nome sugere, ele fornece a origem dos itens exibidos no ListBox. E está simplesmente ligado à ColorListLogicpropriedade do .LotsOfColors

Se você executar o aplicativo agora, ele mostra as cores em um ListBox! Mas não é muito bom de se olhar. O ListBox parece ter invocado o ToString()ColorDescriptormétodo do s armazenado na LotsOfColors lista.

Screenshot that shows the Data binding Sample window, with yellow selected.

6. Defina um modelo para os itens

Seria bom ter um modelo que mostrasse a cor real armazenada na ColorDescriptor.Color propriedade e seu nome. Algo assim:

Screenshot of template.

Para codificar isso em XAML, podemos colocar um colorido Rectangle e um em um StackPanelTextBlock arquivo .

<StackPanel Orientation="Horizontal">
    <Rectangle Width="80" Height="20">
        <Rectangle.Fill>
            <SolidColorBrush Color="Blue"/>
        </Rectangle.Fill>
    </Rectangle>
    <TextBlock Text="blue" Margin="20, 10, 0, 10"/>
</StackPanel>

Esse é um dos pontos fortes do XAML e da vinculação de dados. Quase todos os visuais complexos são baseados em modelos que você pode redefinir. Para usar o precedente StackPanel como um modelo, precisamos colocá-lo dentro de um DataTemplatearquivo . A DataTemplate precisa definir um DataType, que é o tipo de dados ao qual o modelo pode ser aplicado. No nosso caso, é a ColorDescriptor classe. Então, a DataTemplate aparência é assim:

<DataTemplate x:DataType="local:ColorDescriptor">
    <!-- template content comes here -->
</DataTemplate>

Como os dados são renderizados em um ListBox (e muitos outros controles) é controlado pelo seu ItemTemplate, que deve ser definido como o DataTemplate. Existem várias formas de o fazer. Nesta lição, vamos simplesmente definir o DataTemplate interior do ListBox, com a seguinte sintaxe:

<ListBox ...>
    <ListBox.ItemsSource>
        <DataTemplate ...>
            ...
        </DataTemplate>
    </ListBox.ItemsSource>
</ListBox>

Mais tarde, você verá como um pode ser reutilizado em vários lugares, definindo-o como um DataTemplate recurso.

Agora, o conjunto ListBox tem esta aparência (se você não acompanhou, substitua a tag inteira <ListBox> pelo seguinte XAML):

<ListBox ItemsSource="{x:Bind Logic.LotsOfColors}" 
         Margin="20" 
         Width="200"
         HorizontalAlignment="Left" 
         VerticalAlignment="Top">
    <ListBox.ItemTemplate>
        <DataTemplate x:DataType="local:ColorDescriptor">
            <StackPanel Orientation="Horizontal">
                <Rectangle Width="80" 
                           Height="20">
                    <Rectangle.Fill>
                        <SolidColorBrush Color="{x:Bind Color}"/>
                    </Rectangle.Fill>
                </Rectangle>
                <TextBlock Text="{x:Bind Name}" 
                           Margin="20, 10, 0, 10"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Observe que, como cada item no ListBox corresponde a um ColorDescriptor objeto, você só precisa definir as associações dentro do modelo dentro do contexto dessa classe. O compilador até verifica se os Logic.LotsOfColors objetos contémColorDescriptor, e que ColorDescriptor.NameColorDescriptor.Color existem e são do tipo certo.

7. Execute o aplicativo

Execute o aplicativo agora pressionando F5 ou selecionando Depurar / Iniciar Depuração no menu. Você deve ver a lista de cores em toda a sua glória.

Screenshot that shows the Data binding Sample window, with a list of six colors next to rectangles representing the color.

Se você iniciar um aplicativo XAML no modo de depuração, poderá aproveitar a edição XAML ao vivo. Você nem precisa parar o aplicativo ou pressionar salvar. Basta alterar o XAML e a maioria das alterações é refletida instantaneamente no aplicativo em execução. Experimente agora. Altere o Width e Height do interior do modelo de dados para 30, transformando assim os retângulos de Rectangle cor em quadrados.

Screenshot that shows the Data binding Sample window, with a list of six colors next to squares representing the color.

Isso é chamado de XAML Hot Reload e pode ser útil para ajustar o layout e as animações em seu aplicativo.

Resumo

Esta lição mostrou os conceitos básicos da exibição de vários itens em um ListBoxarquivo . Existem outros controlos disponíveis para fins semelhantes, tais como ItemsControl, ListViewe GridView. Mas os princípios básicos são os mesmos: vincular sua lista (IEnumerable, List<>) de objetos à ItemsSource propriedade e definir DataTemplates para controlar como os itens de lista individuais são exibidos e se comportam. Você também pode redefinir o layout desses itens e até mesmo a aparência dos próprios controles de contêiner (embora isso esteja além do escopo deste módulo).

Note que o código nunca teve que lidar com o ListBox próprio. Ele acabou de criar uma coleção de objetos de negócios (ColorDescriptor), e o tempo de execução XAML se encarregou de expandir o modelo para cada item.

A próxima lição ilustra como você pode selecionar itens de uma ListBox lista suspensa e alterar o conteúdo das listas do código para que a adição e a remoção de elementos sejam refletidas na interface do usuário.

Tech logo of U W P and W P F. U W P appears dimmed.

Até agora, você só usou a vinculação de dados para exibir e editar as propriedades de um único objeto. Nesta lição, você aplicará conceitos de vinculação de dados para exibir uma coleção de objetos. Para simplificar, esses objetos serão cores. Mais especificamente, serão várias instâncias de uma ColorDescriptor classe.

1. Crie a ColorDescriptor classe

Vamos criar a classe para representar uma cor. Clique com o botão direito do mouse no projeto no Gerenciador de Soluções, selecione Adicionar / Classe e insira ColorDescriptor como o DatabindingSampleWPF nome da classe. Selecione Adicionar para criar a classe.

ColorDescriptor Contém duas propriedades: a própria cor como um objeto e um System.Windows.Media.Color nome de cor. Ele também tem um construtor que define essas propriedades, um ToString() método que exibe o nome da cor e valores hexadecimais para os componentes de cor R, G e B. Aqui está a aula inteira ColorDescriptor .

using System.Windows.Media;

namespace DatabindingSampleWPF
{
    public class ColorDescriptor : ObservableObject
    {
        public ColorDescriptor(Color color, string name)
        {
            Color = color;
            Name = name;
        }

        public Color Color { get; private set; }

        public string Name { get; private set; }

        public override string ToString()
        {
            return $"{Name} (#{Color.R:X2}{Color.G:X2}{Color.B:X2})";
        }
    }
}

Substitua ColorDescriptor.cs o conteúdo padrão do arquivo pelo código anterior.

2. Crie a página ColorList.xaml

Para exibir a lista de cores, usaremos um novo arquivo XAML. Clique com o botão direito do DatabindingSampleWPF mouse no projeto no Gerenciador de Soluções e selecione Adicionar / Novo Item. Escolha Janela (WPF) na lista de itens disponíveis e digite ColorList como o nome. Selecione Adicionar para criar a página.

Screenshot of Add New Item dialog box.

3. Defina o arquivo XAML de inicialização

Agora, se você iniciar o aplicativo, ele será aberto com MainWindow. Porque você vai trabalhar com o recém-criado ColorList.xaml, seria bom ter essa exibição na inicialização. Para que isso aconteça, abra App.xamle localize o StratupUri atributo do elemento raiz Application .

StartupUri="MainWindow.xaml"

Substitua MainWindow por ColorList, e verifique se a ColorList é mostrada quando você inicia o aplicativo (pressione F5 ou selecione Depurar / Iniciar Depuração).

Screenshot that shows an empty Color List window.

4. Crie o DataContext para a lista de cores

Continuaremos a prática recomendada introduzida anteriormente de criar uma classe separada DataContext para a nova janela XAML. Então, vamos em frente e criar uma nova classe, chamada ColorListDataContext.

Clique com o botão direito do mouse no projeto no Gerenciador de Soluções, selecione Adicionar / Classe e digite ColorListDataContext como o DatabindingSample nome da classe. Selecione Adicionar para criar a classe e cole o seguinte no arquivo:

using System.Collections.ObjectModel;
using System.Collections.Generic;
using System.Windows.Media;

namespace DatabindingSampleWPF
{
    public class ColorListDataContext: ObservableObject
    {
        public List<ColorDescriptor> LotsOfColors { get; private set; }

        public ColorListDataContext()
        {
            LotsOfColors = new List<ColorDescriptor>
            {
               new ColorDescriptor(Colors.Red, "red"),
               new ColorDescriptor(Colors.White, "white"),
               new ColorDescriptor(Colors.Green, "green"),
               new ColorDescriptor(Colors.Yellow, "yellow"),
               new ColorDescriptor(Colors.Blue, "blue"),
               new ColorDescriptor(Colors.Black, "black")
            };
        }
    }
}

A ColorListDataContext aula é muito simples (por enquanto). Tem uma propriedade chamada LotsOfColors, que é um List dos ColorDescriptor objetos. A lista é preenchida com algumas cores no construtor da classe. E já está!

5. Exiba as cores em um ListBox

O próximo passo é exibir as cores em nosso aplicativo. Como antes, precisamos criar uma instância da ColorListDataContext classe em ColorList.xaml, e defini-la como a para toda a DataContext janela. Abra o ColorList.xamle adicione logo após a <Window ...> tag:

<Window.DataContext>
    <local:ColorListDataContext/>
</Window.DataContext>

Você precisa compilar o código neste ponto, para que o designer XAML possa resolver a classe recém-definida ColorListDataContext .

Em seguida, copie a seguinte marcação XAML dentro da <Grid> tag :

<ListBox ItemsSource="{Binding LotsOfColors}" 
         Margin="20" 
         Width="200"
         HorizontalAlignment="Left" 
         VerticalAlignment="Top"/>

A parte interessante aqui é o ItemsSource atributo. Como o nome sugere, ele fornece a origem dos itens exibidos no ListBox. E está simplesmente ligado à ColorListDataContextpropriedade do .LotsOfColors

Se você executar o aplicativo agora, ele mostra as cores em um ListBox! Mas não é muito bom de se olhar. O ListBox parece ter invocado o ToString()ColorDescriptormétodo do s armazenado na LotsOfColors lista.

Screenshot that shows the Color List window with six colors listed.

6. Defina um modelo para os itens

Seria bom ter um modelo que mostra a cor real armazenada na ColorDescriptor.Color propriedade e seu nome. Algo assim:

Screenshot fo template.

Para codificar isso em XAML, podemos colocar um colorido Rectangle e um em um StackPanelTextBlock arquivo .

<StackPanel Orientation="Horizontal">
    <Rectangle Width="80" Height="20">
        <Rectangle.Fill>
            <SolidColorBrush Color="Blue"/>
        </Rectangle.Fill>
    </Rectangle>
    <TextBlock Text="blue" Margin="20, 10, 0, 10"/>
</StackPanel>

Esse é um dos pontos fortes do XAML e da vinculação de dados. Quase todos os visuais complexos são baseados em modelos que você pode redefinir. Para usar o acima StackPanel como um modelo, precisamos colocá-lo dentro de um DataTemplate:

<DataTemplate>
    <!-- template content comes here -->
</DataTemplate>

Como os dados são renderizados em um ListBox (e muitos outros controles) é controlado pelo seu ItemTemplate, que deve ser definido para o DataTemplate acima. Existem várias formas de o fazer. Nesta lição, vamos simplesmente definir o DataTemplate interior do ListBox, com a seguinte sintaxe:

<ListBox ...>
    <ListBox.ItemsSource>
        <DataTemplate ...>
            ...
        </DataTemplate>
    </ListBox.ItemsSource>
</ListBox>

Mais tarde, você verá como um pode ser reutilizado em vários lugares, definindo-o como um DataTemplate recurso.

Agora, a marcação para todo ListBox tem esta aparência (se você não tiver acompanhado, substitua o elemento inteiro <ListBox> pelo seguinte XAML):

<ListBox ItemsSource="{Binding LotsOfColors}" 
         Margin="20" 
         Width="200"
         HorizontalAlignment="Left" 
         VerticalAlignment="Top">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Rectangle Width="80" 
                           Height="20">
                    <Rectangle.Fill>
                        <SolidColorBrush Color="{Binding Color}"/>
                    </Rectangle.Fill>
                </Rectangle>
                <TextBlock Text="{Binding Name}" 
                           Margin="20, 10, 0, 10"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Observe que, como cada item no ListBox corresponde a um ColorDescriptor objeto, você só precisa definir as associações dentro do modelo dentro do contexto dessa classe.

7. Execute o aplicativo

Você deve ver imediatamente a lista de cores no Visual Studio. Apenas para ter certeza, execute o aplicativo agora pressionando F5 ou selecionando Depurar / Iniciar Depuração no menu.

Screenshot that shows the Color List window, with six colors listed next to rectangles representing the color.

Se você iniciar um aplicativo XAML no modo de depuração, poderá aproveitar a edição XAML ao vivo. Você nem precisa parar o aplicativo ou pressionar salvar. Basta alterar o XAML e a maioria das alterações é refletida instantaneamente no aplicativo em execução. Experimente agora. Altere o Width e Height do interior do modelo de dados para 30, transformando assim os retângulos de Rectangle cor em quadrados.

Screenshot that shows the Color List window, with six colors listed next to squares representing the color.

Isso é chamado de XAML Hot Reload e pode ser útil para ajustar o layout e as animações em seu aplicativo.

Resumo

Esta lição percorreu os conceitos básicos de exibição de vários itens em um ListBoxarquivo . Existem outros controlos disponíveis para fins semelhantes, tais como ItemsControl, ListViewe GridView. Mas os princípios básicos são os mesmos: vincular sua lista (IEnumerable, List<>) de objetos à ItemsSource propriedade e definir um DataTemplate para controlar como os itens de lista individuais são exibidos e se comportam. Você também pode redefinir o layout desses itens e até mesmo a aparência dos próprios controles de contêiner (embora isso esteja além do escopo deste módulo).

Observe que o código lógico nunca teve qualquer conhecimento do ListBox controle. Ele acabou de criar uma coleção de objetos de negócios (ColorDescriptor), e o tempo de execução XAML lidou com a renderização do modelo para cada item.

A próxima lição ilustra como você pode selecionar itens de um ou um ListBoxComboBox, e alterar o conteúdo das listas do código para que a adição e remoção de elementos seja refletida na interface do usuário.