case studies about layout & view states & scale in windows 8 store apps

35
Layout & View States & Scale Windows 8 Store Apps Sara Silva http://netpont o.org 34ª Reunião Lisboa - 08/12/2012

Upload: comunidade-netponto

Post on 24-May-2015

410 views

Category:

Technology


0 download

TRANSCRIPT

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

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

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

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

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

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

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

Customização de layoutO Blend permite obter estilos:

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

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

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

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

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

Customização de layoutResultado:

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

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

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

Customização do layout

demonstração

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

Os estados de vistasPadrões

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

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

Estados de vistas

demonstração

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

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

Várias resoluções de ecrãs

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

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

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

Várias resoluções de ecrãsTestar no simulador:

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

Vários ecrãs usando o simulador

demonstração

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

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

Várias resoluções de ecrãsDensidade do pixel

Blend

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

Questões?

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

Referências

design.windows.com

dev.windows.com

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

Patrocinador “GOLD”

Twitter: @PTMicrosoft http://www.microsoft.com/portugal

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

Patrocinadores “Bronze”

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

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

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