Criando lindas exibições de arquivos locais

Blog do desenvolvedor de aplicativos do Windows 8

Ideias sobre a criação de aplicativos com o estilo Metro para o Windows 8, da equipe de engenharia do Windows 8

Criando lindas exibições de arquivos locais

  • Comments 0

Uma parte do design estilo Metro é criar exibições limpas que permitam que o conteúdo brilhe e ajude os usuários a realizar suas tarefas. Exploramos principalmente o modo como você pode criar lindas galerias com conteúdo de arquivos e pastas de usuários no sistema de arquivos local. A capacidade de exibir conteúdo local é um requisito importante para muitos aplicativos de galeria que permitem que usuários naveguem e consumam o conteúdo – fotos, vídeos, músicas ou documentos. O Windows 8 fornece ferramentas para fazer isso de forma simples, eficiente e personalizada.

Para mostrar isso, eu vou usar o exemplo do aplicativo PhotoJournal, um diário de fotos conectado no qual os usuários podem ver e gerenciar fotos e vídeos usando uma exibição de linha do tempo. Veja a página inicial do aplicativo na próxima figura. Um exemplo típico de uma exibição que esse aplicativo cria no sistema de arquivos é uma exibição de linha do tempo, que mostra as fotos recentemente publicadas no aplicativo e armazenadas na pasta de dados local desse aplicativo. O outro é uma exibição de resultados da pesquisa, permitindo que o usuário encontre fotos específicas. Nessa publicação, eu passarei por duas etapas do aplicativo para criar essas exibições:

  1. Obter dados relevantes com base no contexto atual (por exemplo, uma consulta de pesquisa do usuário usando o botão Pesquisar)
  2. Usar o controle incorporado StorageDataSource para associar esses dados a uma formatação predefinida que esteja ajustada ao conteúdo e fácil para o consumo do usuário

O aplicativo PhotoJournal utiliza exibições de galeria de imagens para que os usuários possam compartilhar fotos e respectivos comentários
Figura 1: O aplicativo PhotoJournal 

Obtendo os dados

Criando uma consulta de arquivo com as opções certas

A primeira etapa na criação da exibição é preparar a fonte de dados. A melhor maneira de criar uma exibição baseada no sistema de arquivos é construir uma consulta de arquivo que retorne os arquivos que deseja. As consultas de arquivo são uma maneira rápida, fácil e personalizável de acessar dados locais e com a garantia de sempre serem atualizadas com o estado mais recente do sistema de arquivos.

Definindo o conjunto de dados

Como você pode ver nesse gráfico, os usuários podem ter muitos dados, especialmente imagens digitais que são acumuladas ao longo do tempo devido à ampla disponibilidade de câmeras digitais e telefones com câmera. Por causa desse volume de dados, é necessário criar exibições que estejam de acordo com uma ampla variedade de cenários – desde um usuário médio que tem alguns milhares de fotos até um amante de mídia com dezenas de milhares. Isso significa tirar vantagem de filtros e elementos dinâmicos para manter cada exibição no tamanho que possa ser gerenciada. Eu recomendo que você não padronize a exibição da galeria para uma lista simples de conteúdo de todos os usuários, em vez disso, reserve um tempo para pensar sobre como poderia ser a sua consulta. Ela poderia ser tão simples quanto seguir a hierarquia de pastas do sistema de arquivos para segmentar a coleção em conjuntos menores.

os usuários mantêm vários dados; o usuário médio tem algumas dezenas de milhares de arquivos de mídia no computador, a grande maioria de imagens, e os principais 10% de usuários possuem quase mais de 70.000 arquivos de mídia
  Figura 2: Por total de arquivos de usuário de acordo com o tipo de conteúdo 

No momento de decidir sobre como deve ser a consulta, pense no que o aplicativo pode fazer de melhor e em como aplicar isso ao cenário que você quer possibilitar: o que torna um item específico importante para o usuário no contexto do aplicativo? O PhotoJournal é excelente na exibição dinâmica de fotos e no uso de dados adicionais sobre elas, por isso, a data em que a foto foi tirada e o contexto no qual está inserida (por exemplo, local) são elementos dinâmicos úteis para a base do usuário – como filtros ou como um meio de organizar itens ou etiquetas.

