Duration: 19 minutes
Summary: In this video, we continue the Silverlight 5 discussion. There is an important concept in Silverlight called attached properties. Normally, when we work with objects, we create properties as part of those objects, and then we can access them (get and set). But in this case we are talking about properties that are not part of the class. Those properties are static global properties. These properties are attached from the parent to the child. For example, the Button class will not have a Row and Column property. But when we have the button inside a grid we can set Grid.Column and Grid.Row properties for that button to tell the grid where the button is placed. After this discussion, we will talk about creating an out of browser instance of the application. We will see how to set these fields in the project properties dialog. By doing so, we are able to install the application locally and it is not part of the browser anymore. We say that the application is running in a sandbox because it has limited access to the computer (for example it cannot do damages like formatting the hard drive).
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, XAML, Grid, TextBlock, Calendar, RowDefinitions, ColumnDefinitions, Content, Grid.Column, Grid.Row, HorizontalAlignment, VerticalAlignment, Click, GetValue, SetValue.
Welcome back everyone. This is Ayad Boudiab, I am a senior dot net application developer, and we are continuing our discussion on Silverlight 5. We've been discussing some of the concepts so far and we just created some controls and we work with some binding, and we saw how we can drop some elements on the page and so on. In today's video I'd like to talk about two things.
First, I want to see how I can work with an attached property and we'll create a grid and some button and textbox for that. The second thing is I need to see how I can run an application out of browser. So, these are the two concepts that I would like to talk about. Now, normally you know what a property is, right. For example, you work with an employee class, that employee has some properties, for example a first name last name and so on. Right?
The way you access them is you create an instance of that object and then you call those properties. Now, when it comes to Silverlight there is also the concept of an attached property. This concept comes from the reason of it being is just because we're working with XAML. We are defining how elements are structured. For example, I have a grid, within the grid, I might have a stack panel and then within that I have a button and a text block and so on. So, when I choose to use some of the properties, these properties don't have to be in the class itself. They can be coming in from the parent and they are set in the child.
For example, when I'm working with a grid and I have a button inside the grid, the button will tell which column and which row it is. Now, these properties, column and row, they are not part of the button, because a button does not have to have a column and row to know where to place it. It doesn't have to be inside a grid it can be in other controls. Right? It could be I say within a doc panel or a rav panel. It doesn't have to have a column and row property. Those properties are coming in from the parent, which is the grid, and they are attached to the button.
Let's work through an example and see exactly what that means. It will be much clearer. For that let's go ahead and create a page for a control at we'll create a new item. Silverlight, control, let's call this one 'AttachedProperties'. And then on that I'm going to work with the grid. So, here is my XAML and here is the design, by the way, I can click on the zoom to fit in here so I can make the display or the design fit the screen I'm working in. The other thing is I have a grid down here. Now, for that grid, which is the name that I though it, I'm going to specify some rows and columns.
So, since I'm going to be working with the design let's go ahead and give that a little bit of space here and here is the design. I'm going to divide this into two rows and two columns. So, I'm going to go up here and split that with rows and columns. Now, again, by doing so you notice that change in the XAML, and I have a row definition with two rows, a column definition with two columns. OK. So far so good. Now I want to add a button. Let me go ahead and go to the tool box on the left hand side, and try to choose a button and drop it on the design surface.
Now, that button, Content="Button", and the height and alignment and so on and then also I'm gonna take a TextBlock and drop it on the, in this case, on the same row but on the second column. So, let's go ahead and select a TextBlock, and drop it here. Now what did we end up with? A few things you notice here. I have the button with the content. The content let's call it for example 'Move Text'. And then the other elements I don't want the height and the horizontal alignment. Let's remove these.
We need to keep the, we don't have to have the actual name we could if we need to refer to it in the code behind, but, for now let's keep this one as 'Move Text'. By the way, since I want to move I want to have attached, I want to have a button click to it let's go ahead and give it a name. The name is [btnMove]. Now I want to specify, it's already there, but I want a specifically refer to the Grid.Row to be zero and the Grid.Column to be zero. As you notice that didn't make an effect on the design surface because by default it's there, but, I want to specify this explicitly to show, you when it comes to attached properties. This is part of the grid. There's a global grid in here that I'm referring to in terms of the class name, and I'm saying the row would zero and the column would be zero.
Now, normally when you're working with say HTML or you're working with other types of classes, you might be thinking well I'm setting a property it must belong to the actual class, so this one must be part of the button. But, it's not, its part of the grid, and I'm specifically in here saying that's a Grid.Row and a Grid.Column. This is the concept of an attached property. It's from the parent, the parent is the grid. That parent has passed this property to the children because the child did inform the parent where he is explicitly, for this specific row and this specific column.
Now, the other thing is for the text block, for the text block I don't want the height either or the margin. I just need to specify the text. The text says something like 'Move me'. OK let's remove this alignment. So, right now I have the Grid.Column to be 1. Again, I don't have to have the Grid.Row but I'm gonna specify that explicitly, Grid.Row to be 0. It'll be on the first row second column. I specifically indicated that with the Grid.Column and the Grid.Row. Let's say for example, let's change a couple of properties in here again. Let's go ahead and let's say for example give it a font size, FontSize to be equal to 15 for example, right. And, let's stay with alignment, lets give it a horizontal alignment and a vertical alignment.
So, horizontal alignment to be centered and a vertical alignment to be centered as well. So it looks like that. It's right in the center with all the rest of the information. Now, what I need to do, is I want to go to the code behind and be able to manipulate those properties somehow. Because programmatically changing those properties is a little bit different. So, let's first go to the button and you need to generate a click event for that button so I have to come to the right hand side. This is the button 'btnMove'. I want to look at the events for that button. On those events I'm gonna figure the click event, here is the click event for the button. You notice I already been directed to the code behind, if you go back to XAML you notice that the button already has a 'btnMove' click event handler.
Now, I want to in the code behind, I want to specify, I want to work with the dependency property and see how I can, to the attached property, and see how I can get this value and set this value. So now the idea is if I click on this I'm going to move the text block down or up. I'm going to move this text block from this location to this location by clicking on the button. First of all I need to know where that textbox is. Let's go ahead and first since I need to know information about the text block let's give it a name. Let's call this one for example 'txtTarget'.
So the text block has a name called 'txtTarget'. After all I need to know where that text block is so back in the code behind in here I'm going to first find what the row is. Integer row equal, now, I want to get the value for this, for the row property. So, I'm gonna ask the txtTarget I'm gonna say dot(.). For that I don't have a row dot(.) column or I'm sorry Grid.Column or Grid.Row. I don't have that in the properties so I have to have for example GetValue. GetValue will actually give me the specific value that I'm interested in. Here it is, when I say GetValue it says you need to provide me with a dependency property. What is that property? It's the Grid.RowProperty. By specifying Grid.RowProperty that will give you the actual row that the txtTarget is in. While the GetValue method returns an object, so, I have to cast that. Now, I'm going to say integer and that will return the value of the row, in this case zero, and then cast that integer and put it in the row field.
Now, I'm gonna say row++, I'm going to increment the row, I'm going to move it down to the next row, but, I'm gonna need to make sure I don't go outside the bounds so I have to check . I have in here it says if row is greater than one it says I have only two rows zero and one. If row is greater than one I'm gonna set row equal to zero. Just reset it so I don't go outside the bounds. By doing so txtTarget that get value that's how I'm able to get the value of this property. Now I want to set it. Well, again I use the SetValue. So, in this case I would say txtTarget.SetValue and in here I'm going to specify Grid.RowProperty but I want to set it to the value of row. Now it takes the value of row and set it to the row property for that specific txtTarget text block. This is how I get the value of a property in this case and this is how I set the value of a property.
Let's go ahead and save this and go back to our XAML and we'll notice that the name is called AttachedProperties. Now, I need to go over to the project to make sure that's the page that gets loaded, and remember that's in the app that's App.XAML.cs that's the code that loads that specific page, in this case it says BindingTest. It's not the BindingTest anymore. I'm working with the AttachedProperties class so now it creates an instance of that guy and display it on the screen.
Let's go ahead and build our project or solution. Build succeeded. Let's go ahead and run it. Here is the button and here is the actual text block. When I click on move text the button moves down, up, down, up because it's been reset to zero. Right? Every time I click it it's been moved because what I did is by clicking on this one I'm resetting the row property for this text block and when I increment it and when it's one I reset it back to zero, so it's always moving back and forth between zero and one.
Again, the main idea behind our discussion today is learning how we can work with the attached properties. That the attached properties are being defined in the class itself, because after all these are classes created behind the scene. Right. But this is not part of the class, these are part of the parent, which is the grid, but we reset them here and that's how we are able to manipulate those properties in the code behind. Now as I promised you at the beginning the second thing that I'd like to talk to you about is basically how we can run this out of browser.
It means I'm taking the application it's not dependent on the browser anymore it's running inside my computer away from browser, but, in a Sandbox, it means it's limited by its capabilities it can not go in and format the hard drive and bad things to my computer. That's why we say it's running in a Sandbox. Now I can right click on the project itself and load its properties and on those properties I have a way of making this run out of browser. If I scroll down in the properties I see enable running application out of browser. I have this enabled already.
I can click out of browser settings and let's give it a name for example that's the window title 'Attached properties' and then width let's say 300 and height is 400. You can give it a short cut name, 'Attached Properties', you can give it a long description in here of what you need it to do. You can also assign an icon to it and when you're done with all your changes you can simply click OK. So, that will basically give you all the options that you can set for this application and then you can rebuild it. Build succeeded. Then you can run it. And you notice that my application right now is running outside the browser. It's windows application, it has a attached properties on the top has localhost. It goes 300 by 400. And here is the application.
One thing I can do is I can right click on it and it says remove application because this application right now is installed locally on my computer so it could be for example it has a part of the start menu or it's on the desktop. So, instead of only seeing Silverlight in the contents menu now by right clicking on it, it gives me the option of removing completely this application from my local computer and I can say yes, are you sure you want to permanently remove it, you say yes, and it's gone. So, that's how I can run my application out of browser. Now in the next videos we need to continue or discussion of Silverlight and there's a lot more to come so please stay tuned and let us know on Mr. Bool website if you have any questions. Thank you very much for listening. I'm Ayad Boudiab, and you take care.