Renderize rapidamente com grades de dados virtualizadas
Introdução
A grade de dados Ultimate UI Controls for Xamarin pode lidar com dados ilimitados — linhas ou colunas — com seu recurso de renderização virtual. Com isso, vem a renderização mais rápida, interações de toque suaves e interações personalizadas de coluna e linha. Nesta lição, você verá o código para configurar uma grade de dados conectada a um serviço OData e experimentará o incrível desempenho da grade no iOS e no Android.
Com algumas linhas de código de exemplo, você pode se conectar a uma fonte de dados disponível publicamente do serviço Northwind. Você pode usar XamDataGrid para associar a uma fonte de dados disponível (neste exemplo, um serviço OData) e exibir os dados em uma grade de dados de alto desempenho.
Objetivos da lição
No final desta lição, você terá uma grade de alto desempenho usando uma fonte de dados OData. As principais etapas que você executará para fazer isso são:
- Configurar o projeto
- Definir a fonte de dados
- Associar a origem à exibição
- Teste a solução
Para obter mais informações sobre o controle usado nesta lição, consulte a página Xamarin Controle de Grade de Dados.
Etapa 1: Configurando o projeto
Você pode baixar o projeto usado nesta lição clicando aqui.
Em seguida, para executar os projetos pela primeira vez após a descompactação, carregue toda a solução no Visual Studio, clique com o botão direito do mouse na Solução e selecione Restaurar Pacotes.
Depois de concluído, adicione uma referência à Biblioteca de Classes Portátil e ao projeto Android para DataSource.DataProviders.OData.Core.dll. Esse arquivo está na pasta OtherDependencies que faz parte do download ZIP. Você pode fazer isso clicando com o botão direito do mouse na pasta Referência no Projeto, navegando até a pasta OtherDependencies e selecionando o DataSource.DataProviders.OData.Core.dll.
Faça isso para ambos os projetos na solução. Em seguida, por fim, verifique se a versão do Android de destino está definida como "Usar compilar usando a versão do SDK". Você pode encontrar essa configuração clicando com o botão direito do mouse no projeto Android e selecionando Propriedades.
Passo 2 Definir a fonte de dados
Agora você vai associar a fonte de dados do serviço Northwind em GridRemoteDataViewModel. No projeto XFPerfSamples, expanda ViewModels e abra o arquivo de origem GridRemoteDataViewModel.cs.
O projeto de exemplo já criou GridRemoteDataViewModel e definiu a fonte de dados como sendo OData. Na origem, adicione o segmento de código a seguir para definir a fonte de dados.
BaseUri="http://services.odata.org/V4/Northwind/Northwind.svc", EntitySet="Orders", PageSizeRequested=25, MaxCachedPages=5O BaseUri define o servidor Northwind como a origem OData. No serviço Northwind, o EntitySet define quais dados são extraídos do serviço. O PageSizeRequested é o número de itens por página que é retornado sempre que uma página é solicitada. O MaxCachedPages é quantas páginas são armazenadas em cache após serem solicitadas.
Depois de definir a fonte de dados, a próxima etapa é associar essa fonte à exibição.
Passo 3 Associar a fonte de dados
Depois de definir a origem, você precisa vincular a fonte à exibição. No projeto do Visual Studio, expanda Exibições e abra o arquivo GridRemoteData.xaml. O requer o namespace para a grade de dados Infragistics. Você pode usar o Infragistics Toolbox, que automatizaria o desenvolvimento do código necessário. Para o propósito desta lição, escreveremos o código manualmente.
<igDataGrid:XamDataGrid x:Name="grid1" ItemSource="{Binding DataSource}" AutoGenerateColumns="False"> <igDataGrid:XamDataGrid.Columns> <igDataGrid:TextColumn PropertyPath="OrderID" HeaderText="Order ID"/> <igDataGrid:TextColumn PropertyPath="CustomerID" HeaderText="Customer ID"/> <igDataGrid:TextColumn PropertyPath="ShipName" HeaderText="Ship Name" /> <igDataGrid:TextColumn PropertyPath="ShipCity" HeaderText="Ship City" /> </igDataGrid:XamDataGrid.Columns> </igDataGrid:XamDataGrid>Neste exemplo, definimos a propriedade AutoGenerateColumns como false. Definir a propriedade como True inspecionaria a fonte de dados e, em seguida, criaria as colunas necessárias. Isso pode apresentar alguns problemas para aplicativos móveis, dependendo do conjunto de dados que está sendo usado. O segmento de código acima especifica as colunas manualmente como TextColumns.
Passo 4 Teste a solução
Com a fonte de dados e a associação configuradas, agora você pode testar a solução em um emulador ou dispositivo de hardware físico. Para esta lesão, testaremos usando um emulador Android 6.0. Isso compilará o aplicativo, criará o APK e implantará o pacote no emulador ou dispositivo. O depurador será iniciado em segundo plano no Visual Studio e você poderá interagir com o aplicativo. No aplicativo, clique em Grade – Dados remotos.
Dependendo do dispositivo ou emulador, o Grid ficará em branco inicialmente enquanto carrega os dados de origem. Os dados serão preenchidos na grade depois que ela for carregada e à medida que você rolar. Teste a grade rolando com o mouse ou o dedo para carregar várias páginas. Se os dados não tiverem sido originados para carregamento, uma célula temporária será exibida na interface enquanto os dados são carregados.
Conclusão
O XamDataGrid é usado com uma variedade de tipos de fonte de dados Xamarin aplicativos móveis. Isso permite que você crie uma grade de dados de alto desempenho usando a fonte de dados de sua escolha, resultando em uma experiência perfeita para o usuário final.