Layout & View States & Scale
Windows 8 Store Apps
Sara Silva
http://netponto.org34ª Reunião Lisboa - 08/12/2012
Sara Silva
+5 anos de experiência profissional em TI
Windows 8 Developer
Windows Phone Developer
 MCPD: Windows Developer...
Agenda
• Introdução
• Customização do layout
• Os estados de vistas
• Várias resoluções de ecrãs
• Questões
Introdução
API fornece-nos um conjunto de controlos:
* Not in XAML built-in controls set, available via 3rd party
Introdução
Template 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 layout
O Blend permite obter estilos:
Customização de layout
Alterar a cor do item selecionado de uma ListView:
Customização de layout
Alteração da “border” do item selecionado da ListView:
Customização de layout
Alteração da “border” do item selecionado da ListView (Checked):
Customização de layout
Alteração da “border” do item selecionado da ListView (Checked):
Customização de layout
Resultado:
Customização de layout
Alteração dos estilos definidos por omissão:
C:Program Files (x86)Windows Kits8.0IncludeWinRTXamlDe...
Customização de layout
Resultado:
Ao alterar um valor por omissão é preciso ter em conta todos os “resources” relacionado!!
Customização do layout
Os estados de vistas
Galinho
Os estados de vistas
Telerik RadControls Demo
Os estados de vistas
Padrões
Os estados de vistas
Visual State Manager:
<Grid x:Name="LayoutRoot">
<VisualStateManager.VisualStateGroups>
<VisualStateG...
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
PianoMy Snake
GalinhoMeteorologiaStore
Bing Viagens Girl Geek Dinners
Várias resoluções de ecrãs
Testar 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ãs
Densidade 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 Silva
geral@saramgsilva.com
http://www.saramgsilva.com
http://twitter.com/saramgsilva
http://pt.linkedin.co...
Upcoming SlideShare
Loading in …5
×

Case studies about layout view states scale

2,023 views
1,907 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,023
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • http:/bit.ly/netponto-aval

  • Alteração do estilo: mudar a cor quando um item fica selecionado
    Redefinir um novo estilo: caso do back button
    Criar data template: é o caso do dia na aplicação da pílula

  • BasicControls: 4,5,6

    Split – selected item

    Grid – ItemTemplate; ItemTemplateSelector

    The appearance of individual items in each group is defined by the ItemTemplate.

    The ItemsPanel specifies how the groups are arranged in the GridView.
    The GroupStyle.Panel specifies how individual items are arranged within each group.
    The GroupStyle.ContainerStyle is used to add a border around each group, and set its minimum size and margins. The HidesIfEmpty property is set to true to hide any empty groups.

    Telerik RadControls for Windows 8 Trial Demo:
    http://www.telerik.com/products/windows-8/overview.aspx
  • Telerik RadControls for Windows 8 Trial Demo:
    http://www.telerik.com/products/windows-8/overview.aspx
  • 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

    ×