Já comentamos anteriormente que o Windows 10 introduziu a Plataforma Universal do Windows (UWP), que unificou o núcleo do Windows permitindo que o mesmo aplicativo seja executado em uma ampla variedade de dispositivos como Windows Phone, Desktops, Surface Hub, HoloLens, Xbox, IoT devices e outros dispositivos Windows.
Do ponto de vista do desenvolvedor, ao criar um aplicativo UWP, você está criando um aplicativo que tem o potencial de ser executado em qualquer dispositivo Windows. Imagine isso alinhado com a estratégia da Microsoft que planeja ter 1 bilhão de dispositivos rodando Windows 10 nos próximos anos.
Do ponto de vista do usuário, o UWP permite a mesma experiência pessoal independente do dispositivo utilizado.
Criar um aplicativo que pareça ser bom em todos os dispositivos pode ser um grande desafio. Precisamos levar em consideração alguns conceitos sobre a adaptação das interfaces, permitindo assim que o aplicativo ofereça a melhor usabilidade independentemente do tamanho de tela ou forma de interação.
Muitos desses conceitos já foram abordados aqui quando falamos sobre o Adaptive UI em Aplicativos Universais. Na maioria dos casos, essas dicas funcionam bem mas o que podemos fazer se precisarmos trabalhar com layouts específicos de acordo com cada família de dispositivos?
É isso o que veremos nesse post. Como criar telas customizadas para mobile, desktop etc. dentro do mesmo aplicativo.
O conceito é muito simples. É algo que o desenvolvedor Android está acostumado ao criar pastas separadas por resolução para organizar os arquivos de layout. No nosso caso, vamos precisar criar pastas seguindo a nomeclatura DeviceFamily-[family] onde family pode ser Desktop, Mobile, IoT etc.
Para ver isso em ação, crie usando o Visual Studio um projeto Blank App Universal Windows.
Com o projeto aberto, crie 3 pastas clicando com o botão direito em cima do projeto -> Add -> New Folder. As pastas obrigatoriamente devem ter os nomes DeviceFamily-Desktop, DeviceFamily-IoT e DeviceFamily-Mobile.
O próximo passo é criar arquivos XAML em cada uma das pastas recém criadas. Para isso, clique com o botão direito em cima da pasta desejada -> Add -> New Item...
Ao ser perguntado sobre o tipo do novo item, selecione o XAML View. O importante é manter o mesmo nome dos arquivos. No nosso caso, iremos customizar o layout do MainPage, portanto todos os arquivos criados devem ter o nome: MainPage.xaml.
Ao final, você deverá ter a seguinte estrutura:
Agora chegou a hora de customizar o XAML da forma que desejar. Para efeito de demonstração, iremos alterar a cor de fundo do Grid além de adicionar um TextBlock. Dessa forma teremos:
DeviceFamily-Desktop
<Page x:Class="talkitbr.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:talkitbr" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
<Grid Background="Red">
<TextBlock Text="Olá Desktop!" FontSize="30" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</Page>
DeviceFamily-IoT
<Page x:Class="talkitbr.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:talkitbr" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
<Grid Background="Blue">
<TextBlock Text="Olá Raspberry Pi!" FontSize="30" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</Page>
DeviceFamily-Mobile
<Page x:Class="talkitbr.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:talkitbr" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
<Grid Background="Green">
<TextBlock Text="Olá Mobile!" FontSize="30" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</Page>
Ao rodar esse aplicativo, o resultado esperado são telas com aparências especificas para cada uma das famílias de dispositivos:
Observação: Da mesma forma que usamos a criação de pastas para organizar os arquivos de layout por família de dispositivos, existe também a possibilidade de alterar o nome do arquivo de layout, por exemplo, MainPage.DeviceFamily-Mobile.xaml.
Você já estava familiarizado com esse recurso? Deixe aqui o seu comentário e continue nos seguindo no talkitbr. Até a próxima!
Fonte/Imagens: Microsoft
talkitbr 
Então para atender as diferentes famílias de devices suportado pelo Windows 10, deve ser feito sempre arquivos XAML para cada tipo de device. Não existe algo como CSS quando se usa XAML?
CurtirCurtir
O uso de XAML segregado por famílias de devices só deve ser usado em casos onde o seu requisito pede layout de telas que são muito diferentes em cada dispositivo. Em todos os outros casos devemos construir interfaces que se adaptam ao espaço disponível na tela. Para isso possuímos recursos que nos permitem redimensionar os itens na tela, refazer os fluxos do conteúdo, reposicionar os elementos da tela etc. O uso de visual state triggers é muito importante para isso e falaremos mais dele nos próximos posts.
CurtirCurtir