Aqui estão alguns exemplos de exibição que você pode usar em um aplicativo de estilo galeria. Você pode criar tudo isso usando APIs fornecidas pelo Windows 8.

  • Exibições hierárquicas de arquivos e pastas
  • Exibições agregadas com base em metadados
    • Essas exibições reorganizam arquivos em grupos com base em metadados
    • São excelentes para a visualização de mídia de forma que seja coerente para o usuário: por álbum, por artista, por marcação etc.
  • Exibições filtradas simples
    • Essas exibições apresentam uma lista de arquivos, separando da hierarquia de pastas
    • São excelentes para a exibição de conjuntos filtrados de itens que o usuário pode analisar fácil e rapidamente – por exemplo, mostrando uma exibição de pesquisa filtrada por palavra-chave
    • Para criar essas exibições, use uma consulta profunda que retorne arquivos

Implementando a consulta

Você pode implementar todos os exemplos que acabamos de ver usando o Advanced Query Syntax (AQS), uma linguagem que é aceita pela caixa de pesquisa do Explorador de Arquivos e do recurso de pesquisa de Arquivos. O AQS é uma ferramenta avançada que você pode usar para restringir resultados com base em metadados e conteúdo. Com essa ferramenta é possível recuperar somente os dados necessários e ordená-los da forma desejada com as APIs de consulta. O AQS oferece a capacidade do índice de sistema, assim, você pode obter resultados e mostrar suas exibições de forma muito mais rápida do que se filtrasse manualmente o conjunto de arquivos.

No nosso caso, o PhotoJournal enfoca fotos recentes e usa o AQS para mostrar na página inicial somente imagens que foram tiradas há menos de um mês. Usar uma lista simples classificada por data é o que o aplicativo necessita para dar a impressão de uma linha do tempo.

JS

// Create a new file query from the pictures library and apply the AQS filter
var picturesLibrary = Windows.Storage.KnownFolders.picturesLibrary;
var options = new Windows.Storage.Search.QueryOptions(Windows.Storage.Search.CommonFileQuery.orderByDate, [".jpg", ".png"]);
// Use the app search filter to enforce business logic
options.applicationSearchFilter = "System.Photo.DateTaken:> System.StructuredQueryType.DateTime#LastMonth";
var fileQuery = picturesLibrary.createFileQueryWithOptions(options);

C#

// Create a new file query from the pictures library and apply the AQS filter
var fileTypeFilter = new string[] { ".jpg", ".png" };
var options = new Windows.Storage.Search.QueryOptions(Windows.Storage.Search.CommonFileQuery.OrderByDate, fileTypeFilter);
// Use the appl search filter to enforce business logic
options.ApplicationSearchFilter = "System.Photo.DateTaken:> System.StructuredQueryType.DateTime#LastMonth";
var fileQuery = Windows.Storage.KnownFolders.PicturesLibrary.CreateFileQueryWithOptions(options);

Por outro lado, na exibição de resultados de pesquisa, o que importa é o que o usuário quer encontrar, por isso, em vez de usar o mesmo filtro de dados como a exibição da linha do tempo, o aplicativo utiliza a sequência da consulta do usuário para filtrar a consulta por palavra-chave e mostra apenas os dados pertinentes. Veja como fazer isso:

JS

// Create a new file query from the pictures library and apply the AQS filter
var picturesLibrary = Windows.Storage.KnownFolders.picturesLibrary;
var options = new Windows.Storage.Search.QueryOptions(Windows.Storage.Search.CommonFileQuery.orderByDate, ["*"]);
// Use the text provided in the search box as the user search filter
options.userSearchFilter = queryText;
var fileQuery = picturesLibrary.createFileQueryWithOptions(options);

C#

// Create a new file query from the pictures library and apply the AQS filter
var fileTypeFilter = new string[] { "*" };
var options = new Windows.Storage.Search.QueryOptions(Windows.Storage.Search.CommonFileQuery.OrderByDate, fileTypeFilter);
// Use the application search filter to enforce business logic
options.UserSearchFilter = queryText;
var fileQuery = Windows.Storage.KnownFolders.PicturesLibrary.CreateFileQueryWithOptions(options);

Criando uma fonte de dados adequada para exibição

Depois de configurar a consulta, bastam algumas linhas de código para torná-la pronta para exibição no controle ListView. O StorageDataSource é a forma mais simples de fazer isso. Para a criação de um StorageDataSource, você deve fornecer algumas informações adicionais com base no que deseja para a sua exibição.

Escolhendo o modo de miniatura correto

