Usar pincéis para pintar tela de fundo, primeiro plano e contorno

  • Artigo

Use objetos Brush para pintar os interiores e os contornos das formas, do texto e dos controles XAML, tornando-os visíveis na interface do usuário do aplicativo.

APIs importantes: classe Brush

Introdução aos pincéis

Para pintar uma Shape, um texto ou partes de um Control que é exibido na tela do aplicativo, defina a propriedade Fill da Shape ou as propriedades de Background e Foreground de um Control com um valor de Brush.

Os diferentes tipos de pincéis são:

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. No XAML, há três maneiras 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, é possível que você já esteja familiarizado com essa lista de nomes de cores se tiver experiência em design ou desenvolvimento para a Web.

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

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

Um SolidColorBrush renderizado

SolidColorBrush aplicado a um Rectangle

Se você estiver definindo um SolidColorBrush usando código em vez de XAML, cada cor de nome estará 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 caracteres de formato hexadecimal para declarar os valores precisos de cor de 24 bits com canal alfa de 8 bits para um SolidColorBrush. Dois caracteres na faixa de 0 a F definem cada valor de componente e a ordem dos valores de componentes da cadeia hexadecimal é: canal alfa (opacidade), canal vermelho, canal verde e canal azul (ARGB). Por exemplo, o valor hexadecimal "#FFFF0000" define vermelho totalmente opaco (alpha="FF", red="FF", green="00" e blue="00").

Este exemplo XAML define a propriedade Fill de um Rectangle como o valor hexadecimal "#FFFF0000" e fornece um resultado idêntico ao uso da cor nomeada Colors.Red.

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

Sintaxe de elementos 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 obter mais informações sobre a sintaxe XAML, incluindo a sintaxe dos elementos de propriedade, confira a Visão geral sobre o XAML e o Guia de sintaxe XAML.

Nos exemplos anteriores, o pincel está sendo criado implícita e automaticamente, como parte de uma linguagem XAML abreviada deliberada que ajuda a manter as definições da interface do usuário simples para os casos mais comuns. O exemplo a seguir cria um Rectangle e cria explicitamente o SolidColorBrush como um valor de elemento para uma propriedade Rectangle.Fill. A Color do SolidColorBrush é definida como Blue e a Opacity é definida como 0,5.

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

Pincéis de gradiente linear

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, em que 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.

<!-- 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>

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 imagem a seguir destaca as marcas de gradiente do exemplo anterior. Os círculos marcam a posição das marcas do gradiente e uma linha tracejada mostra o eixo do gradiente.

Diagrama ilustrando as Paradas de Gradiente de 1 a 4 do canto superior esquerdo do diagrama descendo para a direita até atingir o canto inferior direito do diagrama.

Combinação de cores especificadas pelas duas marcas de gradiente delimitadoras

Você pode alterar a linha na qual as paradas de gradiente são posicionadas definindo as propriedades StartPoint e EndPoint como valores diferentes dos (0,0) padrões iniciais e (1,1) start. 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 em que 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).

Usar ferramentas para criar gradientes

Agora que já sabe como gradientes lineares funcionam, você pode usar o Visual Studio ou o Blend para tornar a criação desses gradientes mais fácil. Para criar um gradiente, selecione o objeto ao qual você deseja aplicar um gradiente na superfície de design ou no modo de exibição XAML. Expanda Pincel e selecione a guia Gradiente Linear.

Criar um gradiente linear no Visual Studio

Como criar um gradiente linear no Visual Studio

Agora, você pode mudar as cores das marcas do gradiente e deslizar as posições usando a barra na parte inferior. Você também pode adicionar novas marcas de gradiente clicando na barra e remover arrastando as marcas para fora da barra (veja a próxima captura de tela).

Barra na parte inferior da janela de propriedades que controla as marcas de gradiente

Controle deslizante da configuração de gradiente

Pincéis de gradiente radial

Um RadialGradientBrush é desenhado em uma elipse que é definida pelas propriedades Center, RadiusX e RadiusY. As cores do gradiente começam no centro da elipse e terminam no raio.

As cores do gradiente radial são definidas por marcas de cor adicionadas à propriedade da coleção de GradientStops. Cada marca de gradiente especifica uma cor e um deslocamento ao longo do gradiente.

