Início rápido: usando pincéis (XAML)

Applies to Windows and Windows Phone

Os objetos Brush são usados para pintar os interiores ou contornos de formas, texto e partes de controles, para que o objeto sendo pintado seja visíveis em uma interface do usuário. Vamos ver os pincéis disponíveis e como usá-los.

Mapa: como este tópico está relacionado aos outros? Veja:

Introdução aos pincéis

Para pintar um objeto como Shape ou as partes de um Control que é exibido na tela do aplicativo, você usa um Brush. Por exemplo, você define a propriedade Fill da Shape ou do Background e as propriedades Foreground de um Control como um valor Brush e esse Brush determina como o elemento de interface do usuário pinta ou é renderizado na interface do usuário. Os diferentes tipos de pincéis são SolidColorBrush, LinearGradientBrush, ImageBrush e WebViewBrush.

Pincéis de cor sólida

Um SolidColorBrush pinta uma área com uma única Color, como vermelho ou azul. Esse é o pincel mais básico. Há três formas em XAML de definir um SolidColorBrush e a cor que ele especifica: nomes de cores predefinidas, valores de cores hexadecimais ou a sintaxe do elemento da propriedade.

Nomes de cores predefinidas

Você pode usar um nome de cor predefinido, como Yellow ou Magenta. Existem 256 nomes de cores disponíveis. Um analisador XAML converte o nome da cor em uma estrutura de Color com os canais de cor corretos. Os 256 nomes de cores são baseados nos nomes de cores X11 da especificação CSS3 (Folhas de Estilos em Cascata, Nível 3); portanto, você já pode estar familiarizado com essa lista de nomes de cores se já tem experiência no design ou desenvolvimento para a Web.

Este é um exemplo que define a propriedade Fill de um Rectangle como a cor predefinida Red.


<StackPanel>
    <Rectangle Width="100" Height="100" Fill="Red" />
</StackPanel> 

Esta imagem mostra o SolidColorBrush aplicado no Rectangle.

Um SolidColorBrush renderizado.

Se você estiver definindo um SolidColorBrush usando código em vez de XAML, cada cor de nome está disponível como um valor estático de propriedade da classe Colors. Por exemplo, para declarar um valor Color de um SolidColorBrush para representar o nome de cor "Orquídea", defina o valor Color como o valor estático Colors.Orchid.

Valores de cores em hexadecimal

Você pode usar uma cadeia de caractares de formato hexadecimal para declarar os valores precisos de cor de 24 bits com canal alfa de 8 bits para um SolidColorBrush. Dois personagens na faixa de 0 a F definem cada valor de componente e a ordem dos valores de componente da cadeia hexadecimal é: canal alfa (opacidade), canal vermelho, canal verde e canal azul. Por exemplo, o valor hexadecimal "#FFFF0000" define vermelho totalmente opaco (alfa="FF", vermelho="FF", verde="00", e azul="00").

Este exemplo de XAML define a propriedade Fill de um Rectangle como o valor hexadecimal "#FFFF0000" e produz um resultado idêntico usando o nome de cor Colors.Red.


<StackPanel>
  <Rectangle Width="100" Height="100" Fill="#FFFF0000" />
</StackPanel>

Sintaxe de elemento da propriedade

Você pode usar a sintaxe do elemento da propriedade para definir um SolidColorBrush. Esta sintaxe é mais prolixa do que os métodos anteriores, mas você pode especificar configurações adicionais, como o Opacity do pincel. Para mais informações sobre a sintaxe de XAML, incluindo a sintaxe de elementos da propriedade, veja Visão geral sobre XAML.

Nos exemplos anteriores, você não viu a cadeia de caracteres "SolidColorBrush" ser exibida na sintaxe. O pincel que está sendo criado implicitamente e automaticamente, como parte de uma abreviação deliberada da linguagem XAML que ajuda a manter simples a definição da interface do usuário para os casos mais comuns. O exemplo a seguir cria um Rectangle e cria explicitamente o SolidColorBrush para uma propriedade Rectangle.Fill. A Color do SolidColorBrush é definida como Blue e a Opacity é definida como 0,5.


<Grid>
  <Rectangle Width="200" Height="150">
     <Rectangle.Fill>
        <SolidColorBrush Color="Blue" Opacity="0.5" />
     </Rectangle.Fill>
  </Rectangle>
</Grid>

Pincéis de gradiente lineares

