Duration: 21 minutes
Summary: In this video, we continue the Silverlight 5 discussion. There are two main items we will talk about: (1) binding and (2) ListBox. In the binding section, we will add a calendar and a textbox to the design surface. We can always do that on the design surface or directly in the XAML code. To place the controls in the right place, we add rows and columns to the grid contained in the User Control. We can simply do that by clicking on the edges of the grid. Once we add the rows and columns, we can use the Grid.Row and Grid.Column properties to place the controls. Then we bind the textbox to the SelectedDate property of the calendar. Now, when we select a date from the calendar, we will show the date in the textbox. Next, we experiment with the ListBox control. This control is easy in the sense that we can use a dialog box to add items to the list. But the more interesting part is that we can add controls with different types to the list. We will see how we can have a list of simple text, textboxes and an image.
Methodology of the development of example: Good coding standard and simplified design to illustrate the key points.
Technology Used: Silverlight 5 and Visual Studio 2010
Keyword: Silverlight 5, Visual Studio 2010, Binding, ListBox, ListBoxItem, Image, ClientBin, XAML, object, Grid, TextBox, Calendar, RowDefinitions, ColumnDefinitions.
Welcome back, everybody. This is Ayad Boudiab, I'm a senior.NET Application Developer and we have been discussing Silverlight 5. In the previous video, I gave you a quick introduction regarding the project that we create and where everything is. The way we create the actual Silverlight application and then how we can have a web project attached to that so we can test our Silverlight code. When we build our project and we end up with a client bin, this will contain the .xap file and that's how we will be able to run one of those test pages to be able to see the changes that we made in our Silverlight project.
In today's video I would like to talk about binding with the controls on the page with xaml and also I'd like to talk about the list control. If we have a little bit of time, I will show you how we can also run the application out of the browser. These are the main things that I'd like to talk about today.
Back again to the first option, the first thing that I'd like to work with is the binding and how we can do that. Let's go to our project and we need to add a new item. That new item would be a user control; it will be a Silverlight user control. Since I'm working with binding, let's call it 'BindingTest', click 'add', and that will give me my page.
Here's the actual page and here's the xaml underneath. You'll notice the xaml says it's a user control, that's what we did when we added the item, we added a user control. Then we have the grid; the grid has the name 'LayoutRoot' and background of white, and I can put elements within the grid.
If I scroll down a little bit and try to see the grid, click on it, or if I can even click on it in the xaml, you can see it, you've got the focus on the design surface. Anywhere I can click outside the grid, you'll notice that it shows me some lines. The same thing up here, it shows me some lines. I can divide this, since it's a grid, into rows and columns. Let's say, for example, I went up here and I clicked at this point, down here, I clicked at this point. You'll notice I have one row, two rows, one column, two columns; as we always work with .NET, C Sharp, and so on, we have this one is row zero, row one, column zero, column one. Let's see the impact of this on our xaml.
You'll notice in here, it says I have a row definition. The row definition contains two rows. Then I have a column definition, also with two columns. It indicated the height of each and up here on the actual grid, I can say, for example, show gridlines to be equal to true. We'll see the impact of that when we run our code. I need to show the gridlines on the screen, maybe that's something you turn on during development as you're working through the code, as you're testing, and putting things in rows and columns, you can turn this one on and when you're done with it, you can turn it off because you don't want to show the dotted gridlines on the screen. So far so good.
I go down here and add a calendar within the grid. I can go to my controls and scroll down to find my calendar. I'm going to drop that calendar in the xaml part. For this calendar, it's already showed up, I'm going to give it a name because that's how we can refer to controls, the same way we do this as ID and other...for example in html, and here I'm going to refer to it by name. The name I'm going to give this one is 'calendar1'. I'll get back to the calendar shortly. You'll notice in here it says SDK calendar, that's part of the SDK that you see here, which is completely a different name space, part of the user control.
I have my calendar and right underneath that, I'm going to drop a text box. I'm going to scroll to where textbox is and I'm going to drop that within the grid. I'm going to align the textbox a little bit, give it some spaces, and so on, but the first important thing, I need to give it a name. I'm going to name it 'TextBox1'. I have given it a name and I also did the same thing for the calendar. Now I need to make a few adjustments to the calendar and the textbox. The first thing is, I want to tell in which row and in which column I'm going to drop the calendar and the same thing for the textbox.
If I scroll down over here, I noticed that I used to have a calendar, but now it's gone, I don't see it. Keep the calendar on the first one, right now it's overlapped and you don't see it. Let's go and I'm going to move the textbox to this box. What is that box? That's row zero, column one.
How do we do this? In the textbox I'm going to say Grid.Column to be 1. I'm going to say Grid.Row to be 0. If you look at the design surface, you'll notice the calendar is already is already showing and the text box has moved over. Then what I am able to do, is give it a column and a row depending on the grid because these are not properties of the textbox, these are properties of the grid. These types of properties, attached properties, are part of the parent control, which is the grid. I'm going to say, "You, textbox, go in that column, in that row, off the parenting grid."
Since the calendar is already in the place that we want it to be, I don't want to make that change. Let's make more changes as far as the textbox is concerned. I gave it a name, let's give it a margin. When I say margin, for example, of five, I'm indicating that my margin is left is five pixels, top is five, right is five, and bottom is five. I could specifically say that by saying five, and that would be the left, five on the top, five on the right, five on the bottom, but by simply saying five, that's exactly what it means. Margin for all corners, but the way we give these tallies, if we want to indicate them one by one is by going first left, top, right, bottom, in that order.
Now that I gave it a margin, I need to give it some width. Let's say the width on this one was about 160 pixels. Let's give it some height, height is just about 20. You'll notice it's already showing up here. I already have the textbox and the calendar. Now the binding that I promised you at the beginning of the video, I need to give it some text. The text, in this case, is not just plain text. Of course, I can say, "Hello," and the text 'Hello' is showing up in the textbox, but that's not what I want.
I want to give it some dynamic text based on something else. The way we do this is by putting the curly braces in here and then specifying the binding that I'm interested in. I'm binding to something, right? I'm connecting to something else. What am I connecting to? The ElementName, in this case, is 'calendar1'. I'm binding to calendar1; I'm using the path, which is basically the property, to be the selectedDate. Whenever we have a selectedDate triggered from the calendar, I want that to be bound to textbox. Let's save our changes.
You'll notice that we learned about a few things. We learned about setting the rows and columns for the grid. We also learned about creating a calendar control, also a textbox control, and how we can use binding to bind to another control and use some of its properties to basically populate the data that we have in the control, in this case, the textbox.
I'm done with my change, let me build my solution and make sure that I don't have any errors. I have my solution, and then I will view this page, which is called 'BindingTest'. The main thing that we have in here is, when I look at the project I have App.xaml. Let me go ahead and run it and show you exactly what I mean.
I run my project and what did I end up with? That's the button click that was from the previous video. That's not what I want, I don't want this page showing, I want the one that I was just working on right now, the BindingTest. Where would this happen? If you look at the App.xaml and App.xaml.cs, the code behind of App.xaml, you would notice that on the application start up event, what are you doing? You're just setting the RootVisual to be the MainPage. The MainPage is the original page that I was working with that contained that button and the yellow background. That's not what I want. I want the BindingTest to be the page that loads.
I'll come over here and, instead of main page, I can say I want the 'BindingTest' page to be the page that shows up. Let's go ahead and make sure that the project builds fine and then we'll run it and try to see our results. The build succeeded; run our project.
A couple of things that you can see here...the first thing is that you can see the gridlines, that's why I was saying that you need to have those gridlines showing during development, but then you need to turn them off when you're done because you don't want to show those gridlines in production.
You'll notice in here that I have a calendar going in row zero, column zero, then I have the textbox in row zero, column one. Based on my code I have the textbox text bound to the calendar control. Let's go ahead and select a date on the calendar, let's say the 10th. I should have had this in here showing the text, but it's not. Let's figure out what's going on.
By selecting a specific date, which should show up in the text box. If I come back to my coding and I can look at that offline just to make sure that I'm not missing anything, everything seems to be in order. At first I thought that the text is not showing up completely so I can erase the size in her to be 25, but that's not the issue, the issue is right here with the path. You'll notice that when I look at the 'selectedDate' property, I have a lower case 's' and that should have been an upper case 'S' for the selectedDate. The change in here, then, is to replace that with a capital 'S', 'SelectedDate' with a capital 'S'. Now, if I run my project, you will notice that if I select one date on my calendar it shows up in the textbox. Every time I change the date, it's changing in the textbox. That's how we bound those two controls together.
The second item that I was going to discuss with you is the list control. The list control is like you've seen list controls in other programming languages, but the nice thing about it in Silverlight is it's a lot more powerful. Let's say, for example, I'm going to drop a list control or ListBox. Here's the ListBox and I dropped that on the screen in here and let's give it a name like we always do. It's helpful to have a name because you need to refer to it in code. The name will be, for example, 'myList' and let's give it a margin. The margin is also going to be five. Considering this already has a calendar on the first row, let's go Grid.Row equal to 1, in this case, and Grid.Column to be zero. My list box is in that location, the second row, and first column.
If I go back to my list box in here and I look at it in the designer, here it is, this is the list box that I'm working with. This is the code associated with it within the actual grid. If I go over to the right-hand side for the list box and look at its properties, I can change everything in here. As far as the list box is concerned, one nice thing that I can change is its items collection. I can click on this and it gives me a window where I can simply add all the contents that I want for this list: Item 1, add; Item 2, add; item 3, add;... these are the items for my list. If I click 'OK', you'll notice those items have already been added in here in the xaml. There's nothing fancy about this, I can just add as much content as I want.
The other thing that I can add to a list box, I can add other controls. For example, I can come over here to the right hand side and select a textbox and drop it there. Here's a textbox and I can drop it in my list. Of course, I can give it a name, 'text1', and I can give it a width of 100, and I can copy that and have a couple of those list boxes underneath...text2, text3, maybe width 200 or 300 in the textbox.
Between the list box item and the text box I can drop an image. It doesn't have to be all the same type, I can take an image in here and drop it inside this and I have in here a height to it to be equal to 100 and I can specify the source, as well. If you look over for this image on the right- hand side you will see the properties for the image and one of the properties is the source. Under my images folder, I can select that image; click 'OK', which will give me the image for that specific image control. You give me the source and go ahead and save all that and then I can build it and I can run my project, so I can see what type of list box I ended up with.
As you'll notice in here, here's my list box, item 1, item 2, item 3, I can also have an image, and I can also have some textboxes within the list. The point that I'm trying to deliver, as far as this is concerned, is that in the list box in Silverlight you can add other controls, not simply regular items like 1, 2, 3; you can add images and other controls within the list box. It's a powerful control that we can use and we'll experiment more and more with it in the upcoming videos.
I'll continue my discussion of Silverlight and all the controls within Silverlight in the upcoming videos so please stay tuned.
If you have any questions or concerns on what you would like to see more on those videos, please drop us a line on Mr. Bool website.
Thank you very much for listening. I'm Ayad Boudiab and you have a good day.