View
232
Download
0
Category
Preview:
Citation preview
8/6/2019 Beta Tutorial 5 Blend
1/24
5
Silverlight 2 Beta 2 Tutorial Introducing Expression BlendForSilverlightDevelopers
ByJesse Liberty
Expression Blend For Developers
Beginning with version 2.5 (currently in Preview Edition) building Silverlight 2
applications, and especially assembling the User Interface components such as items
from the toolbox, and layout controls, is easier than ever.
A Note on This Tutorial. The history of the material for this tutorial isthat Scott Guthrie wrote a terrific introduction to this material at the
end of February, which he gave me permission to turn into a series of
videos, currently (or soon to be) available on Silverlight.NET. This
tutorial completes the circle by building on the videos and integrating
the material into the Silverlight Tutorial series.
The project were setting out to build is very similar to the Silverlight chat service built
by ScottGu, and is shown in Figure 5-1
8/6/2019 Beta Tutorial 5 Blend
2/24
Figure 5-1. Completed Application
Getting StartedThe best way to get started is by opening Expression Blend.
This tutorial was written with Silverlight 2 Beta 2 and Expression
Blend 2.5 June Preview.
The first thing youll see is the New Project window. Choose Silverlight 2 Application,
set your language to Visual Basic and choose a location for your new project, which well
name BlendForSilverlight, as shown in Figure 6-2
8/6/2019 Beta Tutorial 5 Blend
3/24
Figure 5-2. Creating the New Project
The Solution Files
Take a look in the upper right hand corner. The solution, project and other files created
by Blend are identical to the files created by Visual Studio 2008. In fact; there is no
exporting/importing between the two; you can open both development environments on
the same files simultaneously and they will both work perfectly (see figure 6-3)
Figure 5-3. Blend Files
A Very Quick Tour
The upper right hand corner not only contains the files, but also contains the properties
window, the resources window and, below these, the data window. The central area has
8/6/2019 Beta Tutorial 5 Blend
4/24
the Art Board (the design surface and the Xaml (markup) which can be split as shown
in Figure 6-4
Figure 5-4. Design Surface in Split Mode
Ive added highlighting in the upper right hand corner to point out the controls that allow
you to switch among design, Xaml and split mode.
The upper left hand corner contains the Interaction panel and the toolbar. Many of the
tools in the tool bar have a small mark in the lower right hand corner indicating that they
can be expanded to find related tools. For example, expanding the grid tool displays all
the layout controls as shown in figure 6-5
8/6/2019 Beta Tutorial 5 Blend
5/24
Figure 5-5. Expanding the Grid Tool
The Chevron tool allows access to all the controls, including any user controls, custom
controls or third party controls (be sure to click Show All) as shown in Figure 6-6
Figure 5-6. Chevron Expanded
Note that from within the Asset Library exposed by expanding the Chevron you can also
search for the control you want, and by clicking on the details radio button you can
determine which library a control is in.
8/6/2019 Beta Tutorial 5 Blend
6/24
Chat Application First Steps
Begin by switching to design view, and then hold the control key and use the mouse
wheel to zoom out so that you can see the entire grid.
If your mouse doesnt have a wheel, you can zoom by picking a value
(or filling in an arbitrary value) at the bottom of the design window or
by using the menu choices ViewZoom In and ViewZoom Out
You can move the surface by clicking on the hand and then using the mouse to click and
drag or by using the scroll bars.
Take a look at the upper right hand corner of your grid, as shown in figure 6-7
Figure 5-7. Upper left corner of the grid
Hovering over the upper left hand corner will tell you if you are in grid layout mode or
Canvas layout mode. If you are in canvas layout, clicking will toggle you back to grid
layout mode.
You can create rows and columns just by sliding along the margins and clicking where
you want the rows and margins placed, as shown in figure 6-8
Figure 5-8. Creating a Row using The Mouse
Immediately after I click, an open lock appears above and below my new row line. Ill
add two lines, one for the top row and one for the bottom; thus implicitly creating a
middle row, and thus three locks as shown in figure 6-9.
8/6/2019 Beta Tutorial 5 Blend
7/24
Figure 5-9. Creating the bottom row
Note that immediately after the row is created, not only are the locks shown but the
cursor changes shape to indicate that you can easily move, and thus resize the rows.
The open locks indicate that the rows will resize as the browser (inside of which your
Silverlight application will run) is resized. We want the middle row to do so, but we want
the top and bottom row to remain of fixed size, so click on the top and bottom lock, and
then click on split view to examine the effects on the XAML, as shown in figure 6-10.
8/6/2019 Beta Tutorial 5 Blend
8/24
Figure 5-10. Middle Row has Star Sizing
Note that (on line 10) the middle row definition has its Height property set to * (star)
indicating that it will take up the remaining room after the other rows are allocated.
Creating the Columns
Lets create two columns, a smaller right column that has a fixed size and a larger
floating size left column. Try this yourself without additional help.
Creating the Background Color
Wed like to give the entire application a light blue background, but to make it a bit more
attractive, well use a linear gradient brush. To do this, please follow these numbered
steps, reflected in Figure 6-11.
1. Click on the grid (Layout Root) in the Interaction Panel2. Click on the properties panel and expose the Brushes subpanel. Click on the
Background brush
3. Click on the Gradient Brush button4.
Add stops along the gradient by clicking and then
5. manipulating the color bar and6. Moving the color dot for precise color choices
8/6/2019 Beta Tutorial 5 Blend
9/24
Figure 5-11. Adding a Linear Gradient By the Numbers
Adding A Send Buton
The next step is to add a button to the lower right hand corner. Click on a button on the
toolbar, drag it to approximate size in the area and then click in the properties window.
Next, open the Layout subpanel and set the Width and Height to Auto and set a small
value (e.g., 4) for the Margin, all around. This will fill the area, but with a reasonable
margin from the edges of the column and row.
The value you put in a property box does not take effect until you leave
that box (e.g., using tab)
There are a few things to notice about the Layout Panel (figure 6-12)
Figure 5-12. Setting the Button Layout with the Layout Panel
8/6/2019 Beta Tutorial 5 Blend
10/24
First, you can set the Width and/or Height to auto by pressing the button to the right of
the field. Second, when you set a specific (non-default) value next to a property, a white
dot appears (there are 5 white dots in Figure 6-12).
Take a look at the Xaml once you have these values set,
Blend has translated your choices into Xaml that will create the look youve chosen. We
have, however, forgotten to change the Content property from Button to Send. The
easiest way to do so is to type Content into the property Search box,
At co you will get back Column, Horizontal Content, Data Content and
Content as shown in Figure 6-13
Figure 5-13. Search with co
Refine your search just a bit further, and you reduce the complexity a bit, as shown in 6-
14,
8/6/2019 Beta Tutorial 5 Blend
11/24
Figure 5-14. Refined Search
In any case, remove the word Button from the Content field and put in the word Search.
Your text task is to set the font size to 18 and the font family to Verdana. Oh, and set it to
Bold. (No cheating! Do this in design, not in Xaml!) (Youll find the image on the next
page)
Some (few) controls have a text property and most have a content
property. Those with a content property often fill that property with
text, but they are free to fill it with almost anything else, includingother controls. This is demonstrated in the Tutorial on Styles and
Templates
8/6/2019 Beta Tutorial 5 Blend
12/24
Figure 5-15. Setting the Font Family and More
8/6/2019 Beta Tutorial 5 Blend
13/24
Creating The Rounded Rectangle Input Area
Examining the finished application shown at the top of the tutorial reveals that the input
area has a rounded rectangle as shown in figure 6-16
Figure 5-16. Input Area is a Rounded Rectangle
This is slightly tricky to achieve since the TextBox does not have a setting for rounding
its corners. It turns out, however, that the Border control does.
Our tricky solution, therefore, is to put a TextBox within a border, and letting the Border
handle the look and feel and the TextBox mange the text handling!
Step one is to fill the grid square with a border. Click on the Grid pallet and expand it to
click on a border, and then drag out the border into the appropriate grid location (well
size it properly with the properties window).
Once in the grid, set its Width and Height to Auto, and its Margin to 4 all around, as
shown in figure 6-17
Figure 5-17. Sizing the Border in the Layout PanelLets set the background brush for the border, by setting the values in the Brushes
property window by hand to 255, 255, 255 with an Alpha (opacity) of 45%.I highly
recommend doing these one by one. AS you set the red value the background turns Red.
When you set the Green background to 255 as well, the background turns bright yellow.
Add 255 for Blue and the background turns bright white. Finally, knocking the Alpha
down to 45% gives us the pale shade were looking for, as shown in figure 6-18
8/6/2019 Beta Tutorial 5 Blend
14/24
Figure 5-18. Setting the Background Brush
If you look carefully under the settings for RGBA youll find the hex value #72FFFFFF
which is the equivalent of setting the four values independently (with the alpha value
first).
Our Border control also needs its Border brush set (in 6-18 it is set to No Brush). The
values we want (which it may well default to) are Alpha of 100% and full black(00,00,00).
The Border brush wont appear unless we set its thickness (which defaults to zero); which
we can do in the Appearance panel. Lets set it to 2. This is also where we get to set the
rounded corners, which well set to 5 as shown in Figure 6-19.
Figure 5-19. Setting the Border Thickness and Rounded Corners
Placing the Text Box
The border has the rounded corners, but as noted above, a border cant accept text input.
For that we need a text box, but we dont want the text box to overwrite the background
we just carefully placed in the border.
Zap! All we need to do is make the text box reside within the border, and set it to
transparent!
To place the text box within the border, double click on the border in the Interaction
panel, signaling to Blend that it is now the container for the next control. That is, the next
control we add will not be a sibling, but a child of the border. The yellow rectangle will
jump from Layout Root to the Border as feedback that it is now the active container.
When you drag the text box in, it will be placed inside the text box, as shown in figure 6-
20, both from a design view and a Xaml view.
8/6/2019 Beta Tutorial 5 Blend
15/24
Figure 5-20. Text Box Nested within Border
Review of key points
There are a few new concepts all put together in this one construct, so a quick review is
in order:
The border is set with a background color and the rounded corners The text box is nested fully within the border, and the text boxs background
opacity is set to 0 (making it transparent). That allows the text box to pick up
the background color and rounded corners of the border
In order to ensure that the text box will be nested within the border, double clickon the border in the Interaction panel surrounding the border with a yellow box
and thus indicating that it is now the container.
Creating the Top RowWell do the same thing on the top row, except that instead of using a TextBox well use
a textblock, setting the text inside to a font family of Comic Sans MS, a font size of 48
and the text of your own name.
To set the upper right hand corner, begin by double clicking on the LayoutRoot to make
it the container, then click on an Image Control in the Chevron. Set the source property to
point to any image file on your disk.
Creating the Conversation Area
The final part of our IM application is the middle: the conversation area, which will in
fact be a list box. Well place that in a border that will stretch across both columns. You
can place that manually, just by stretching a border across both columns using the mouse.Youll notice as you go to refine the placement in the Layout panel that the ColumnSpan
has been set to 2, and all you need do is fix the Margins to make the border fit snugly
(e.g., with a margin of 4 all around.)
8/6/2019 Beta Tutorial 5 Blend
16/24
Youll want to set the background to a solid color ( FF03588D works nicely) and once
again well set the corners to a radius of 5 all around, as well as setting the border to
black and a thickness of 2.
Once again, double click on the new border, and drag a list box (from the chevron) inside
the new border, and set it to fill the border.
Adding dummy data
It is convenient to have dummy data to fill the list box, and the easiest way to do that is in
Xaml. This is a good opportunity to switch to Visual Studio, so save all the files in Blend
but leave blend open and switch over to the project in Visual Studio 2008.
If your project was already open, youll be notified that it has changed, say yes to accept
the changes, and you should find that all the files are shown and your Page.xaml looks
impressively similar to what you just saw in Blend.
Figure 5-21. Examining the Project in Visual Studio
You can now easily populate your list box with dummy list items,
8/6/2019 Beta Tutorial 5 Blend
17/24
Save your file and switch back to Blend (no need to close Visual Studio 2008). When you
do, Blend lets you know the files were modified,
Figure 5-22. Blend letting you know the files were modified
Click yes, and your dummy data should be visible.
You can press F5 to run the program as an interim check. Youll find that the image
doesnt appear unless you place a copy of the image file in the bin/debug directory as
well. Thats not a big problem, however, as well be binding to the source for the image
file.
Building the Business Layer
To support the exchange of instant messages, we will build (or, to be more honest, stubout) a service that will identify the remote users name, image and that will manage the
messaging.
Because we are more interested in Silverlight than in building the service (at least for the
purposes of this tutorial) well simplify this by creating a ChatSession class that will
stand in for all the networking, sockets and other plumbing, and which will maintain
instead a collection of Message objects. As you can guess, well also create, therefore, a
Message class to represent each message transmitted by the service.
Because Visual Studio 2008 is better suited to programming than is Blend, well do this
work in Visual Studio 2008 but well get there by right clicking on the solution in Blend
and choosing Edit In Visual Studio, as shown in figure 6-23
8/6/2019 Beta Tutorial 5 Blend
18/24
Figure 5-23. Moving to Visual Studio from Blend
Once in Visual Studio 2008 right click on the project and choose Add Class. In the new
items dialog select class and name your new class ChatMessage as shown in figure 6-24
Figure 5-24. Adding the Chat Message Class
The Chat Message class is pretty straight forward, consisting only of two properties,
PublicClass ChatMessage
Private privateUserName AsString
8/6/2019 Beta Tutorial 5 Blend
19/24
PublicProperty UserName() AsString
Get
Return privateUserName
EndGet
Set(ByVal value AsString)
privateUserName = value
EndSet
EndProperty
Private privateText AsString
PublicProperty Text() AsString
Get
Return privateText
EndGet
Set(ByVal value AsString)
privateText = value
EndSet
EndProperty
EndClass
The ChatSession is somewhat more complex, but well simplify greatly by stubbing out
all the difficult parts.
We begin by marking the class as implementing INotifyPropertyChanged, which as noted
in the DataBinding Tutorial ensures that the UI fields will be updated as the data changes.
PublicClass ChatSession
Implements INotifyPropertyChanged
This interface requires only that we provide a PropertyChangedEventHandler that
implements the PropertyChanged event,
PublicEvent PropertyChanged As PropertyChangedEventHandler Implements
INotifyPropertyChanged.PropertyChanged
The class has two straight forward public properties: one for the users name, and one for
the URL of the users Avitar (image),
Private privateRemoteUserName AsString
PublicProperty RemoteUserName() AsString
Get
Return privateRemoteUserName
EndGet
Set(ByVal value AsString)
privateRemoteUserName = value
EndSet
EndProperty
Private privateRemoteAvatarUrl AsString
PublicProperty RemoteAvatarUrl() AsString
Get
Return privateRemoteAvatarUrl
EndGet
FriendSet(ByVal value AsString)
privateRemoteAvatarUrl = value
EndSet
EndProperty
Next we want to create a collection of the ChatMessages. What we want, however, is to
raise an event each time the collection changes (e.g., a message is added) and we want
the list box to respond to that event. We could create all of that, but the framework makes
8/6/2019 Beta Tutorial 5 Blend
20/24
it easy. Listbox already knows to respond to PropertyChanged events, and there is a
special collection type ObservableCollection(of) that fires exactly that event every time
the collection is changed. This makes life a walk in the park,
Private privateMessageHistory As ObservableCollection(Of ChatMessage)
PublicProperty MessageHistory() As ObservableCollection(Of ChatMessage)
Get
Return privateMessageHistory
EndGet
FriendSet(ByVal value As ObservableCollection(Of ChatMessage))
privateMessageHistory = value
EndSet
EndProperty
Sending a message is now as simple as adding a new Chat message where the text is
taken from the message box and the user name is taken from the current users name (for
now, hard coded to Me)
PublicSub SendMessage(ByVal message AsString)
' Todo: Send to remote chat server over sockets
MessageHistory.Add(New ChatMessage With {.Text = message, .UserName = "Me"})
EndSub
We leave it as an exercise for the reader to actually send the message
across the network
Before we can send messages, however, we must connect with the remote user,
obtaining the remote users name, avatar and initializing the observable collection of
messages,
PublicSub ConnectWithRemoteUser(ByVal remoteUserName AsString)
' Todo: 1) Wire-Up socket stack to receive notifications of received messages
' 2) Wire-Up to a remote avatar service instead of hard-coding my picture
RemoteUserName = remoteUserNameRemoteAvatarUrl = "jesse.jpg"
MessageHistory = New ObservableCollection(Of ChatMessage)()
' Notify any listeners of property changes
RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs("RemoteUserName"))
RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs("RemoteAvatarUrl"))
RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs("MessageHistory"))
EndSub
Finally, well add a method we can call that will simulate an exchange of IMs (but well
only call this method when were in design mode; not when the program is actually
running)
PrivateSub PopulateWithDummyData()
RemoteUserName = "BillG"
RemoteAvatarUrl = "billg.jpg"
MessageHistory = New ObservableCollection(Of ChatMessage)()
MessageHistory.Add(New ChatMessage With
{.UserName = "BillG", .Text = "How is your video going?"})
MessageHistory.Add(New ChatMessage With
{.UserName = "BillG", .Text = "Hmmm....you there?"})
8/6/2019 Beta Tutorial 5 Blend
21/24
MessageHistory.Add(New ChatMessage With {.UserName = "BillG", .Text =
"Hello???"})
MessageHistory.Add(New ChatMessage With {.UserName = "Jesse", .Text = "Sorry
Bill - working on a video..."})
MessageHistory.Add(New ChatMessage With {.UserName = "BillG", .Text = "Oh -
ok."})
EndSub
To ensure that this dummy data is in place during design mode, well test in the
constructor of ChatSession,
PublicSubNew()
If HtmlPage.IsEnabled = FalseThen
PopulateWithDummyData()
EndIf
EndSub
DataBindingWith these classes in place (you did build to make sure all is well, yes?) were ready to
data bind. Lets do that in Blend (!)
Make sure youve saved all your files in Visual Studio 2008 but dont close it, just switch
over to Blend. Say yes to the something has changed when I wasnt looking dialog
(your wording may vary). Under the project panel you should see a Data panel, within
which is a tab marked CLR Object. Click on that and Hey! Presto! You will see Blend for
Silverlight that will open up to show a dialog that lets you add any CLR object as a data
source. Notice that ChatMessage and ChatSession are listed. Click on Chat session and
click OK and Chat SessionDS appears in your Data list, as shown in Figure 6-25.
Figure 5-25. Adding Chat Session as a Data Source
Now, this is really scary how easy this is; click on RemoteUserName, and drag it onto the
name field at the top of the design and let go, as shown in figure 6-26
8/6/2019 Beta Tutorial 5 Blend
22/24
Figure 5-26. Binding the RemoteUserName to the TextBlock by Dragand Drop
When you let go, Blend recognizes that you are binding the data, and asks first which
field youd like to bind to (guessing youd like to bind to Text) and then offers (if you
expand the dialog) additional options, such as two-way binding (so that if the UI is
updated, the changes will be written back to the data source), as shown in figure 6-27
Figure 5-27. Creating the Data Binding
When you click OK the UI is immediately updated with the bound data.
8/6/2019 Beta Tutorial 5 Blend
23/24
Figure 5-28. Bound Data
Unfortunately, your list box does not know how to display a Chat Message (why would
it?). We can fix that, of course, by using a Data template,
This teaches the ListBox how to display each of the list items, specifying that each will
be dislayed with three TextBlocks, aligned horizontally by a stack panel, as shown in
figure 6-29
8/6/2019 Beta Tutorial 5 Blend
24/24
Figure 5-29. Data Template at work
Adding Templates
The Listbox and especially the Start Button dont quite look the way wed like. In the
previous version of this tutorial we fixed them with hand-written templates, but Blend
now offers a far better solution, which we will introduce in the next tutorial, so were
going to leave this as it is for now (not quite done, but a good way towards a solid
introduction to using Blend and Visual Studio together for programming an application).
Better not to finish, than to show you what amounts to an obsolete and inferior way ofsolving the problem. In the interim, both Tim Heurer and I and many others will be
blogging about the new approach to Templates, and well have the full tutorial out within
a few weeks.
Recommended