34ª Reunião Lisboa - 08/12/2012    http://netponto.org                    Layout & View States & Scale                    ...
Sara Silva+5 anos de experiência profissional em TIWindows 8 DeveloperWindows Phone Developer MCPD: Windows Developer 3.5...
Agenda•   Introdução•   Customização do layout•   Os estados de vistas•   Várias resoluções de ecrãs•   Questões
IntroduçãoAPI fornece-nos um conjunto de controlos:* Not in XAML built-in controls set, available via 3rd party
IntroduçãoTemplate de projetos: Grid e Split
Customização de layout• Alteração do estilo por omissão do controlo;• Novo estilo;• Atribuir DataTemplate;
Customização de layoutO Blend permite obter estilos:
Customização de layoutAlterar a cor do item selecionado de uma ListView:
Customização de layoutAlteração da “border” do item selecionado da ListView:
Customização de layoutAlteração da “border” do item selecionado da ListView (Checked):
Customização de layoutAlteração da “border” do item selecionado da ListView (Checked):
Customização de layoutResultado:
Customização de layoutAlteração dos estilos definidos por omissão:    <Application.Resources>       <ResourceDictionary>  ...
Customização de layoutResultado:    Ao alterar um valor por omissão é preciso ter em conta todos os “resources” relacionad...
Customização do layout
Os estados de vistasGalinho
Os estados de vistasTelerik RadControls Demo
Os estados de vistasPadrões
Os estados de vistasVisual State Manager:<Grid x:Name="LayoutRoot">   <VisualStateManager.VisualStateGroups>        <Visua...
Estados de vistas
Várias resoluções de ecrãs
Várias resoluções de ecrãs
Várias resoluções de ecrãs
Várias resoluções de ecrãs            Store                       Meteorologia   Galinho Bing Viagens       Girl Geek Dinn...
Várias resoluções de ecrãsTestar no simulador:
Vários ecrãs usando o simulador
Várias resoluções de ecrãs<Image Source=“Images/logo.png" Width="100” Height="100" />
Várias resoluções de ecrãsDensidade do pixel                             Blend
Questões?
Referências    design.windows.com                         dev.windows.com
Patrocinador “GOLD”Twitter: @PTMicrosoft http://www.microsoft.com/portugal
Patrocinadores “Silver”
Patrocinadores “Bronze”
Próximas reuniões presenciais• 26/01/2013 – Janeiro(Lisboa)• 23/02/2013 – Fevereiro (Lisboa)  16/03/2013 – Março (Lisboa) ...
Obrigado!Sara Silvageral@saramgsilva.comhttp://www.saramgsilva.comhttp://twitter.com/saramgsilvahttp://pt.linkedin.com/in/...
Próximos SlideShares
Carregando em…5
×

Case studies about Layout & View States & Scale in Windows 8 Store Apps

668 visualizações

Publicada em

Publicada em: Tecnologia
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Case studies about Layout & View States & Scale in Windows 8 Store Apps

  1. 1. 34ª Reunião Lisboa - 08/12/2012 http://netponto.org Layout & View States & Scale Windows 8 Store Apps Sara Silva
  2. 2. Sara Silva+5 anos de experiência profissional em TIWindows 8 DeveloperWindows 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 - DMUCComunidades:
  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çãoAPI fornece-nos um conjunto de controlos:* Not in XAML built-in controls set, available via 3rd party
  5. 5. IntroduçãoTemplate 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 layoutO Blend permite obter estilos:
  8. 8. Customização de layoutAlterar a cor do item selecionado de uma ListView:
  9. 9. Customização de layoutAlteração da “border” do item selecionado da ListView:
  10. 10. Customização de layoutAlteração da “border” do item selecionado da ListView (Checked):
  11. 11. Customização de layoutAlteração da “border” do item selecionado da ListView (Checked):
  12. 12. Customização de layoutResultado:
  13. 13. Customização de layoutAlteraçã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. 14. Customização de layoutResultado: 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 vistasGalinho
  17. 17. Os estados de vistasTelerik RadControls Demo
  18. 18. Os estados de vistasPadrões
  19. 19. Os estados de vistasVisual 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 Store Meteorologia Galinho Bing Viagens Girl Geek Dinners My Snake Piano
  25. 25. Várias resoluções de ecrãsTestar 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ãsDensidade 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 Silvageral@saramgsilva.comhttp://www.saramgsilva.comhttp://twitter.com/saramgsilvahttp://pt.linkedin.com/in/saramgsilvahttp://www.facebook.com/saramgsilvahttp://www.windowsphone.com/pt-PT/store/publishers?publisherId=Sara+Silva

×