mercoledì 28 novembre 2007

xaml - homer simpson su silverlight

Ecco un disegnino per iniziare ad imparare ad usare lo xaml.. quello che si vede qua giù è solo un preview in jpeg, la versione in xaml è invece scaricabile da questo link. Ricordo che per vedere l'esempio in funzione è necessario installare il plug-in silverlight.



Di seguito il codice xaml



<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="500" Height="500">

<Line
X1="100"
Y1="350"
X2="300"
Y2="350"
Stroke="Black"
StrokeThickness="2"
Opacity="0.5"
StrokeDashArray="10 20 2 10 5 20"/>

<Ellipse
Canvas.Left="150"
Canvas.Top="350"
Fill="LightGray"
Height="20"
Width="100"
StrokeThickness="2"
Stroke="LightGray" />

<Ellipse
Canvas.Left="80"
Canvas.Top="355"
Width="200"
Height="10"
Fill="LightGray"
Stroke="LightGray"/>

<Canvas Canvas.Left="155" Canvas.Top="70">

<Path Data="M -7 80
L 0 40
L 0 0
A 20 16 0 0 1 60 0
L 60 15
L 62 16
L 64 20
L 60 20
L 45 45
L 28 92Z" Stroke="Black">
<Path.Fill>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="#FFD000" Offset="0.0" />
<GradientStop Color="#FFFF00" Offset="0.25" />
</LinearGradientBrush>
</Path.Fill>
</Path>

<!-- orecchio -->
<Path Data="M 4 32
A 6 4 0 1 0 5 42"
Stroke="black" />

<Path Data="M 4 35
L 0 36
L 2 38"
Stroke="black" />

<!-- capelli -->
<Path Data="M -5 30
L -4 20
L 0 30
L 4 20
L 5 30"
Stroke="black" />

<Path Data="M 22 -16
A 5 5 0 0 1 50 -18"
Stroke="black" />

<Path Data="M 15 -16
A 5 4 0 0 1 42 -22"
Stroke="black" />

<!-- naso -->
<Path Data="M 50 36
L 58 39
A 3 2 0 0 1 56 50
L 43 45"
Stroke="black" Fill="yellow" />

<!-- muso -->
<Path Data="M 58 66
L 58 50
L 45 46
A 12 10 0 1 0 35 75
L 44 74
L 48 76
L 54 72
A 1 1 0 1 0 58 66"
Stroke="black">
<Path.Fill>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="#876516" Offset="0.10" />
<GradientStop Color="#DFAF40" Offset="0.70" />
</LinearGradientBrush>
</Path.Fill>
</Path>

<Path Data="M 52 71
L 46 72
L 48 74 Z"
Stroke="black" Fill="black" />

<Canvas.RenderTransform>
<RotateTransform Angle="-8" CenterX="0" CenterY="40" />
</Canvas.RenderTransform>

</Canvas>

<Canvas Canvas.Left="212" Canvas.Top="90">
<Ellipse Canvas.Left="-10" Canvas.Top="-10" Width="20" Height="20" Stroke="black" Fill="white" />
<Ellipse Canvas.Left="5" Canvas.Top="5" Width="2" Height="2" Stroke="black" Fill="black" />
</Canvas>

<Canvas Canvas.Left="200" Canvas.Top="92">
<Ellipse Canvas.Left="-10" Canvas.Top="-10" Width="20" Height="20" Stroke="black" Fill="white" />
<Ellipse Canvas.Left="5" Canvas.Top="5" Width="2" Height="2" Stroke="black" Fill="black" />
</Canvas>


<!-- Braccio -->

<Canvas Canvas.Left="185" Canvas.Top="197" >

<Path Data="M 0 0
C -18 -10 -18 -50 20 -30
L 0 0"
Stroke="black">
<Path.Fill>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="#DDDDDD" Offset="0.10" />
<GradientStop Color="#FFFFFF" Offset="0.30" />
</LinearGradientBrush>
</Path.Fill>
</Path>

<Path Data="M 1 -2
L 19 -28
L 30 -20
L 55 -30
C 58 -37 54 -40 52 -42
L 54 -45
L 57 -46
L 61 -38
L 61 -42
L 64 -44
L 68 -44
L 68 -47
L 71 -49
L 74 -49
L 76 -47
C 70 -30 84 -35 87 -35
L 89 -32
L 89 -31
L 80 -28
C 82 -28 69 -15 66 -16
C 32 22 20 5 1 -2"
Stroke="black">
<Path.Fill>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="#FFD000" Offset="0.0" />
<GradientStop Color="#FFFF00" Offset="0.22" />
</LinearGradientBrush>
</Path.Fill>
</Path>

<Path Data="M 68 -30
C 72 -30 70 -20 68 -22"
Stroke="black"/>

<Path Data="M 65 -39
L 70 -39
L 71 -40
L 71 -44
L 66 -44"
Stroke="black"/>


<Canvas.RenderTransform>
<RotateTransform Angle="-15" CenterX="0" CenterY="0" />
</Canvas.RenderTransform>

</Canvas>


<!-- pancia -->
<Canvas Canvas.Left="154" Canvas.Top="110">

