Customizando o SuperQuiz – Parte 2

Description

Por Vinícius Souza

Microsoft Technical Evangelist

Uma aplicação Metro Style é focada em conteúdo, mas o conteúdo sozinho não vai gerar uma identidade visual, nem um bom primeiro impacto, ao utilizar a sua aplicação.

Neste artigo apresentarei os pontos de edição para customizar a sua aplicação. Não vou entrar em conceitos de design, focarei sobre o que alterar e onde é utilizado.

Continuaremos utilizando o SuperQuiz como exemplo, código desenvolvido utilizando o template de grid (disponível no Visual Studio) como base.

Imagens

As imagens são uma parte muito importante de uma aplicação Metro Style no Windows 8. Elas possibilitam criar uma identidade para sua app. E, para isso, não é simplesmente trocando o background da sua aplicação que você vai conseguir.

Neste tópico, listarei as imagens com as quais você deve se preocupar quando for criar um aplicativo para Windows 8 e onde são utilizadas. Em seguida, falarei sobre como lidar com diferentes resoluções na sua aplicação.

Abrindo o arquivo de manifesto no Visual Studio 2012 RC, você vai visualizar quatro abas (Application UI, Capabilities, Declarations, Packaging). Veja imagem abaixo:

Arquivo de Manifesto

 Generic Episode Image

Existem várias imagens mencionadas no arquivos de manifesto, cada uma separada pela sua utilização.

Na seção Tile, temos as definições das imagens de logo, wide logo e small logo, cada qual com sua especificação de tamanho. Veja, abaixo, onde estas imagens são utilizadas:

 

Imagem

Utilização

Logo (150x150)

 

É utilizada no tile de sua aplicação. No SuperQuiz, o logo é utilizado como tile pequeno. Veja imagem abaixo, em destaque.

As imagens utilizadas possuem a extensão png e, geralmente, não possuem cor de fundo. A cor de fundo é especificada com o código RGB no parâmetro Backgorund color (cor de fundo).

 Generic Episode Image

Wide logo (310X150)

Esta imagem é utilizada como o tile grande da aplicação. Para apresentá-la, clique com o botão direito do mouse sobre uma das tiles apresentadas.

Generic Episode Image

Após alterar a imagem para larger, teremos o seguinte resultado:

 Generic Episode Image

Small Logo (30x30)

O small logo é utilizado quando realizamos pesquisa no Windows 8. Se a aplicação implementa o contrato de Search, no Charm de busca é apresentado uma lista das aplicações que servirão como target. Veja imagem abaixo:

Generic Episode Image

 

Tiles

Os tiles são os representantes da sua aplicação no Start Screen (tela inicial) do Windows 8. Eles não são apenas um ícone grande, mas também possuem a capacidade de exibir mais informações para o usuário sem que a aplicação esteja em execução. Um tile interessante e útil pode ser um incentivo para o usuário executar sua aplicação.

Por ser a porta de entrada da sua aplicação, podendo refletir diretamente no sucesso ou não de sua app, o tile é um item que não pode ser negligenciado durante o desenvolvimento da sua aplicação.

Ao ler as informações acima, você pode pensar que isso é óbvio. Mas, falo por experiência própria - algumas vezes ficamos tão focados em resolver algum problema no código que, algo que era simples ou até mesmo óbvio, passa despercebido.

Sugestão: antes de começar a desenvolver, faça os dois tiles (logo e wide logo), somente imagem sem atualização. Depois com o desenvolvimento da aplicação, se achar necessário, você acrescenta a funcionalidade.

Para alterar as imagens utilizadas pelo tile, basta alterar as propriedades logo, wide logo e small logo no arquivo de manifesto ou, simplesmente, altere os arquivos da pasta Assets localizado na raiz de seu projeto.

O SuperQuiz possui apenas tiles estáticos, mas nada impede você de incluir essa funcionalidade. Aliás, sugiro fortemente que essa funcionalidade seja desenvolvida, SE FIZER SENTIDO!

Uma boa prática para desenvolvimento de aplicações Metro Style é "Menos é Mais", o que não quer dizer que você vai deixar de implementar alguma funcionalidade importante para o usuário. Pelo contrário, se não fizer sentido para a sua aplicação utilizar alguma funcionalidade, como o live tile, não a implemente.

SplashScreen

Assim como os tiles, o SplashScreen é muito importante, apesar de ser utilizado muito pouco, cerca de 2 a 5 segundos durante o carregamento da aplicação.

Uma imagem de SplashScreen fala muito sobre a sua aplicação, sendo parte fundamental da construção da sua identidade visual.

Styles (estilos)

Os estilos para uma aplicação XAML tem o mesmo funcionamento dos estilos CSS para programação em HTML5. É uma forma inteligente de fazer a diagramação do seu layout definindo fontes, margens, imagens de fundo, etc., que podem ser reaproveitados durante o desenvolvimento da aplicação.

No SuperQuiz utilizamos dois estilos: um localizado na pasta Common/StandardStyles.xaml e outro na pasta SuperQuiz/View/QuizStyles.xaml.

