Graphic Stream

Aujourd'hui pour faire une ombre sous un contrôle en Silverlight il n'y a pas beaucoup de possibilités.

Le faire en vectoriel s'avère difficile et on a l'habitude de passer par une image PNG, ce qui n'est pas forcement le plus optimisé.

Voici un simple code qui permet de corriger cela, et en vectoriel.  Vivement l'ajout d'effet en Silverlight pour eviter de passer par ce genre de tips...

<UserControl x:Class="SmartInterface.TravelingPanel"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d"

d:DesignWidth="640" d:DesignHeight="480"

Width="340" Height="340"

RenderTransformOrigin="0.5,0.5">

<Grid x:Name="LayoutRoot">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*"/>

</Grid.ColumnDefinitions>

<!-- Six lignes qui cr‚‚ent un effet d'ombrage-->

<Border CornerRadius="16" Margin="-6" BorderThickness="1" BorderBrush="Black" Opacity="0.10" />

<Border CornerRadius="15" Margin="-5" BorderThickness="1" BorderBrush="Black" Opacity="0.20" />

<Border CornerRadius="14" Margin="-4" BorderThickness="1" BorderBrush="Black" Opacity="0.30" />

<Border CornerRadius="13" Margin="-3" BorderThickness="1" BorderBrush="Black" Opacity="0.40" />

<Border CornerRadius="12" Margin="-2" BorderThickness="1" BorderBrush="Black" Opacity="0.50" />

<Border CornerRadius="11" Margin="-1" BorderThickness="1" BorderBrush="Black" Opacity="0.60" />

<Border Name="ExternalBorder"

CornerRadius="10,10,10,10"

Background="#FF92B825"

BorderBrush="#FF6D8A17" BorderThickness="1"

RenderTransformOrigin="0.5,0.5">

<Border Name="InternalBorder"

CornerRadius="10,10,10,10"

Background="#FF92B825"

BorderBrush="#FFB7D265" BorderThickness="1">

<Canvas Clip="M0,8 C0,3.581722 3.581722,0 8,0 L328,0 C332.41827,0 336,3.581722 336,8 L336,328 C336,332.41827 332.41827,336 328,336 L8,336 C3.581722,336 0,332.41827 0,328 z" >

<Rectangle Width="336" Height="336">

<Rectangle.Fill>

<RadialGradientBrush GradientOrigin="0.197,0.58">

<RadialGradientBrush.RelativeTransform>

<TransformGroup>

<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleY="1.27" ScaleX="1.874"/>

<SkewTransform CenterX="0.5" CenterY="0.5"/>

<RotateTransform CenterX="0.5" CenterY="0.5"/>

<TranslateTransform Y="0.234" X="0.191"/>

</TransformGroup>

</RadialGradientBrush.RelativeTransform>

<GradientStop Color="#FF6D8A17" Offset="0.759"/>

<GradientStop Color="#FF92B825" Offset="1"/>

</RadialGradientBrush>

</Rectangle.Fill>

</Rectangle>

<Rectangle Width="336" Height="336">

<Rectangle.Fill>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#B2000000" Offset="0.978"/>

<GradientStop Color="#00FFFFFF" Offset="0.527"/>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

</Canvas>

</Border>

</Border>

</Grid>

</UserControl>

Les deux Border d'affilés provoquent cet effet d'ombrage réalisé relativement facilement et sutout très rapide à afficher pour le moteur graphique de votre plugin préféré. Le resultat est le suivant :

A bientôt sur ce Blog !