|
Basic Beginners Guide to Writing XAML for Silverlight (Silverlight) |
|
|
Written by: Justin Rich
Basic Beginners Guide to Writing XAML for SilverlightXAML (pronounced zamole), which stands for Extensible Application Markup Language is what we use when we're drawing the output for Silverlight applications. You can get XAML authoring tools such as Microsoft Expression Blend, but most of us developers who are learning to program in Silverlight probably don't have that tool or any others. For now, in starting your learning experience, you're going to have to write the XAML. Visual Studio 2008 allows us to drag & drop some of the controls from the Toolbox to the XAML window, saving some time, but because there isn't a properties window yet, you have to know what the commands are to make edits. When you start, you should see something like this:
You will want to drag your new controls or type them into the Grid section of the basic layout. Above, I've converted the background color to a basic blue.
First, I'm going to drag a TextBlock in:
<TextBlock></TextBlock>
This is much like a label to ASP.Net pages (.aspx). Well, in order to actually see it on your preview window, you'll need to add things to it, such as the name of the control, what you want it to say, the font size, and font family:
<TextBlock x:Name="Text1" Text="Time: " FontSize="16" FontFamily="Arial" ></TextBlock>
Now, in your codebehind, this control can be reffered to as Text1 and it's intellisense properties will appear. Just like a label, you can dynamically change it's .Text property.
Secondly, I'm going to draw a line to show you how to configure a line on the screen:
<Line x:Name="Line1" StrokeThickness="2" Stroke="White" X1="20" Y1="20" X2="200" Y2="100" MouseEnter="Line_MouseEnter"></Line>
Here, I named it Line1, gave it a thickness of 2 pixels, colored it white, set the first point of the line to (20,20) and the end of the line to (20,200). These points represent the x & y axis and are always measured from the top left. So your line should be close to the top left and sloping down and away from it.
In addition to styling, I've added a MouseEnter property. This controls a block of code that gets executed when the mouse enters the plane of this item (basically a mouseover). Line_MouseEnter is an event in my code behind on Page.xaml.vb:
Private Sub Line_MouseEnter(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseEventArgs)
Line1.X1 += 20
Line1.Y1 += 20
Text1.Text = "Time: " & TimeOfDay
End Sub
From this basic function, every time you mouse over the line, the time of day should come out on your textblock and the coordinates of the starting point of your line will change. This is the basic concept of using XAML and writing an application to modify it. |
|
|
|
|
|