Upload
sara-silva
View
1.666
Download
0
Embed Size (px)
DESCRIPTION
Citation preview
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 [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