Um LinearGradientBrush pinta uma área com um gradiente que é definido ao longo de uma linha. Esta linha é chamada eixo do gradiente. Você especifica as cores do gradiente e suas localizações ao longo do eixo do gradiente usando os objetos GradientStop. Por padrão, o eixo de gradiente é executado do canto superior esquerdo até o canto inferior direito da área pintada pelo pincel, resultando em um sombreado diagonal.

A GradientStop é um bloco de construção básico de um pincel de gradiente. Uma marca de gradiente especifica a Color do pincel que está em um Offset ao longo do eixo do gradiente, quando o pincel é aplicado na área sendo pintada.

A propriedade Color da marca do gradiente especifica a cor da marca do gradiente. Você pode definir a cor usando um nome de cor predefinido ou especificando os valores hexadecimais de ARGB.

A propriedade Offset de uma GradientStop especifica a posição de cada GradientStop ao longo do eixo do gradiente. O Offset é um double que vai de 0 a 1. Um Offset igual a 0 coloca a GradientStop no início do eixo do gradiente, em outras palavras, próximo ao seu StartPoint. Um Offset igual a 1 coloca a GradientStop no EndPoint. No mínimo, um LinearGradientBrush útil deve ter dois valores GradientStop, onde cada GradientStop deve especificar uma Color diferente e ter um Offset diferente entre 0 e 1.

Este exemplo cria um gradiente linear com quatro cores e a usa para pintar um Rectangle.


<StackPanel>
 <!-- This rectangle is painted with a diagonal linear gradient. -->
  <Rectangle Width="200" Height="100">
    <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
        <GradientStop Color="Yellow" Offset="0.0" x:Name="GradientStop1"/>
        <GradientStop Color="Red" Offset="0.25" x:Name="GradientStop2"/>
        <GradientStop Color="Blue" Offset="0.75" x:Name="GradientStop3"/>
        <GradientStop Color="LimeGreen" Offset="1.0" x:Name="GradientStop4"/>
      </LinearGradientBrush>
    </Rectangle.Fill>
  </Rectangle>
</StackPanel>

A cor de cada ponto entre as marcas do gradiente são linearmente interpoladas como uma combinação da cor especificada pelas duas marcas de gradiente associadas. A ilustração destaca as marcas do gradiente no exemplo anterior. Os círculos marcam a posição das marcas do gradiente e uma linha tracejada mostra o eixo do gradiente.

Marcas de gradiente

Você pode alterar a linha na qual as marcas de gradiente são posicionadas definindo as propriedades StartPoint e EndPoint com valores diferentes dos padrões iniciais (0,0) e (1,1). Ao alterar os valores das coordenadas StartPoint e EndPoint, você pode criar gradientes horizontais ou verticais, inverter a direção do gradiente ou condensar o gradiente espalhado para aplicar a um intervalo menor que a área totalmente pintada. Para condensar o gradiente, você define os valores de StartPoint e/ou EndPoint como algo entre os valores 0 e 1. Por exemplo, para um gradiente horizontal onde o esmaecimento acontece totalmente na metade esquerda do pincel e o lado direito é sólido como sua última cor GradientStop, especifique um StartPoint de (0,0) e um EndPoint de (0.5,0).

Pincéis da imagem

Um ImageBrush pinta uma imagem em uma área e a imagem a ser pintada se origina de uma origem de arquivo de imagem. Você define a propriedade ImageSource com o caminho da imagem a ser carregada. Geralmente, a origem da imagem vem de um item Content que faz parte dos recursos do seu aplicativo.

Por padrão, um ImageBrush estica a sua imagem para preencher completamente a área pintada, possivelmente distorcendo a imagem se a área pintada tiver uma proporção diferente da imagem. Você pode mudar este comportamento mudando a propriedade Stretch de seu valor padrão de Fill e o definindo como None, Uniform ou UniformToFill.

O exemplo a seguir cria um ImageBrush e define ImageSource para uma imagem chamada licorice.jpg, que você deve incluir como um recurso no aplicativo. O ImageBrush pinta a área definida por uma forma Ellipse.


<Ellipse Height="200" Width="300">
   <Ellipse.Fill>
     <ImageBrush ImageSource="licorice.jpg" />
   </Ellipse.Fill>
</Ellipse>

É assim que o ImageBrush renderizado parece.

Um ImageBrush renderizado.

