Silverlight/XAML – Learning by Coding
1: <?xml version="1.0" encoding="UTF-8"?>
2: <!-- coded by Thomas Meinike 05/08 -->
3: <Canvas xmlns="http://schemas.microsoft.com/client/2007"
4: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5: Loaded="InitColAni">
6:
7: <Canvas.Resources>
8:
9: <!-- MouseEnter-ColorAnimation | Storyboard.TargetName wird dynamisch belegt -->
10: <Storyboard x:Name="col_over" Storyboard.TargetName="">
11: <ColorAnimation Duration="00:00:01" To="#F00"
12: Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"/>
13: </Storyboard>
14:
15: <!-- MouseLeave-ColorAnimation | Storyboard.TargetName wird dynamisch belegt -->
16: <Storyboard x:Name="col_out" Storyboard.TargetName="">
17: <ColorAnimation Duration="00:00:01" To="#00C"
18: Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"/>
19: </Storyboard>
20:
21: </Canvas.Resources>
22:
23: <!-- Button 1 -->
24: <Rectangle x:Name="b1" Canvas.Left="20" Canvas.Top="20" Width="100" Height="25"
25: Fill="#00C" RadiusX="5" RadiusY="5" Cursor="Hand"/>
26: <TextBlock Canvas.Left="40" Canvas.Top="22" Foreground="#FFF" FontFamily="Lucida"
27: Text="Button 1" IsHitTestVisible="False"/>
28:
29: <!-- Button 2 -->
30: <Rectangle x:Name="b2" Canvas.Left="20" Canvas.Top="60" Width="100" Height="25"
31: Fill="#00C" RadiusX="5" RadiusY="5" Cursor="Hand"/>
32: <TextBlock Canvas.Left="40" Canvas.Top="62" Foreground="#FFF" FontFamily="Lucida"
33: Text="Button 2" IsHitTestVisible="False"/>
34:
35: <!-- Button 3 -->
36: <Rectangle x:Name="b3" Canvas.Left="20" Canvas.Top="100" Width="100" Height="25"
37: Fill="#00C" RadiusX="5" RadiusY="5" Cursor="Hand"/>
38: <TextBlock Canvas.Left="40" Canvas.Top="102" Foreground="#FFF" FontFamily="Lucida"
39: Text="Button 3" IsHitTestVisible="False"/>
40:
41: <!-- Button 4 -->
42: <Rectangle x:Name="b4" Canvas.Left="20" Canvas.Top="140" Width="100" Height="25"
43: Fill="#00C" RadiusX="5" RadiusY="5" Cursor="Hand"/>
44: <TextBlock Canvas.Left="40" Canvas.Top="142" Foreground="#FFF" FontFamily="Lucida"
45: Text="Button 4" IsHitTestVisible="False"/>
46:
47: <!-- Button 5 -->
48: <Rectangle x:Name="b5" Canvas.Left="20" Canvas.Top="180" Width="100" Height="25"
49: Fill="#00C" RadiusX="5" RadiusY="5" Cursor="Hand"/>
50: <TextBlock Canvas.Left="40" Canvas.Top="182" Foreground="#FFF" FontFamily="Lucida"
51: Text="Button 5" IsHitTestVisible="False"/>
52:
53:
54: <!-- // zusätzlich verwendeter JavaScript-Code:
55:
56: var col_over,col_out;
57:
58: function InitColAni(sender,eventArgs)
59: {
60: // Storyboards mit ColorAnimation
61: col_over=sender.findName("col_over");
62: col_out=sender.findName("col_out");
63:
64: // Rechtecke dynamisch mit den MouseEnter-/MouseLeave-Animationen versehen
65: for(var i=1;i<=5;i++)
66: {
67: // Rechtecke dynamisch mit den MouseEnter-Animationen versehen
68: sender.findName("b"+i).addEventListener("MouseEnter",function(sender,eventArgs)
69: {
70: col_over["Storyboard.TargetName"]=sender.name;
71: col_out.stop();
72: col_over.begin();
73: });
74:
75: // Rechtecke dynamisch mit den MouseLeave-Animationen versehen
76: sender.findName("b"+i).addEventListener("MouseLeave",function(sender,eventArgs)
77: {
78: col_out["Storyboard.TargetName"]=sender.name;
79: col_out.begin();
80: col_over.stop();
81: });
82:
83: // Rechtecke dynamisch mit Aktion versehen
84: sender.findName("b"+i).addEventListener("MouseLeftButtonDown",function(sender,eventArgs)
85: {
86: alert("Button "+sender.name.substring(1)+" wurde geklickt.");
87: });
88: }
89:
90: // alternativ, falls Storyboard.TargetName bei ColorAnimation angegeben
91: // col_over.children.getItem(0)["Storyboard.TargetName"]=sender.name;
92: // bzw.
93: // col_out.children.getItem(0)["Storyboard.TargetName"]=sender.name;
94: }
95:
96: -->
97:
98: </Canvas>
[zum Anfang]
