Case studies about layout view states scale

2.234 visualizações

Publicada em

  • Seja o primeiro a comentar

Case studies about layout view states scale

  1. 1. Layout & View States & Scale Windows 8 Store Apps Sara Silva http://netponto.org34ª Reunião Lisboa - 08/12/2012
  2. 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. 3. Agenda • Introdução • Customização do layout • Os estados de vistas • Várias resoluções de ecrãs • Questões
  4. 4. Introdução API fornece-nos um conjunto de controlos: * Not in XAML built-in controls set, available via 3rd party
  5. 5. Introdução Template de projetos: Grid e Split
  6. 6. Customização de layout • Alteração do estilo por omissão do controlo; • Novo estilo; • Atribuir DataTemplate;
  7. 7. Customização de layout O Blend permite obter estilos:
  8. 8. Customização de layout Alterar a cor do item selecionado de uma ListView:
  9. 9. Customização de layout Alteração da “border” do item selecionado da ListView:
  10. 10. Customização de layout Alteração da “border” do item selecionado da ListView (Checked):
  11. 11. Customização de layout Alteração da “border” do item selecionado da ListView (Checked):
  12. 12. Customização de layout Resultado:
  13. 13. Customização de layout Alteração dos estilos definidos por omissão: C:Program Files (x86)Windows Kits8.0IncludeWinRTXamlDesignthemeresources.xaml Os valores definidos por omissão podem ser consultados em: <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>
  14. 14. Customização de layout Resultado: Ao alterar um valor por omissão é preciso ter em conta todos os “resources” relacionado!!
  15. 15. Customização do layout
  16. 16. Os estados de vistas Galinho
  17. 17. Os estados de vistas Telerik RadControls Demo
  18. 18. Os estados de vistas Padrões
  19. 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. 20. Estados de vistas
  21. 21. Várias resoluções de ecrãs
  22. 22. Várias resoluções de ecrãs
  23. 23. Várias resoluções de ecrãs
  24. 24. Várias resoluções de ecrãs PianoMy Snake GalinhoMeteorologiaStore Bing Viagens Girl Geek Dinners
  25. 25. Várias resoluções de ecrãs Testar no simulador:
  26. 26. Vários ecrãs usando o simulador
  27. 27. Várias resoluções de ecrãs <Image Source=“Images/logo.png" Width="100” Height="100" />
  28. 28. Várias resoluções de ecrãs Densidade do pixel Blend
  29. 29. Questões?
  30. 30. Referências design.windows.com dev.windows.com
  31. 31. Patrocinador “GOLD” Twitter: @PTMicrosoft http://www.microsoft.com/portugal
  32. 32. Patrocinadores “Silver”
  33. 33. Patrocinadores “Bronze”
  34. 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. 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

×