ImageBrush e Image fazem referência a um arquivo de origem de imagem pelo URI (Uniform Resource Identifier), onde esse arquivo de origem de imagem usa vários formatos de imagem possíveis. Esses arquivos de origem de imagem são especificados como URIs. Para mais informações sobre especificar fontes de imagem, os formatos de imagem utilizáveis e empacotá-los em um aplicativo, veja Guia de início rápido: Image e ImageBrush.

Pincéis e texto

Você também pode usar pincéis para aplicar características de renderização aos elementos de texto. Por exemplo, a propriedade Foreground de TextBlock tem um Brush. Você pode todas os pincéis descritos aqui em texto. Mas tenha cuidado com os pincéis aplicados ao texto, porque é possível tornar o texto ilegível quando você usa pincéis que mancham qualquer plano de fundo sobre o qual o texto é renderizado ou que distraem os contornos de caracteres de texto. Use SolidColorBrush para legibilidade dos elementos de texto na maior parte dos casos a menos que você queira que o elemento de texto seja principalmente decorativo.

Mesmo quando você usa uma cor sólida, verifique se a cor de texto que você escolher tenha contraste suficiente com a cor da tela de fundo do contêiner de layout de texto. O nível de contraste entre o tela de fundo do texto e o primeiro plano do contêiner é uma consideração de acessibilidade.

WebViewBrush

Um WebViewBrush é um tipo especial de pincel que pode acessar o conteúdo normalmente exibido em um controle WebView. Em vez de renderizar o conteúdo na área de controle WebView retangular, o WebViewBrush pinta esse conteúdo em outro elemento que tem uma propriedade -type do Brush para renderizar a superíficie. WebViewBrush não é adequado para todos os cenários de pincel, mas é útil nas transições de um WebView. Para saber mais, veja WebViewBrush.

Pincéis como recursos XAML

Você pode declarar qualquer pincel para ser um recurso XAML com chave em um dicionário de recursos XAML. Isso torna mais fácil replicar os valores de pincel quando são aplicados a vários elementos em uma interface do usuário. Os valores de pincel são compartilhados e aplicativos a qualquer caso no qual você faz referência do recurso de pincel como uma utilização de {StaticResource} no seu XAML. Isso inclui os casos onde você tem um modelo de controle XAML que faz referência ao pincel compartilhado, e o modelo de controle é um recurso XAML com chave.

Pincéis em código

É muito mais comum especificar os pincéis usando XAML do que usando código. Isso acontece porque os pincéis costumam ser definidos como recursos XAML e porque os valores de pincel geralmente são a saída das ferramentas de design ou fazem parte de uma definição da IU XAML. Além disso, se você por acaso quiser definir um pincel usando código, todos os tipos de Brush estarão disponíveis para instanciação de códigos.

Para criar um SolidColorBrush em código, use o construtor que leva um parâmetro Color. Informe um valor que seja uma propriedade estática da classe Colors, como este:


SolidColorBrush blueBrush = new SolidColorBrush(Windows.UI.Colors.Blue);


Para WebViewBrush e ImageBrush, use o construtor padrão e, depois, chame outras APIs antes de tentar usar esse pincel para uma propriedade da IU.

  • ImageSource requer BitmapImage (não um URI) ao definir ImageBrush usando código. Se a sua origem for um fluxo, use o método SetSourceAsync para inicializar o valor. Se a sua origem for um URI, que inclui conteúdo em seu aplicativo que usa o esquema ms-appx ou ms-resource, use o construtor BitmapImage que leva um URI. Você também pode considerar a manipulação do evento ImageOpened se houver algum problema de temporização com a recuperação ou decodificação da origem da imagem, em que possa ser necessário alternar o conteúdo de exibição até que a origem da imagem esteja disponível.
  • Para WebViewBrush, talvez seja necessário chamar Redraw se você redefinido recentemente a propriedade SourceName ou se o conteúdo de WebView também estiver sendo alterado com código.
Para exemplos de código, veja as páginas de referência para WebViewBrush e ImageBrush.

Exemplos de pincéis

Para mais exemplos sobre uso de elementos gráficos e pincéis em aplicativos, veja:

Tópicos relacionados

Mapa de aplicativos do Tempo de Execução do Windows em C# ou Visual Basic
Mapa de aplicativos do Tempo de Execução do Windows em C++
Guia de início rápido: desenhando formas

 

 

Mostrar:
© 2014 Microsoft