case studies about layout & view states & scale in windows 8 store apps
TRANSCRIPT
![Page 1: Case studies about Layout & View States & Scale in Windows 8 Store Apps](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b2ebd8b42af93b8b4803/html5/thumbnails/1.jpg)
Layout & View States & Scale Windows 8 Store Apps
Sara Silva
http://netponto.org34ª Reunião Lisboa - 08/12/2012
![Page 2: Case studies about Layout & View States & Scale in Windows 8 Store Apps](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b2ebd8b42af93b8b4803/html5/thumbnails/2.jpg)
Sara Silva +5 anos de experiência profissional em TI
Windows 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 - DMUC
Comunidades:
![Page 3: Case studies about Layout & View States & Scale in Windows 8 Store Apps](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b2ebd8b42af93b8b4803/html5/thumbnails/3.jpg)
Agenda
• Introdução• Customização do layout• Os estados de vistas• Várias resoluções de ecrãs• Questões
![Page 4: Case studies about Layout & View States & Scale in Windows 8 Store Apps](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b2ebd8b42af93b8b4803/html5/thumbnails/4.jpg)
Introdução
Button
Checkbox
Combo Box
Date Picker*Radio Button
Hyperlink
ListBox
Ratings*
Progress Bar
Progress Ring
Time Picker*
Toggle Switch
Slider
API fornece-nos um conjunto de controlos:
* Not in XAML built-in controls set, available via 3rd party
![Page 5: Case studies about Layout & View States & Scale in Windows 8 Store Apps](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b2ebd8b42af93b8b4803/html5/thumbnails/5.jpg)
IntroduçãoTemplate de projetos: Grid e Split
List View
Grid View Flip View
![Page 6: Case studies about Layout & View States & Scale in Windows 8 Store Apps](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b2ebd8b42af93b8b4803/html5/thumbnails/6.jpg)
Customização de layout
• Alteração do estilo por omissão do controlo;
• Novo estilo;
• Atribuir DataTemplate;
![Page 7: Case studies about Layout & View States & Scale in Windows 8 Store Apps](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b2ebd8b42af93b8b4803/html5/thumbnails/7.jpg)
Customização de layoutO Blend permite obter estilos:
![Page 8: Case studies about Layout & View States & Scale in Windows 8 Store Apps](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b2ebd8b42af93b8b4803/html5/thumbnails/8.jpg)
Customização de layoutAlterar a cor do item selecionado de uma ListView:
![Page 9: Case studies about Layout & View States & Scale in Windows 8 Store Apps](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b2ebd8b42af93b8b4803/html5/thumbnails/9.jpg)
Customização de layoutAlteração da “border” do item selecionado da ListView:
![Page 10: Case studies about Layout & View States & Scale in Windows 8 Store Apps](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b2ebd8b42af93b8b4803/html5/thumbnails/10.jpg)
Customização de layoutAlteração da “border” do item selecionado da ListView (Checked):
![Page 11: Case studies about Layout & View States & Scale in Windows 8 Store Apps](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b2ebd8b42af93b8b4803/html5/thumbnails/11.jpg)
Customização de layoutAlteração da “border” do item selecionado da ListView (Checked):
![Page 12: Case studies about Layout & View States & Scale in Windows 8 Store Apps](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b2ebd8b42af93b8b4803/html5/thumbnails/12.jpg)
Customização de layoutResultado:
![Page 13: Case studies about Layout & View States & Scale in Windows 8 Store Apps](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b2ebd8b42af93b8b4803/html5/thumbnails/13.jpg)
Customização de layoutAlteração dos estilos definidos por omissão:
C:\Program Files (x86)\Windows Kits\8.0\Include\WinRT\Xaml\Design\themeresources.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>
![Page 14: Case studies about Layout & View States & Scale in Windows 8 Store Apps](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b2ebd8b42af93b8b4803/html5/thumbnails/14.jpg)
Customização de layoutResultado:
Ao alterar um valor por omissão é preciso ter em conta todos os “resources” relacionado!!
![Page 15: Case studies about Layout & View States & Scale in Windows 8 Store Apps](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b2ebd8b42af93b8b4803/html5/thumbnails/15.jpg)
Customização do layout
demonstração
![Page 16: Case studies about Layout & View States & Scale in Windows 8 Store Apps](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b2ebd8b42af93b8b4803/html5/thumbnails/16.jpg)
Os estados de vistas
Snap / FilledPortraitLandscape Full Screen
Galinho
![Page 17: Case studies about Layout & View States & Scale in Windows 8 Store Apps](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b2ebd8b42af93b8b4803/html5/thumbnails/17.jpg)
Os estados de vistasTelerik RadControls Demo
Snap / FilledPortraitLandscape Full Screen
![Page 18: Case studies about Layout & View States & Scale in Windows 8 Store Apps](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b2ebd8b42af93b8b4803/html5/thumbnails/18.jpg)
Os estados de vistasPadrões
![Page 19: Case studies about Layout & View States & Scale in Windows 8 Store Apps](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b2ebd8b42af93b8b4803/html5/thumbnails/19.jpg)
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>
![Page 20: Case studies about Layout & View States & Scale in Windows 8 Store Apps](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b2ebd8b42af93b8b4803/html5/thumbnails/20.jpg)
Estados de vistas
demonstração
![Page 21: Case studies about Layout & View States & Scale in Windows 8 Store Apps](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b2ebd8b42af93b8b4803/html5/thumbnails/21.jpg)
Várias resoluções de ecrãs
Resolução de Ecrã Densidade do Pixel
![Page 22: Case studies about Layout & View States & Scale in Windows 8 Store Apps](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b2ebd8b42af93b8b4803/html5/thumbnails/22.jpg)
Várias resoluções de ecrãs
![Page 23: Case studies about Layout & View States & Scale in Windows 8 Store Apps](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b2ebd8b42af93b8b4803/html5/thumbnails/23.jpg)
Várias resoluções de ecrãsAplicação adapta-se à resolução Aplicação é independente da
resolução
![Page 24: Case studies about Layout & View States & Scale in Windows 8 Store Apps](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b2ebd8b42af93b8b4803/html5/thumbnails/24.jpg)
Várias resoluções de ecrãsAplicação adapta-se à resolução Aplicação é independente da
resolução
PianoMy Snake
GalinhoMeteorologiaStore
Bing Viagens Girl Geek Dinners
![Page 25: Case studies about Layout & View States & Scale in Windows 8 Store Apps](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b2ebd8b42af93b8b4803/html5/thumbnails/25.jpg)
Várias resoluções de ecrãsTestar no simulador:
![Page 26: Case studies about Layout & View States & Scale in Windows 8 Store Apps](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b2ebd8b42af93b8b4803/html5/thumbnails/26.jpg)
Vários ecrãs usando o simulador
demonstração
![Page 27: Case studies about Layout & View States & Scale in Windows 8 Store Apps](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b2ebd8b42af93b8b4803/html5/thumbnails/27.jpg)
Várias resoluções de ecrãs
100%
<Image Source=“Images/logo.png" Width="100” Height="100" />
logo.scale-100.jpglogo.scale-140.jpglogo.scale-180.jpg
140% 180%
![Page 28: Case studies about Layout & View States & Scale in Windows 8 Store Apps](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b2ebd8b42af93b8b4803/html5/thumbnails/28.jpg)
Várias resoluções de ecrãsDensidade do pixel
Blend
![Page 29: Case studies about Layout & View States & Scale in Windows 8 Store Apps](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b2ebd8b42af93b8b4803/html5/thumbnails/29.jpg)
Questões?
![Page 30: Case studies about Layout & View States & Scale in Windows 8 Store Apps](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b2ebd8b42af93b8b4803/html5/thumbnails/30.jpg)
Referências
design.windows.com
dev.windows.com
![Page 31: Case studies about Layout & View States & Scale in Windows 8 Store Apps](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b2ebd8b42af93b8b4803/html5/thumbnails/31.jpg)
Patrocinador “GOLD”
Twitter: @PTMicrosoft http://www.microsoft.com/portugal
![Page 32: Case studies about Layout & View States & Scale in Windows 8 Store Apps](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b2ebd8b42af93b8b4803/html5/thumbnails/32.jpg)
Patrocinadores “Silver”
![Page 33: Case studies about Layout & View States & Scale in Windows 8 Store Apps](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b2ebd8b42af93b8b4803/html5/thumbnails/33.jpg)
Patrocinadores “Bronze”
![Page 34: Case studies about Layout & View States & Scale in Windows 8 Store Apps](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b2ebd8b42af93b8b4803/html5/thumbnails/34.jpg)
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! :)
![Page 35: Case studies about Layout & View States & Scale in Windows 8 Store Apps](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b2ebd8b42af93b8b4803/html5/thumbnails/35.jpg)
Obrigado!
Sara [email protected]
http://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