Dai blogs > Marco Leoncini > WPF

Avalon Extreme Makeover

di Marco LeonciniMarco Leoncini, in WPF,

c'eravamo lasciati con un poco attraente quadrato ruotante.
Fare meglio era più facile.
Riprendendo in mano l';esempio della scorsa settimana, ho deciso per adesso di accantonare ( solo per oggi ), Timeline e Trigger, per dedicarmi un attimo al "look".
Creiamo un Canvans, utile per posizionare gli elementi relativamente alla sua area.
All'interno aggiungiamo un elisse, che andrà a creare l'illusione di un ombra, sotto l'ex rettangolo rosso.

<!--ombra-->
<Ellipse RadiusX="150" RadiusY="30" Canvas.Top="350" Canvas.Left="-5">
<Ellipse.OpacityMask>
<RadialGradientBrush GradientOrigin="0.5,0.5" Center="0,0" RadiusX="4" RadiusY="4">
<RadialGradientBrush.GradientStops>
<GradientStop Color="Black" Offset="0" />
<GradientStop Color="transparent" Offset="0.10" />
<GradientStop Color="transparent" Offset="0.12"/>
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Ellipse.OpacityMask>
<Ellipse.Fill>
<SolidColorBrush Color="Black" />
</Ellipse.Fill>
<Ellipse.RenderTransform>
<TransformGroup>
<SkewTransform Center="0,0" AngleY="-20" AngleX="0" />
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
Utilizziamo OpacityMask, per rendere più morbidi e trasparenti i bordi dell'ombra, applichiamo SkewTransform, per dare l'illusione, di un ombra proiettata su un piano 3D.
Sopra la finata ombra il nostro rettangolo rosso cambia così:
<!--scatola-->
<Rectangle Width="280" Height="360" Name="myAnimatedRectangle" StrokeThickness="2" Canvas.Left="35">
<Rectangle.Fill>
<ImageBrush ImageSource="immagini\doom.jpg" />
</Rectangle.Fill>
<Rectangle.Stroke>
<SolidColorBrush Color="White" />
</Rectangle.Stroke>
<Rectangle.RenderTransform>
<TransformGroup>
<SkewTransform Center="0,0" AngleY="-15" AngleX="0" />
<ScaleTransform Center="0,0" ScaleX="0.7" ScaleY="1" />
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
Cambiate le dimensione, il tipo di riempimento, aggiunte un paio di trasformazioni ed infine aggiunto un sottile bordo bianco, per staccare l'elemento dallo sfondo.
Fin qua nulla che già non si potesse fare, con qualsiasi altro sistema ( SVG, Flash ecc ecc) , posizioniamo un ulteriore rettangolo, all';incirca subito dopo il "myAnimatedRectangle" .
In questa forma, simuleremo la riflessione, attraverso un VisualBrush
<!--riflesso-->
<Rectangle Width="400" Height="400" Name="Riflessione" Canvas.Top="450" RenderTransform="scale -1 -1 translate 490 320">
<Rectangle.Fill>
<VisualBrush ViewboxUnits="Absolute" Viewbox="0,0,400,480" ViewportUnits="RelativeToBoundingBox" Viewport="0,0,1,1"/>
</Rectangle.Fill>
<Rectangle.OpacityMask>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.Transform>
<SkewTransform Center="0,0" AngleY="-15" AngleX="0" />
</LinearGradientBrush.Transform>
<LinearGradientBrush.GradientStops>
<GradientStop Color="transparent" Offset="0.25" />
<GradientStop Color="Black" Offset="0.55" />
<GradientStop Color="transparent" Offset="1"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush >
</Rectangle.OpacityMask>
</Rectangle>
al finto riflesso è applicata inoltre un? OpacityMask, per simulare il comportamento di alcuni materiali, che in genere hanno uno o più punti d'attenuazione (molto dipende da quanto il materiale è liscio).
per finire è necessario aggiunge due righe di C# nel costruttore della finestra:

VisualBrush vs = (VisualBrush)this.Riflessione.Fill;
vs.Visual = this.itemCanvas;

i VisualBrush in 3 parole: sono una figata :), dentro può andare qualsiasi cosa erediti da Visual, in pratica ogni elemento del Framework.


Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

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

Nella stessa categoria
I più letti del mese