Let's start this tutorial with some basic UI samples taken from Longhorn samples.
XAML version:
<Border
xmlns="http://schemas.microsoft.com/2003/xaml"
xmlns:def="Definition"
Background="BlanchedAlmond"
>
<Canvas
Height="400" Width="400">
<Ellipse
CenterX="70" CenterY="75"
RadiusX="30" RadiusY="50"
Fill="yellow" Stroke="red" StrokeThickness="15"/>
<Rectangle
RectangleLeft="150" RectangleTop="20"
RectangleHeight="100" RectangleWidth="40"
Fill="lightBlue" Stroke="green"/>
<Line
X1="20" Y1="220" X2="150" Y2="240"
Stroke="black" StrokeThickness="5"/>
<Polygon
Points="220,140 270,240 170,240"
StrokeLineJoin="Round"
Stroke="black" StrokeThickness="20"/>
</Canvas>
</Border>
Now without XAML, just plain C# on steroids:
(pay attention to the UI keyword)
public UI myBorder : Border
{
Background="BlanchedAlmond";
Canvas{
Height="400"; Width="400";
Ellipse{
CenterX="70"; CenterY="75";
RadiusX="30"; RadiusY="50";
Fill="yellow"; Stroke="red"; StrokeThickness="15";
}
Rectangle{
Top="20"; Left="150"; Height="100"; Width="40";
Fill="lightBlue"; Stroke="green";
}
Line{
X1="20"; Y1="220"; X2="150"; Y2="240";
Stroke="black"; StrokeThickness="5";
}
Polygon{
Points="220,140 270,240 170,240";
StrokeLineJoin="Round";
Stroke="black";
StrokeThickness="20";
}
}
}
Which could be simplified removing extra quotes and injecting required properties.
Every rectangle needs some coordinates for size and location right?
Why waste my patience with somehting like:
<RECTANGLE RectangleWidth="40" RectangleHeight="100" RectangleTop="20" RectangleLeft="150" />
instead of Rectangle(x,y,h,w) huh?
Using required properties:
public UI myBorder : Border
{
Background=BlanchedAlmond;
Canvas(400,400) {
Ellipse(70,75,30,50) {Fill=yellow; Stroke=red; StrokeThickness=15; }
Rectangle(20,150,100,40) {Fill=lightBlue; Stroke=green;}
Lineno(20,220,150,240) {Stroke=black; StrokeThickness=5; }
Polygon{
Points="220,140 270,240 170,240";
StrokeLineJoin=round;
Stroke=black;
StrokeThickness=20;
}
}
}
Now the VB version:
Public UI myBorder Inherits Border
Background=BlanchedAlmond
Canvas(400,400)
' You can declare many properties in one line separating them by comma
Ellipse(70,75,30,50) Fill=yellow, Stroke=red, StrokeThickness=15
Rectangle(20,150,100,40) Fill=lightBlue, Stroke=green
Lineno(20,220,150,240) Stroke=black, StrokeThickness=5
' Or you can declare them as usual one line at a time
Polygon
Points="220,140 270,240 170,240"
StrokeLineJoin=round
Stroke=black
StrokeThickness=20
End Polygon
End Canvas
End UI
Better huh?
Advancing the world one giant step at a time.
