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.
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
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
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