Introdução

Para demonstrar como mudar a aparência dos componentes visuais do Windows Phone usaremos o projeto iniciado no tutorial anterior. Ao final daquele tutorial possuíamos a seguinte tela:

Tela da calculadora com estilo padrão

Uma aparência não muito agradável. Boa parte dos problemas visuais da aplicação vistos acima se dá pelos componentes quando lado a lado  se sobreporem uns aos outros. Podemos corrigir isso alterando o estilo dos componentes.

Embora essa aplicação possua o aparência padrão da plataforma iremos aproveitar que iremos mexer com estilos para dar um visual que nos remeta mais a uma calculadora física.

Neste tutorial criaremos dois estilos para os componentes Button sendo que um será aplicado aos botões de dígitos e o outro aos botões de operação. Para os outros elementos visuais não criaremos estilos e alteraremos a sua aparência diretamente no MainPage.xaml. Isso é feito para mostrar que podemos obter os mesmos efeitos com o uso de estilos ou alterando diretamente os componentes.

Criação de estilos

Seguindo uma recomendação da própria Microsoft não criaremos os estilos do zero, mas sim a partir de um estilo já existente. Isso é recomendado para não correr o risco de esquecermos de definir algo no estilo. Caso algo não seja definido o componente não será visualizado corretamente e usando um estilo como base não corremos este risco.

Para criar os estilos, clique com o botão direito sobre o item que receberá o estilo posteriormente, um Button no nosso caso e selecione a opção Edit Template > Edit a Copy. Na janela que será aberta deve-se escolher o nome do estilo e onde o estilo será salvo, na Aplicação, ficando disponível para uso em toda a aplicação, no documento em uso, ficando disponível somente na página que está em uso, ou num recurso, que também ficará disponível onde for declarado seu uso.

Após os passos anteriores será aberto o arquivo para edição já na parte correspondente ao estilo que foi criado. Se anteriormente a opção de onde salvar o estilo não for um recurso vários estilos serão encontrados neste mesmo arquivo.

Botões de Dígitos

Os botões de dígitos da calculadora serão cinza, e possuirão bordas arredondadas.

No código abaixo temos as principais alterações do estilo que será aplicado aos botões de dígitos. Podemos ver que são alterados: cor de fundo, cor de borda, cor do conteúdo, alinhamento do conteúdo e principalmente a largura e altura minima do botão. É essa largura e altura minima que estavam deixando o teclado do nosso projeto anterior encavalado.

[sourcecode language=”xml” wraplines=”false” collapse=”false”]
<Style x:Key="DigitButtonStyle" TargetType="Button">
<Setter Property="Background" Value="Gray"/>
<Setter Property="BorderBrush" Value="DarkGray"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="BorderThickness" Value="{ThemeResource PhoneBorderThickness}"/>
<Setter Property="FontFamily" Value="{ThemeResource PhoneFontFamilyNormal}"/>
<Setter Property="FontWeight" Value="{ThemeResource PhoneButtonFontWeight}"/>
<Setter Property="FontSize" Value="{ThemeResource TextStyleLargeFontSize}"/>
<Setter Property="Padding" Value="10,0"/>
<Setter Property="MinHeight" Value="80"/>
<Setter Property="MinWidth" Value="80"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Template">
<!– Definição dos estados do botão –>
</Setter>
</Style>
[/sourcecode]

A propriedade Template é responsável pela definição dos estados do botão (padrão, com foco, pressionado e outros) além das propriedades de borda do componente. Iremos alterar a borda para que ela possua os cantos arrendondados através do elemento Border.

[sourcecode language=”xml” wraplines=”false” collapse=”false”]
<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="{ThemeResource PhoneTouchTargetOverhang}" CornerRadius="10">
<ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
[/sourcecode]

O botão também deve assumir um tom mais escuro de cinza ao ser pressionado para simular o aperto de um botão real.  Para isso vamos alterar o VisualState “Pressed”. Para o efeito desejado alteramos as propriedades Foreground e Background de acordo com o código abaixo.

[sourcecode language=”xml” wraplines=”false” collapse=”false”]
<VisualState x:Name="Pressed">
<Storyboard>
<PointerDownThemeAnimation Storyboard.TargetName="Grid"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPressedForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource DigitAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
[/sourcecode]

Botões de operações

Os botões de operações são definidos do mesmo modo, só mudando as cores que deve assumir. Sendo que ao invés de cinza eles serão vermelhos. segue abaixo os trechos relevantes do novo estilo que esta sendo definido.

[sourcecode language=”xml” wraplines=”false” collapse=”false”]
<Style x:Key="OperationButtonStyle" TargetType="Button">
<Setter Property="Background" Value="#FFDC3131"/>
<Setter Property="BorderBrush" Value="#FFCF0F0F"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="BorderThickness" Value="{ThemeResource PhoneBorderThickness}"/>
<Setter Property="FontFamily" Value="{ThemeResource PhoneFontFamilyNormal}"/>
<Setter Property="FontWeight" Value="{ThemeResource PhoneButtonFontWeight}"/>
<Setter Property="FontSize" Value="{ThemeResource TextStyleLargeFontSize}"/>
<Setter Property="Padding" Value="9.5,0"/>
<Setter Property="MinHeight" Value="{ThemeResource PhoneButtonMinHeight}"/>
<Setter Property="MinWidth" Value="{ThemeResource PhoneButtonMinWidth}"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Template">
<!– Definição dos estados do botão –>
</Setter>
</Style>
[/sourcecode]

Como podemos ver no código as únicas alterações em relação ao template anterior foram as cores.

[sourcecode language=”xml” wraplines=”false” collapse=”false”]
<VisualState x:Name="Pressed">
<Storyboard>
<PointerDownThemeAnimation Storyboard.TargetName="Grid"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPressedForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource OperationAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
[/sourcecode]

Aplicação dos estilos

Para aplicar um estilo a um componente visual é só adicionar o seguinte código a definição do elemento.

Para botões de digito:

[sourcecode language=”xml” wraplines=”false” collapse=”false”]
Style="{StaticResource DigitButtonStyle}"
[/sourcecode]

Para botões de operação:

[sourcecode language=”xml” wraplines=”false” collapse=”false”]
Style="{StaticResource OperationButtonStyle}"
[/sourcecode]

Outras alterações de aparência

Outras alterações são necessárias para deixar a calculadora do modo que desejamos. Como todos os botões já estão com a aparência correta só falta alterarmos o visor e o fundo da calculadora.

Para alterarmos o fundo da calculadora alteramos a tag Background da MainPage.xaml para:

[sourcecode language=”xml” wraplines=”false” collapse=”false”]
Background="#FFCBC4C4"
[/sourcecode]

E para alterar o visor basta alterarmos o código para:

[sourcecode language=”xml” wraplines=”false” collapse=”false”]
<Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" BorderThickness="3" BorderBrush="DarkGray" Padding="4" CornerRadius="10" Background="#FF3D3D3D">
<TextBlock x:Name="ResultScreen" Text="0" FontSize="72" Padding="6" Height="Auto" TextAlignment="Right" Foreground="White"/>
</Border>
[/sourcecode]

O código acima altera a cor da borda, cor de fundo do visor e arredonda os cantos do visor.

Essas alterações poderiam ser feitas através do uso de estilos, porém como não é replicado em local algum é viável definir diretamente no componente.

Conclusão

Após todas essas alterações, que seriam bem mais trabalhosas caso não usássemos estilos, a nossa calculadora passa a possuir a seguinte aparência:

Tela da calculadora utilizando estilos.