Quando se trata de criar a fonte de dados, é necessário decidir sobre o tipo de miniatura desejado. O Tempo de Execução do Windows permite que você escolha dentre vários modos de miniatura, dependendo do que desejar fazer com a miniatura. O modo miniatura ajusta alguns parâmetros como o recorte. O PhotoJournal é uma galeria de imagens que especifica o modo picturesView no construtor de StorageDataSource, que faz com que todas as miniaturas retornem cortadas na mesma taxa de proporção de 0,7 – usando a proporção áurea de uma exibição harmoniosa. O picturesView é a forma canônica de exibição de fotos em aplicativo estilo Metro.

Selecionando um tamanho de miniatura

O tamanho da miniatura indica o tamanho pretendido da miniatura. O sistema reúne miniaturas em tamanhos predefinidos que são usados em todo o sistema: ao usar um desses tamanhos, você ajudará o aplicativo a adotar uma aparência estilo Metro e evitará o custo de desempenho de redimensionar uma imagem. Veja uma lista de modos de miniatura e tamanhos disponíveis que recomendamos para cada uma delas:

Modo de miniatura

Tamanho de solicitação recomendado

Valor de retorno

PicturesView / VideosView

190

Uma miniatura cortada com taxa de proporção fixa em tamanho de 190 x 130 (quando possível). O sistema utiliza esse tamanho de miniatura, o que melhora o desempenho.

A miniatura é cortada em taxa de proporção de 0,7 

MusicView

256

Uma miniatura quadrada no tamanho de 256 x 256 (quando possível). O sistema utiliza esse tamanho de miniatura, o que melhora o desempenho.

A capa do álbum é cortado em uma miniatura quadrada 

DocumentsView/ ListView

40

Uma miniatura quadrada com taxa de proporção fixa em tamanho de 40 x 40 (quando possível).

O ícone é o de associação de arquivo registrado no sistema, exibido em uma placa quadrada colorida 

SingleItem

16, 32, 48, 96, 256, 1024

Uma miniatura do arquivo na taxa de proporção original, em que o tamanho solicitado é o da borda maior. Estão disponíveis seis tamanhos diferentes em cache para obtenção do desempenho ideal.

Tabela 1: Tamanhos de miniatura recomendados

Você pode facilmente assegurar que as miniaturas usadas com a fonte de dados funcionem independentemente do fator de escala atual, passando a opção Windows.Storage.FileProperties.ThumbnailOptions.useCurrentScale para o construtor da fonte de dados. Portanto, basta solicitar o tamanho que corresponda ao layout do aplicativo no fator de escala de 100%. A especificação do tamanho zero indica que você não pretende usar miniaturas na exibição e, por isso, elas não são recuperadas.

Criando a fonte de dados

Agora que eu sei como a minha coleção deve ficar, posso seguir em frente e criar o objeto de fonte de dados que o controle ListView possa usar para exibir minha galeria.

JS

// Set data source options
var dataSourceOptions = {
// Options to retrieve thumbnails
mode: Windows.Storage.FileProperties.ThumbnailMode.picturesView,
requestedThumbnailSize: 190, // 0 means that thumbnails should not be retrieved
thumbnailOptions: Windows.Storage.FileProperties.ThumbnailOptions.useCurrentScale
};

// Create the data source
var dataSource = new WinJS.UI.StorageDataSource(fileQuery, dataSourceOptions);

Esperamos que muitos aplicativos utilizem configurações de StorageDataSource semelhantes, refletindo padrões comuns que funcionem bem com cada tipo de conteúdo, como imagens. Assim, para facilitar a sua vida, fornecemos predefinições que configuram o StorageDataSource com essas configurações ideais, tudo em uma linha de código. No caso do PhotoJournal, é possível obter os mesmos resultados que o código que acabamos de ver com muito menos códigos, usando a configuração padrão para imagens.

// Shorthand datasource (similar shorthand constructors are available for Videos,
// Music and Documents)
var dataSource = new WinJS.UI.StorageDataSource("Pictures");

C#

Em C#, a semântica da criação de uma fonte de dados é um pouco diferente, em vez de criar um StorageDataSource, você usará a classe FileInformationFactory. O próximo código mostra como você pode usar esse objeto para obter um vetor de arquivos virtualizados, que é o construtor que pode ser usado com um controle GridView.

var fileInformationFactory = new FileInformationFactory(
fileQuery,
Windows.Storage.FileProperties.ThumbnailMode.PicturesView,
size,
Windows.Storage.FileProperties.ThumbnailOptions.UseCurrentScale,
true);

