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

662 visualizações

Publicada em

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
662
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
3
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • http:/bit.ly/netponto-aval
  • BasicControls: 4,5,6Split – selected itemGrid – ItemTemplate; ItemTemplateSelectorThe 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.TelerikRadControls for Windows 8 Trial Demo:http://www.telerik.com/products/windows-8/overview.aspx
  • TelerikRadControls for Windows 8 Trial Demo:http://www.telerik.com/products/windows-8/overview.aspx
  • 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

    ×