<!-- busto -->
<Path Data="M 0 40
C -10 40 -20 70 -20 70
C -30 80 -45 100 -40 120
C -30 140 50 140 70 130
C 85 120 50 60 35 49Z"
Stroke="black">
<Path.Fill>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="#DDDDDD" Offset="0.10" />
<GradientStop Color="#FFFFFF" Offset="0.30" />
</LinearGradientBrush>
</Path.Fill>
</Path>

<!-- colletto -->
<Path Data="M -2 21
L -10 41
L 25 51
L 30 31Z"
Stroke="black">
<Path.Fill>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="#DDDDDD" Offset="0.10" />
<GradientStop Color="#FFFFFF" Offset="0.30" />
</LinearGradientBrush>
</Path.Fill>
</Path>

<Path Data="M 26 51
L 31 31
L 35 48
L 40 31
L 45 33
L 35 51Z"
Stroke="black">
<Path.Fill>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="#DDDDDD" Offset="0.10" />
<GradientStop Color="#FFFFFF" Offset="0.30" />
</LinearGradientBrush>
</Path.Fill>
</Path>

<!-- cravatta -->
<Path Data="M 28 42
L 42 42
L 44 52
L 34 52
L 34 47
L 27 47Z"
Fill="red" Stroke="black"/>

<Path Data="M 34 52
L 44 52
L 75 100
L 70 120
L 40 110Z"
Fill="red"
Stroke="black" />

</Canvas>


<!-- Braccio -->

<Canvas Canvas.Left="155" Canvas.Top="197" >

<Path Data="M 0 0
C -18 -10 -18 -50 20 -30
L 0 0"
Stroke="black">
<Path.Fill>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="#DDDDDD" Offset="0.10" />
<GradientStop Color="#FFFFFF" Offset="0.30" />
</LinearGradientBrush>
</Path.Fill>
</Path>

<Path Data="M 1 -2
L 19 -28
L 30 -20
L 55 -30
C 58 -37 54 -40 52 -42
L 54 -45
L 57 -46
L 61 -38
L 61 -42
L 64 -44
L 68 -44
L 68 -47
L 71 -49
L 74 -49
L 76 -47
C 70 -30 84 -35 87 -35
L 89 -32
L 89 -31
L 80 -28
C 82 -28 69 -15 66 -16
C 32 22 20 5 1 -2"
Stroke="black">
<Path.Fill>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="#FFD000" Offset="0.0" />
<GradientStop Color="#FFFF00" Offset="0.22" />
</LinearGradientBrush>
</Path.Fill>
</Path>

<Path Data="M 68 -30
C 72 -30 70 -20 68 -22"
Stroke="black"/>

<Path Data="M 65 -39
L 70 -39
L 71 -40
L 71 -44
L 66 -44"
Stroke="black"/>

</Canvas>


<!-- Gambe -->

<Canvas Canvas.Left="115" Canvas.Top="230">

<!-- gamba destra -->

<!-- scarpa -->
<Path Data="M 60 110
L 100 110
C 100 112 110 110 120 125
C 110 130 90 130 80 127
L 78 130
L 60 130Z"
Stroke="black">
<Path.Fill>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="#000000" Offset="0.0" />
<GradientStop Color="#5E2F00" Offset="0.20" />
</LinearGradientBrush>
</Path.Fill>
</Path>

<Path Data="M 60 125
L 115 125"
Stroke="black"/>

<Path Data="M 100 20
C 120 70 105 90 100 110
C 105 112 65 112 60 110
C 65 90 70 70 55 40"
Stroke="black">
<Path.Fill>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="#004A95" Offset="0.10" />
<GradientStop Color="#0080FF" Offset="0.50" />
</LinearGradientBrush>
</Path.Fill>
</Path>

<Path Data="M 102 100
C 105 102 35 102 60 100"
Stroke="black"/>

<!-- gamba sinistra -->

<!-- scarpa -->
<Path Data="M 30 110
L 70 110
C 70 112 80 110 90 125
C 80 130 60 130 50 127
L 48 130
L 30 130Z"
Stroke="black">
<Path.Fill>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="#000000" Offset="0.0" />
<GradientStop Color="#5E2F00" Offset="0.20" />
</LinearGradientBrush>
</Path.Fill>
</Path>

<Path Data="M 30 125
L 87 125"
Stroke="black"/>

<Path Data="M 0 0
C 10 20 90 20 110 10
C 120 15 80 40 70 40
C 90 70 75 90 70 110
C 75 112 35 112 30 110
C 35 90 50 70 25 40
C 8 38 -5 2 0 0"
Stroke="black">
<Path.Fill>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="#004A95" Offset="0.10" />
<GradientStop Color="#0080FF" Offset="0.50" />
</LinearGradientBrush>
</Path.Fill>
</Path>

<Path Data="M 72 100
C 75 102 35 102 30 100"
Stroke="black" />
</Canvas>

<Rectangle Width="499" Height="499" Stroke="Blue" StrokeThickness="3" />

<Canvas.Background>
<SolidColorBrush x:Name="mySolidColorBrush" Color="White" />
</Canvas.Background>

<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<BeginStoryboard>
<Storyboard x:Name="ColorStoryboard">

<!-- Animate the background color of the canvas from red to green over 4 seconds. -->
<ColorAnimation BeginTime="00:00:00" Storyboard.TargetName="mySolidColorBrush" Storyboard.TargetProperty="Color" From="White" To="Green" Duration="0:0:4" />

</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
</Canvas>