Fontes de dados personalizados

O controle StorageDataSource e o FileInformationFactory funcionam muito bem se o aplicativo precisa apenas de elementos dinâmicos de organização comuns que estão incorporados ao sistema de arquivos. Se você precisar aplicar a lógica de negócios aos dados que estão sendo exibidos, poderá criar sua própria fonte de dados no sistema de arquivos.

Os exemplos de casos em que o aplicativo precisa implementar a própria fonte de dados servem no caso de você agregar dados em várias fontes, por exemplo, a nuvem, um banco de dados personalizado e o sistema de arquivos. Além disso, se for preciso filtrar, classificar ou agrupar itens baseado na lógica de negócios específica do aplicativo (por exemplo, com base na data em que a foto foi publicada no PhotoJournal), também será preciso ter a fonte dados própria. Você ainda pode usar as APIs de modelo de dados para consultar os dados, mas precisa adicionar sua própria camada de filtragem e gerenciar o modo como os dados são virtualizados e retornados para o controle ListView, o que requer um pouco mais de trabalho.

Formatando os dados

Ao mesmo tempo que obter apenas o conteúdo pertinente na exibição é um pré-requisito para evitar sobrecarregar o usuário, criar uma apresentação bonita e elegante dos dados é o que fará o aplicativo brilhar e ser diferenciado. Como sempre, o modo exato como você apresenta os dados depende da finalidade do aplicativo e o tipo de conteúdo que deseja exibir.

Criando uma galeria de fotos

O PhotoJournal trata de fotos e segue as principais diretrizes informadas pelos princípios Metro: colocar o conteúdo primeiro, minimizar distrações e oferecer uma experiência rápida e fluida. Você pode ver essas diretrizes em ação no Seletor de arquivos:

  • Em uma exibição voltada para fotos, o que importa é a miniatura da imagem
  • Os usuários podem geralmente identificar uma foto em uma rápida olhada - muitas vezes nem é preciso mostrar um nome de arquivo. Na verdade, o fato de não mostrar isso pode reduzir distrações e confusões
  • Use o modo de miniatura PicturesView para obter miniaturas com taxa de proporção condizente com uma exibição limpa e harmoniosa
  • Use espaços reservados simples para fornecer resposta visual enquanto as imagens são carregadas na exibição – isso faz com que o aplicativo pareça mais rápido
  • Mostre apenas o que for útil ao usuário (por exemplo, propriedades que correspondam à consulta de pesquisa do usuário na exibição de resultados da pesquisa)
  • Forneça informações adicionais em um menu suspenso que o usuário possa acessar por meio de um gesto de pressionar e segurar

Veja a aparência da exibição de pesquisa do PhotoJournal quando implementamos esses princípios.

A exibição de pesquisa do PhotoJournal utiliza imagens principalmente para ajudar os usuários a identificar o conteúdo, mas também destaca propriedades correspondentes à consulta de pesquisa do usuário para mostram por que o resultado de cada imagem foi retornado  Figura 3: Ênfase nas imagens, destacando propriedades correspondentes à consulta de pesquisa do usuário

Criando além de fotos

Outros tipos de conteúdo seguem regras diferentes. Por exemplo, em uma exibição de música o importante para identificar rapidamente um item é o nome da música, o título do álbum ou o nome do artista, mas também é valioso mostrar a capa do álbum para navegação rápida. Por outro lado, os documentos geralmente não enriquecem a representação gráfica porque são apenas texto. Nesse caso, use um modelo de item que dê mais importância aos detalhes de texto e item.

Se a exibição seguir um modelo hierárquico em que os arquivos e pastas são mostrados juntos, certifique-se de diferenciar visualmente os dois tipos de item. Para esse fim, você pode seguir os padrões definidos pelo seletor de arquivos do Windows. O usuário vê esses padrões em todo o sistema, com os quais ele vai se familiarizando e reconhecendo. O uso desses padrões ajuda o aplicativo a integrar-se totalmente ao Windows 8.

Miniatura do seletor de arquivos
Figura 4: Usando sobreposições no Seletor de arquivos para diferenciar pastas

Quando você decidir como deseja mostrar a exibição, poderá realmente partir para a exibição propriamente dita.

Mostrando a exibição

Um conceito importante ao mostrar a exibição é a noção de modelo de item. Ao criar uma exibição, todos os itens exibidos são formatados em um modelo comum, que é preenchido com as informações do item (miniatura, nome, data etc.)

