Case studies about layout view states scale

2.226 visualizações

Publicada em

0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
2.226
No SlideShare
0
A partir de incorporações
0
Número de incorporações
901
Ações
Compartilhamentos
0
Downloads
6
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no 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

    ×