A origem do gradiente usa como padrão o centro e pode ser deslocada usando a propriedade GradientOrigin.

MappingMode define se Center, RadiusX, RadiusY e GradientOrigin representam coordenadas relativas ou absolutas.

Quando MappingMode é definido como RelativeToBoundingBox, os valores X e Y das três propriedades são tratados em relação aos limites do elemento, em que (0,0) representa a parte superior esquerda e (1,1) representa a parte inferior direita dos limites do elemento para as propriedades Center, RadiusX e RadiusY e (0,0) representa o centro da propriedade GradientOrigin.

Quando MappingMode é definido como Absolute, os valores X e Y das três propriedades são tratados como coordenadas absolutas dentro dos limites do elemento.

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

<!-- This rectangle is painted with a radial gradient. -->
<Rectangle Width="200" Height="200">
    <Rectangle.Fill>
        <media:RadialGradientBrush>
            <GradientStop Color="Blue" Offset="0.0" />
            <GradientStop Color="Yellow" Offset="0.2" />
            <GradientStop Color="LimeGreen" Offset="0.4" />
            <GradientStop Color="LightBlue" Offset="0.6" />
            <GradientStop Color="Blue" Offset="0.8" />
            <GradientStop Color="LightGray" Offset="1" />
        </media:RadialGradientBrush>
    </Rectangle.Fill>
</Rectangle>

A cor de cada ponto entre as marcas de gradiente é radialmente interpolada como uma combinação da cor especificada pelas duas marcas de gradiente associadas. A imagem a seguir destaca as marcas de gradiente do exemplo anterior.

Captura de tela de um gradiente radial.

Paradas de gradiente

Pincéis de 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>

Um ImageBrush renderizado.

Um ImageBrush renderizado

ImageBrush e Image fazem referência a um arquivo de origem de imagem pelo URI (Uniform Resource Identifier), em que 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 saber mais sobre a especificação de origens de imagem, os formatos de imagem utilizáveis e o empacotamento deles em um aplicativo, consulte 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. No entanto, tenha cuidado com os pincéis aplicados ao texto, pois qualquer tela de fundo poderá tornar o texto ilegível se você usar pincéis que causam sangramento na tela de fundo. 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 superfície. WebViewBrush não é adequado para todos os cenários de pincel, mas é útil nas transições de um WebView. Para saber mais, confira WebViewBrush.

XamlCompositionBrushBase

XamlCompositionBrushBase é uma classe base usada para criar pincéis personalizados que usam CompositionBrush para pintar elementos XAML da interface do usuário.

Ele permite a interoperação "suspensa" entre as camadas Windows.UI.Xaml e Windows.UI.Composition conforme descrito na Visão geral da Camada Visual.

Para criar um pincel personalizado, crie uma nova classe que herde de XamlCompositionBrushBase e implemente os métodos necessários.

Por exemplo, ele poderá ser usado para aplicar efeitos a UIElements do XAML usando um CompositionEffectBrush, como um GaussianBlurEffect ou SceneLightingEffect que controla as propriedades reflexivas de um UIElement do XAML quando estiver sendo aceso por um XamlLight.

Para obter exemplos de código, confira XamlCompositionBrushBase.

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 em que 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 Pincel 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);

Dim blueBrush as SolidColorBrush = New SolidColorBrush(Windows.UI.Colors.Blue)

Windows::UI::Xaml::Media::SolidColorBrush blueBrush{ Windows::UI::Colors::Blue() };

blueBrush = ref 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 uma BitmapImage (não um URI) ao definir ImageBrush usando código. Se a sua origem for um fluxo, use o método SetSourceAsync para iniciar o valor. Se sua origem for um URI que inclui conteúdo no seu aplicativo que usa o esquema ms-appx ou ms-resource, use o construtor BitmapImage que usa um URI. Você também poderá 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 você pode precisar de conteúdo alternativo para exibir até que a origem da imagem esteja disponível.
  • Para WebViewBrush, talvez seja necessário chamar Redraw se você tiver redefinido recentemente a propriedade SourceName ou se o conteúdo de WebView também estiver sendo alterado com código.

Para obter exemplos de código, confira WebViewBrush, ImageBrush e XamlCompositionBrushBase.