O arquivo StandardStyles.xaml define estilos que serão utilizados em toda a aplicação, sendo relacionado com a estrutura do layout. Enquanto que o arquivo QuizStyles.xaml define estilos específicos de uma página do jogo de Quiz.

Exemplos de definições encontradas no StandardStyle.xaml :

<Style x:Key="BasicRichTextStyle" TargetType="RichTextBlock">
<Setter Property="Foreground" Value="{StaticResource ApplicationForegroundThemeBrush}"/>
<Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}"/>
  <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/>
  <Setter Property="TextTrimming" Value="WordEllipsis"/>
  <Setter Property="TextWrapping" Value="Wrap"/>
  <Setter Property="Typography.StylisticSet20" Value="True"/>
  <Setter Property="Typography.DiscretionaryLigatures" Value="True"/>
  <Setter Property="Typography.CaseSensitiveForms" Value="True"/>
</Style>

No exemplo acima, é definido uma classe chamada BasicRichTextStyle, cujo objeto que vai receber o estilo é o RichTextBlock.

Assim como no CSS (Cascade Style Sheet), é possível definir um estilo utilizando outro previamente definido como base. Abaixo, apresento um exemplo de estilo utilizando como base o BasicRichTextStyle.

<Style x:Key="BaselineRichTextStyle" TargetType="RichTextBlock" BasedOn="{StaticResource BasicRichTextStyle}">
  <Setter Property="LineHeight" Value="20"/>
  <Setter Property="LineStackingStrategy" Value="BlockLineHeight"/>
  <!-- Properly align text along its baseline -->
  <Setter Property="RenderTransform">
    <Setter.Value>
      <TranslateTransform X="-1" Y="4"/>
    </Setter.Value>
  </Setter>
</Style>

Para definirmos um estilo e utilizar um segundo como referência, temos que utilizar a propriedade BasedOn. A sintaxe exata é a seguinte:

BasedOn="{StaticResource <Nome do estilo que sera utilizado>}"

Este é um recurso muito utilizado e é muito importante para termos agilidade e conformidade no layout da aplicação.

Sons

Assim como as imagens, os sons podem ser utilizados para criar uma identidade para a sua aplicação. Porém, este recurso deve ser utilizado com cautela e em alguns comportamentos específicos da aplicação.

No SuperQuiz, utilizamos o som SuperQuiz\Assets\Sounds\ting.mp3 – propositalmente, este som é utilizado em diferentes cenários, o que é um problema, pois quando o usuário da app escutar o som não vai conseguir identificar o tipo de ação.

O som é utilizado no arquivo SuperQuiz\View\StarPointsControl.xaml.cs, no método StarPointsControl_Loaded. O código do método está apresentado abaixo:

 

async void StarPointsControl_Loaded(object sender, RoutedEventArgs e)
        {
            if (ScoredPoints == 0)
            {
                text.Text = String.Format("+{0}", ScoredPoints);
                this.KeepingPoints.Begin();
            }
            else if (ScoredPoints > 0)
            {
                text.Text = String.Format("+{0}", ScoredPoints);
                this.WinningPoints.Begin();
            }
            else
            {
                text.Text = String.Format("-{0}", ScoredPoints);
                this.LosingPoints.Begin();
            }
            if (QuizApplication.Instance.Settings.PlaySounds)
            {
                var sound = new MediaElement();
                var parent = (Panel)this.Parent;
                parent.Children.Add(sound);
                sound.AudioCategory = AudioCategory.GameEffects;
                sound.AutoPlay = true;
                sound.Visibility = Visibility.Collapsed;
                sound.MediaEnded += PlayCompleted;
                sound.Source = new Uri("ms-appx:/SuperQuiz/Assets/Sounds/ting.mp3");
            }
        }

Como dito anteriormente, o som é incluído na página quando o usuário continua com a pontuação, ganha pontos ou perde pontos.

Sugiro que sejam incluídos sons diferentes para cada cenário, simplesmente incluindo uma váriável do tipo String, que receberá o nome do som a ser incluído em cada situação, e utilizando essa variável na propriedade Source do objeto sound.

Conclusão

Neste artigo foram apresentadas várias maneiras de customizar a aplicação SuperQuiz. Assim como o código, as alterações visuais da página devem ser pensadas com cuidado. Este é um ponto importantíssimo de uma aplicação Metro Style.

Implementando todos os pontos discutidos aqui, você vai criar um game de Quiz com a sua cara.

Para quem tem um perfil mais de código, como o meu, não vai ser na primeira tentativa que vai conseguir criar uma aplicação de impacto, mas a prática leva a perfeição e, por isso, não desanime.

 

Tags:

XAML, Windows 8

The Discussion

  • Gilberto Martini

    O autor também deveria seguir o conceito de "menos é mais", pois tem texto demais, e pouca prática, o que acaba tornando a experiência de aprendizado frustrante.

Comments closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums, or Contact Us and let us know.