Este documento resume uma apresentação sobre layouts, estados de visualização e resoluções de tela em aplicativos Windows Store. A apresentação discute como personalizar layouts usando estilos, alterar estados de visualização com o Visual State Manager e lidar com diferentes resoluções de tela. Também fornece exemplos de como alterar cores e bordas selecionadas em uma ListView.

1. 34ª Reunião Lisboa - 08/12/2012 http://netponto.org
Layout & View States & Scale
Windows 8 Store Apps
Sara Silva

2. Sara Silva
+5 anos de experiência profissional em TI
Windows 8 Developer
Windows Phone Developer
 MCPD: Windows Developer 3.5
 MCTS: WPF 3.5/4.0 e Windows Forms 3.5
 Lic. Matemática: Especialização em Computação - DMUC
Comunidades:

3. Agenda
• Introdução
• Customização do layout
• Os estados de vistas
• Várias resoluções de ecrãs
• Questões

4. Introdução
API fornece-nos um conjunto de controlos:
* Not in XAML built-in controls set, available via 3rd party

5. Introdução
Template de projetos: Grid e Split

6. Customização de layout
• Alteração do estilo por omissão do controlo;
• Novo estilo;
• Atribuir DataTemplate;

7. Customização de layout
O Blend permite obter estilos:

8. Customização de layout
Alterar a cor do item selecionado de uma ListView:

9. Customização de layout
Alteração da “border” do item selecionado da ListView:

10. Customização de layout
Alteração da “border” do item selecionado da ListView (Checked):

11. Customização de layout
Alteração da “border” do item selecionado da ListView (Checked):

12. Customização de layout
Resultado:

13. Customização de layout
Alteração dos estilos definidos por omissão:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<SolidColorBrush x:Key="ListViewItemSelectedBackgroundThemeBrush" Color="Yellow" />
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
<ResourceDictionary Source="Common/StandardStyles.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
Os valores definidos por omissão podem ser consultados em:
C:Program Files (x86)Windows Kits8.0IncludeWinRTXamlDesignthemeresources.xaml

14. Customização de layout
Resultado:
Ao alterar um valor por omissão é preciso ter em conta todos os “resources” relacionado!!

15. Customização do layout

16. Os estados de vistas
Galinho

17. Os estados de vistas
Telerik RadControls Demo

18. Os estados de vistas
Padrões

19. Os estados de vistas
Visual State Manager:
<Grid x:Name="LayoutRoot">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ApplicationViewStates">
<VisualState x:Name="FullScreen" />
<VisualState x:Name="Filled" />
<VisualState x:Name="Snapped" />
<VisualState x:Name="Portrait" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>

20. Estados de vistas

21. Várias resoluções de ecrãs

22. Várias resoluções de ecrãs

23. Várias resoluções de ecrãs

24. Várias resoluções de ecrãs
Store Meteorologia Galinho
Bing Viagens Girl Geek Dinners My Snake Piano

25. Várias resoluções de ecrãs
Testar no simulador:

26. Vários ecrãs usando o simulador

27. Várias resoluções de ecrãs
<Image Source=“Images/logo.png" Width="100” Height="100" />

28. Várias resoluções de ecrãs
Densidade do pixel
Blend

29. Questões?

30. Referências
design.windows.com
dev.windows.com

31. Patrocinador “GOLD”
Twitter: @PTMicrosoft http://www.microsoft.com/portugal

32. Patrocinadores “Silver”

33. Patrocinadores “Bronze”

34. Próximas reuniões presenciais
• 26/01/2013 – Janeiro(Lisboa)
• 23/02/2013 – Fevereiro (Lisboa)
16/03/2013 – Março (Lisboa)
Reserva estes dias na agenda! :)

35. Obrigado!
Sara Silva
geral@saramgsilva.com
http://www.saramgsilva.com
http://twitter.com/saramgsilva
http://pt.linkedin.com/in/saramgsilva
http://www.facebook.com/saramgsilva
http://www.windowsphone.com/pt-PT/store/publishers?publisherId=Sara+Silva