No JavaScript

No JavaScript, com o controle ListView, a melhor maneira de definir o estilo dos modelos é usar CSS baseado em classes de ListView.

.imageGallery .win-container
{
margin-right: 10px;
margin-bottom: 10px;
}

.imageGallery .win-item
{
width: 190px;
height: 130px;
overflow: hidden;
background-color: #333333;
}

.imageGallery .win-item img {
width: 190px;
height: 130px;
overflow: hidden;
}

A abordagem mais comum de renderizar itens na exibição é compor um método de modelo de item que o controle ListView chame para criar cada item na exibição. Esse método é chamado uma vez para cada item, sempre que o item precisar ser mostrado na tela. Isso se chama renderização programática. Você cria, para cada item, elementos DOM de forma programática na hora.

O gerenciamento da qualidade da miniatura pode ser complexo. Na primeira vez que o usuário visualizar uma foto no sistema, o Windows retornará uma miniatura rápida de baixa resolução para melhorar a capacidade de resposta e, em seguida, acompanhará com uma miniatura de alta resolução. Se você não deseja lidar com essa complexidade e deixou que o sistema tratasse esses eventos, poderá usar a função de ajuda LoadThumbnail do controle StorageDataSource, que abstrai os detalhes e assegura de maneira simples que a miniatura solicitada seja inserida no elemento de imagem fornecido. A renderização de itens passa a ficar tão simples como algumas linhas de código:

function storageRenderer(itemPromise, element) {
var img, itemStatus;
if (element === null) {
// dom is not recycled, so create inital structure
element = document.createElement("div");
element.className = "FileTemplate";
element.appendChild(document.createElement("img"));
}
img = element.querySelector("img");
img.style.opacity = 0;

return {
// returns the placeholder
element: element,
// and a promise that will complete when the item is fully rendered
renderComplete: itemPromise.then(function (item) {
// now do cheap work (none here, so we return item ready)
return item.ready;
}).then(function (item) {
// wait until item.ready before doing expensive work
return WinJS.UI.StorageDataSource.loadThumbnail(item, img).then(function (image) {
// perform any operation that requires the thumbnail to be available
});
})
};
}

Quando os estilos e o renderizador estiverem prontos, tudo o que você precisará fazer é inicializar o controle ListView, e seu aplicativo de galeria estará totalmente definido:

var container = document.getElementById("listviewDiv");
var listViewOptions = {
itemDataSource: dataSource,
itemTemplate: storageRenderer,
layout: new WinJS.UI.GridLayout(),
selectionMode: "single"
};

var listViewControl = new WinJS.UI.ListView(container, listViewOptions);

Observação: uma outra abordagem semelhante ao exemplo de XAML que vamos examinar no momento está disponível para desenvolvedores de JavaScript através de renderização declarativa com marcação HTML – você pode conferir a amostra de StorageDataSource para obter um exemplo. A renderização declarativa é uma abordagem mais fácil, mas a renderização programática proporciona mais flexibilidade.

No XAML

No XAML, você usa uma abordagem um pouco diferente do método JavaScript descrito anteriormente. Essa abordagem consiste em compor algumas marcações XAML que representem o modelo que você deseja usar e associar esse modelo ao controle GridView ou ListView. Isso se chama renderização declarativa. Nesse caso, o próprio ListView trata de gerar os elementos para todos os itens da exibição e usa as associações para preenchê-los com os dados corretos. Você pode associar qualquer propriedade exposta pelo objeto FileInformation ao controle.

Marcação de modelo XAML

<UserControl.Resources>
<local:ThumbnailConverter x:Key="thumbnailConverter"/>
<DataTemplate x:Key="Custom190x130ItemTemplate">
<Grid Width="190" Height="130">
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="190" Height="130">
<Image Source="{Binding Path=Thumbnail, Converter={StaticResource thumbnailConverter}}" Width="190" Height="130"/>
</Border>
</Grid>
</DataTemplate>

<!-- Collection of items displayed by this page -->
<CollectionViewSource
x:Name="itemsViewSource"/>
</UserControl.Resources>

<!-- Horizontal scrolling grid -->
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Items"
Grid.Row="1"
Margin="0,-4,0,0"
Padding="116,0,40,46"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
ItemTemplate="{StaticResource Custom190x130ItemTemplate}"
SelectionMode="None"/>

