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

Coordenada | Posição |
0,0 | Canto superior esquerdo |
1,1 | Canto 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