Realizzare un effetto di gradiente radiale con la Universal Windows Platform

di , in Windows 10,

Chi proviene da WPF (o ancora prima da WinForms) rischia di trovarsi spesso spiazzato poiché approcciando la Universal Windows Platform rischia di non trovare determinati controlli alla quale è già familiare, sia che essi siano nativi sia che siano derivati da componenti di terze parti. Uno di questi componenti è senz'altro System.Windows.Media.GradientBrush, utilizzato, al contrario del LinearBrush, per realizzare effetti di luce e colori sotto forma di gradiente radiale.

Per realizzare lo stesso nella Universal Windows Platform abbiamo bisogno del Windows Community Toolkit e, prima di tutto, è necessario aggiungere i pacchetti di NuGet Microsoft.Toolkit.Uwp e Microsoft.Toolkit.Uwp.UI che ci danno accesso ai controlli da utilizzare, quindi importiamo il namespace necessario a livello di pagina XAML:

xmlns:media="using:Microsoft.Toolkit.Uwp.UI.Media"

Una volta importato il namespace, è possibile aggiungere il controllo RadialGradientBrush come riempimento per un qualsiasi oggetto di tipo UIElement. Nel caso dell'esempio seguente, viene applicato per riempire il contenuto di un Rectangle:

<Rectangle Width="300" Height="300">
  <Rectangle.Fill>
    <media:RadialGradientBrush 
            AlphaMode="Premultiplied"
            RadiusX="0.2" RadiusY="0.2"
            SpreadMethod="Reflect">
        <GradientStop Color="Red" Offset="0" />
        <GradientStop Color="Transparent" Offset="0.25" />
        <GradientStop Color="Yellow" Offset="0.50" />
        <GradientStop Color="Transparent" Offset="0.75" />
        <GradientStop Color="Green" Offset="1.0" />
    </media:RadialGradientBrush>
  </Rectangle.Fill>
</Rectangle>

La collezione di colori da mostrare come gradiente è impostata all'interno della proprietà GradientStops ma, un particolare da evidenziare per quanto riguarda l'esempio, è il riferimento al valore di AlphaMode: se questo è impostato al valore consigliato di Premultiplied si otterrà una miglior transizione tra i colori e l'effetto trasparente mentre, impostandolo al valore Straight si otterrà un comportamento simile a quanto avveniva in WPF.

Il caso evidenziato produce un risultato simile al seguente:

Commenti

Visualizza/aggiungi commenti

Realizzare un effetto di gradiente radiale con la Universal Windows Platform (#240)
| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi