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

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:

Agenda

• Introdução• Customização do layout• Os estados de vistas• Várias resoluções de ecrãs• Questões

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

IntroduçãoTemplate de projetos: Grid e Split

List View

Grid View Flip View

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:

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>

Customização de layoutResultado:

Ao alterar um valor por omissão é preciso ter em conta todos os “resources” relacionado!!

Customização do layout

demonstração

Os estados de vistas

Snap / FilledPortraitLandscape Full Screen

Galinho

Os estados de vistasTelerik RadControls Demo

Snap / FilledPortraitLandscape Full Screen

Os estados de vistasPadrões

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>

Estados de vistas

demonstração

Várias resoluções de ecrãs

Resolução de Ecrã Densidade do Pixel

Várias resoluções de ecrãs

Várias resoluções de ecrãsAplicação adapta-se à resolução Aplicação é independente da

resolução

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

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

Vários ecrãs usando o simulador

demonstração

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%

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)

Reserva estes dias na agenda! :)

Obrigado!

Sara Silvageral@saramgsilva.com

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