Para entrar no clima de copa, criei uma aplicação em WPF usando Viewbox para o svg. O Viewbox é usado para esticar ou redimensionar um elemento filho (neste caso uma imagem).

Direção em que um gradiente transiciona de uma cor a outra

CoordenadaPosição

0,0
Canto superior esquerdo
1,1Canto inferior direito

A classe LinearGradientBrush pinta uma área com um gradiente linear. Com ele é possível escolher várias cores e fazer o gradiente no sentido que se encaixa em seu projeto. Para o exemplo, foi escolhida uma configuração em que a cor muda do canto superior esquerdo para o canto inferior direito. Na imagem abaixo, o LinearGradientBrush foi nomeado com o x:Key de GreenFootballBrush, de forma que possa ser aplicado como estilo em uma imagem.

<!-- Cor gradiente para o estilo de futebol verde -->
        <LinearGradientBrush x:Key="GreenFootballBrush"
                             StartPoint="0,0"
                             EndPoint="1,1">
            <GradientStop Color="#32CD32"
                          Offset="0" />
            <GradientStop Color="#006400"
                          Offset="1" />
        </LinearGradientBrush>

APLICAÇÃO WPF PARA A EXIBIÇÃO DAS IMAGENS

O screenshot abaixo mostra a aplicação WPF em funcionamento. São três colunas, cada uma com uma imagem e um gradiente diferente aplicado.

O código XAML mostra o Viewbox, e o elemento filho é o Path, onde o atributo Data contêm as coordenadas para fazer o desenho, neste caso de uma bola de futebol. O atributo Fill contêm a referência para o LinearGradientBrush, que foi discutido anteriormente. Para fazer a referência, é só utilizar {StaticResource GreenFootballBrush}. Sendo que GreenFootballBrush foi o nome atribuído no x:Key do gradiente.

<Viewbox Width="300"
                 Height="300">
            <!-- The Path element defines the shape of the football using a complex path data string -->
            <!-- O elemento Path define a forma da bola de futebol usando uma string de dados de caminho complexa -->
            <Path Fill="{StaticResource GreenFootballBrush}"
                  Data="M 254.73255,527.97855....." />
        </Viewbox>
Para ver o projeto completo, acesse ele no GitHub:

https://github.com/teresathompson/FootballStyle

REFERÊNCIAS

MICROSOFT. Como pintar uma área com um gradiente linear. Microsoft Learn, [s.l.], 2025. Disponível em: https://learn.microsoft.com/pt-br/dotnet/desktop/wpf/graphics-multimedia/how-to-paint-an-area-with-a-linear-gradient. Acesso em: 16 jun. 2026.

MICROSOFT. ViewBox Class (Windows.UI.Xaml.Controls). Microsoft Learn, [s.l.], 2025. Disponível em: https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.viewbox?view=winrt-28000. Acesso em: 16 jun. 2026.


Leave a Reply

Your email address will not be published. Required fields are marked *