Se for necessário processar uma propriedade antes da associação (por exemplo, o fluxo de miniatura, que não pode ser associado diretamente a um objeto de Imagem e precisa ser decodificado primeiro), você poderá declarar conversores de valor para realizar esse processamento.

Conversor de valor de C#

internal class ThumbnailConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string culture)
{
if (value != null)
{
var thumbnailStream = (IRandomAccessStream)value;
var image = new BitmapImage();
image.SetSource(thumbnailStream);

return image;
}

return DependencyProperty.UnsetValue;
}

public object ConvertBack(object value, Type targetType, object parameter, string culture)
{
throw new NotImplementedException();
}
}

Em seguida, você pode configurar GridView com o VirtualizedItemsVector obtido do objeto FileInformationFactory.

itemsViewSource.Source = fileInformationFactory.GetVirtualizedFilesVector();

Além da exibição inicial

Agora você está pronto para continuar e criar exibições incríveis do sistema de arquivos – mas há mais coisas além de apenas criar uma exibição. Um aplicativo é excelente quando responde às necessidades do usuário e ajusta a tela de acordo com o que o usuário está tentando fazer. Por exemplo, oferecer opções para dinamizar dados ou usar zoom semântico são duas formar de aprimorar a experiência do usuário, compondo alguns códigos adicionais.

Dinamizando dados

No exemplo do aplicativo PhotoJournal, eu poderia decidir por adicionar elementos dinâmicos referentes ao modelo de câmera e data. Esses elementos dinâmicos permitem restringir a gama de consultas de arquivo usando o AQS e para sempre mostrar ao usuário um número gerenciável de fotos. Toda vez que o elemento dinâmico muda, basta executar uma nova consulta e trocar as fontes de dados no controle ListView, em seguida, descartar a consulta e a fonte de dados antigas para evitar o aumento demasiado de consumo de recurso do aplicativo. Esses elementos dinâmicos podem ser facilmente adicionados à exibição de pesquisa mostrada anteriormente. Este é o resultado:

Adicione elementos dinâmicos, por exemplo, guias ou menus suspensos com várias opções de filtro, na parte superior da exibição de pesquisa para ajudar os usuários a filtrar o conteúdo Figura 5: Adicione elementos dinâmicos à exibição para ajudar os usuários a filtrar o conteúdo

Zoom semântico

Zoom semântico é uma outra ótima forma de fazer o aplicativo brilhar com um pouco mais de códigos. Se os elementos dinâmicos não funcionarem bem no aplicativo ou as exibições dinâmicas ainda contiverem grandes quantidades de itens, o zoom semântico permitirá mostrar uma exibição agregada do conteúdo que o usuário pode avaliar rapidamente.

Use zoom semântico como uma forma de apresentar dados agregados de alto nível em um formato que use o tema do aplicativo – por exemplo, no PhotoJournal, uma linha do tempo indicando o total de fotos publicados todos os dias como um gráfico de barrasFigura 6: Zoom semântico

Resumo

Nesta postagem, você observou como usar o StorageDataSource e VirtualizedItemsVector com controles do JavaScript ou XAML para criar exibições ricas do sistema de arquivos do seu aplicativo de galeria. Algumas coisas que devem ser lembradas:

  • Escolha cuidadosamente os dados que serão mostrados na exibição e consulte devidamente o sistema de arquivos
  • Considere o tipo de conteúdo e o alinhamento com outras experiências no Windows ao definir o estilo da exibição
  • Use a flexibilidade do pipeline de renderização para expressar sua lógica de negócios ao desenhar itens
  • Faça um esforço a mais com elementos dinâmicos e zoom semântico

Agora você está pronto para criar um excelente aplicativo de galeria!

--Marc Wautier, gerente de programas, experiência do usuário do Windows

 

Recursos

Link

Tipo

Destaques

Início rápido: adicionando um ListView

Início rápido para o desenvolvedor

Explica como criar um ListView genérico

Amostra de StorageDataSource e GetVirtualizedFilesVector

Amostra de código

Demonstra o uso do StorageDataSource e GetVirtualizedFilesVector para criar uma exibição com base em arquivos locais

Modelos de item para layouts de grade

Trechos de código

Fornece amostra de modelos de item para ListView

StorageDataSource e FileInformationFactory

Referência à API

Referência à API de StorageDataSource e FileInformationFactory

  • Loading...
Leave a Comment
  • Please add 5 and 5 and type the answer here:
  • Post