A apresentação discute estilos reutilizáveis em Xamarin.Forms, incluindo como criar estilos explícitos e implícitos, estilos globais, dinâmicos e com herança. Também aborda estilos OnPlatform e de dispositivos, além de temas pré-definidos.

1. Styles reaproveitáveis no Xamarin.Forms
Trilha Xamarin
@LetticiaNicoli
Software Developer

2. Apresentação
● Desenvolvedora na Lambda3;
● MTAC (Multi-Platform Associate Contributor);
● Adepta a novas tecnologias e metodologias
ágeis de desenvolvimento.
@LetticiaNicoli
21 anos

3. <ContentPage.Content>
<StackLayout>
<Label Text="These labels"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"/>
<Label Text="are not"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"/>
<Label Text="using styles"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"/>
</StackLayout>
</ContentPage.Content>

4. ALTERAÇÃO SIMPLES
● Texto: Negrito
● Cor do Texto: Azul
● Fonte: Grande
Fica pronto rápido né!? :)
É hoje que
eu vou
jogar fifinha!

5. FontSize="Large"
TextColor="Blue"
FontAttributes="Bold"
<ContentPage.Content>
<StackLayout>
<Label Text="These labels"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"/>
<Label Text="are not"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"/>
<Label Text="using styles"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"/>
</StackLayout>
</ContentPage.Content>
Para cada label !!

6. Começou a dar mais trabalho, não!?
Agora imagine se tivéssemos
que alterar tudo isso
para diversos
campos e telas
do aplicativo!

7. Estilos
● Permitem que a aparência de elementos visuais seja personalizada.
● São definidos para um tipo específico de controle.
● Possibilita agrupamento, facilitando alterações e manutenabilidade.
● Redução de código relacionado ao estilo do elemento.

8. Controle
Aplicados ao controle e filhos
Página
Aplicados a página e filhos
Aplicativo
Aplicados em toda a aplicação
Níveis de Utilização
Estilos foram projetados
principalmente para
XAML mas podem ser
criados em C#.

9. Estilos Explícitos
● Aplicado em controles específicos
TargetType: Elemento visual (obrigatório)
x.Key: Id para o estilo (“nome classe css”)
Os estilos que estão abaixo na hierarquia de exibição têm prioridade sobre aqueles definidos acima.
Observação:

10. Estilos Implícitos
● Aplicado em todos os controles do mesmo TargetType
TargetType: Elemento visual (obrigatório)
x.Key: Não utilizado
● Não exige que os controles façam referência ao estilo.
Não funciona para elementos derivados de TargetType.
Exemplo: Entry -> CustomEntry
Observação:

11. Estilos Globais
● Disponíveis para serem utilizados em toda aplicação.
● Podem ser explícitos ou implícitos.
● Por padrão, deve-se implementar no XAML da Application.
Os estilos que estão abaixo na hierarquia de exibição têm prioridade sobre aqueles definidos acima.
Observação:

12. Estilos Dinâmicos
● Respondendo alterações de estilo em tempo de execução.
● Deve-se utilizar DynamicResource ao invés de StaticResource.
● Geralmente realizado através do code-behind.

13. <ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="greenSearchBarStyle" TargetType="SearchBar">
<Setter Property="TextColor" Value="Green" />
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout Padding="0,20,0,0">
<SearchBar Placeholder="These SearchBar controls"
Style="{DynamicResource searchBarStyle}" />
</StackLayout>
</ContentPage.Content>
void OnButtonClicked(object sender, EventArgs e)
{
Resources["searchBarStyle"] = Resources["greenSearchBarStyle"];
}
C#

14. Herança de Estilos
● Os estilos podem herdar outros estilos.
● Deve-se utilizar BasedOn.
● Redução de duplicidade e aumento de reutilização de código.
Um estilo implícito pode ser derivado de um estilo explícito.
Porém, um estilo explícito não pode ser derivado de um estilo implícito.
Observação:

15. <ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="baseStyle" TargetType="View">
<Setter Property="HorizontalOptions" Value="Center" />
<Setter Property="VerticalOptions" Value="CenterAndExpand" />
</Style>
<Style x:Key="labelStyle" TargetType="Label"
BasedOn="{StaticResource baseStyle}">
<Setter Property="TextColor" Value="Teal" />
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout Padding="0,20,0,0">
<Label Text="These labels"
Style="{StaticResource labelStyle}" />
</StackLayout>
</ContentPage.Content>
Um estilo só pode herdar estilos do
mesmo nível ou acima.

16. Herança de Estilo Dinâmico
● É possível derivar um estilo dinâmico substituindo BasedOn
por BaseResourceKey.
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="tealSearchBarStyle" TargetType="SearchBar" BaseResourceKey="searchBarStyle">
..
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout Padding="0,20,0,0">
<SearchBar Text="These SearchBar controls" Style="{StaticResource tealSearchBarStyle}" />
</StackLayout>
</ContentPage.Content>

17. Estilos OnPlatform
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="greenSearchBarStyle" TargetType="SearchBar">
<Setter Property="BackgroundColor">
<Setter.Value>
<OnPlatform x:TypeArguments="Color" Android="#404040" />
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</ContentPage.Resources>
● É possível reaproveitar OnPlatform nos estilos criados.

18. Estilos de Dispositivos
● Xamarin.Forms inclui 6 estilos dinâmicos na classe Device.Style
BodyStyle ListItemTextStyle
CaptionStyle SubtitleStyle
ListItemDetailTextStyle TitleStyle

19. Acessibilidade
● Respeita preferências de acessibilidade de acordo com cada plataforma

20. TEMAS

21. Temas
● Disponibilização de Temas
(Light e Dark).
● Precisa do Xamarin.Forms 2.3
preview release.

22. BoxView
● HorizontalRule
● Circle
● Rounded
Label
● Header
● Subheader
● Body
● Link
● Inverse
Button
● Default
● Primary
● Success
● Info
● Warning
● Danger
● Link
● Small
● Large
Image
● Circle
● Rounded
● Thumbnail

24. Obrigada!
@LetticiaNicoli
letticia.nicoli@lambda3.com.br
Bota na
cabeça
que estilo
não é
marra!
“Marquin, DJ”