Silverlight/XAML – Learning by Coding
1: <?xml version="1.0" encoding="UTF-8"?>
2: <!-- coded by Thomas Meinike 03/08 -->
3: <Canvas xmlns="http://schemas.microsoft.com/client/2007"
4: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5: Loaded="InkP_Init">
6:
7: <TextBlock Canvas.Left="20" Canvas.Top="20" FontSize="14" Foreground="#000"
8: Text="Innerhalb des Rechtecks kann mittels Mauscursor gemalt werden."/>
9:
10: <TextBlock Canvas.Left="20" Canvas.Top="560" FontSize="14" Foreground="#00C"
11: Text="Zeichenfläche leeren" MouseLeftButtonDown="InkP_Clear"
12: MouseEnter="TextOver" MouseLeave="TextOut"/>
13:
14: <Rectangle Canvas.Left="20" Canvas.Top="50" Width="500" Height="500" Fill="#FFF" Stroke="#CCC"/>
15:
16: <InkPresenter x:Name="ink_pr"
17: Canvas.Left="20" Canvas.Top="50" Width="500" Height="500" Background="transparent"
18: MouseLeftButtonDown="InkP_MDown" MouseLeftButtonUp="InkP_MUp" MouseMove="InkP_MMove">
19:
20: <InkPresenter.Strokes>
21: <Stroke>
22: <Stroke.DrawingAttributes>
23: <DrawingAttributes Color="#FF0" OutlineColor="#090" Height="1" Width="1"/>
24: </Stroke.DrawingAttributes>
25:
26: <Stroke.StylusPoints><!-- Vorgabe von Beispielpunkten -->
27: <StylusPoint X='149' Y='19'/><StylusPoint X='150' Y='19'/><StylusPoint X='152' Y='20'/>
28: <StylusPoint X='156' Y='21'/><StylusPoint X='158' Y='24'/><StylusPoint X='162' Y='27'/>
29: <StylusPoint X='166' Y='30'/><StylusPoint X='174' Y='35'/><StylusPoint X='181' Y='42'/>
30: <StylusPoint X='189' Y='47'/><StylusPoint X='198' Y='53'/><StylusPoint X='205' Y='58'/>
31: <StylusPoint X='213' Y='62'/><StylusPoint X='217' Y='65'/><StylusPoint X='220' Y='68'/>
32: <StylusPoint X='223' Y='70'/><StylusPoint X='225' Y='73'/><StylusPoint X='226' Y='73'/>
33: <StylusPoint X='227' Y='76'/><StylusPoint X='229' Y='76'/><StylusPoint X='230' Y='77'/>
34: <StylusPoint X='231' Y='76'/><StylusPoint X='234' Y='72'/><StylusPoint X='239' Y='68'/>
35: <StylusPoint X='245' Y='64'/><StylusPoint X='254' Y='58'/><StylusPoint X='265' Y='52'/>
36: <StylusPoint X='277' Y='47'/><StylusPoint X='291' Y='37'/><StylusPoint X='300' Y='30'/>
37: <StylusPoint X='311' Y='25'/><StylusPoint X='318' Y='23'/><StylusPoint X='322' Y='21'/>
38: </Stroke.StylusPoints>
39: </Stroke>
40: </InkPresenter.Strokes>
41:
42: </InkPresenter>
43:
44:
45: <!-- // zusätzlich verwendeter JavaScript-Code:
46:
47: var sl_ctrl,ink_pr,dyn_stroke=false; // global
48:
49: function InkP_Init(sender,eventArgs)
50: {
51: sl_ctrl=sender.getHost();
52: ink_pr=sender.findName("ink_pr");
53: }
54:
55:
56: function InkP_MDown(sender,eventArgs)
57: {
58: ink_pr.captureMouse();
59: sl_ctrl=sender.getHost();
60:
61: dyn_stroke=sl_ctrl.content.createFromXaml("<Stroke></Stroke>");
62: dyn_stroke.StylusPoints.addStylusPoints(eventArgs.getStylusPoints(ink_pr));
63: dyn_stroke.DrawingAttributes.Color="#FF0";
64: dyn_stroke.DrawingAttributes.OutlineColor="#090";
65: dyn_stroke.DrawingAttributes.Height=1;
66: dyn_stroke.DrawingAttributes.Width=1;
67:
68: ink_pr.Strokes.add(dyn_stroke);
69: }
70:
71:
72: function InkP_MUp(sender,eventArgs)
73: {
74: dyn_stroke=false;
75: ink_pr.releaseMouseCapture();
76: }
77:
78:
79: function InkP_MMove(sender,eventArgs)
80: {
81: var pos,x_akt,y_akt;
82:
83: pos=eventArgs.getPosition(null);
84: x_akt=pos.x;
85: y_akt=pos.y;
86:
87: if(dyn_stroke && x_akt>=20 && x_akt<=520 && y_akt>=50 && y_akt<=550)
88: {
89: dyn_stroke.StylusPoints.addStylusPoints(eventArgs.getStylusPoints(ink_pr));
90: }
91: }
92:
93:
94: function InkP_Clear(sender,eventArgs)
95: {
96: for(var i=ink_pr.Strokes.count-1;i>=0;i=i-1)
97: {
98: var stroke_child=ink_pr.Strokes.getItem(i);
99: ink_pr.Strokes.remove(stroke_child);
100: }
101: }
102:
103: -->
104:
105: </Canvas>
[zum Anfang]
