>> Ben Lower: With that I am going to introduce our speaker Ayman. He is one of the
program managers over working in the engineering team on Windows Phone and he is
going to give a talk on basically getting started with phone development, specifically
using Silverlight, so without further ado here is Ayman. [applause]
>> Ayman Afanah: Thank you. Can everyone in the back hear me or… Is this… Can
you guys hear me? All right, cool, let me just switch it over to the other, all right, tap the
screen, okay, cool, sounds good. Basically as Ben said, I am actually from the Silverlight
for Windows Phone team. Today I will just go over some of the basics of what is new
with Silverlight and how you can use it for the phone and basically how to get started
writing co-apps.
The key takeaways here are how to create the Silverlight application, how to leverage
your own creativity and basically what are the tools to actually make it happen. The cool
part about Silverlight is the ability for folks to collaborate together. So if you are a good
programmer you can actually use it in collaboration with a great designer. So the idea is
you can actually create this unique interface between the two that folks can actually
collaborate together and do a lot of cool powerful stuff. The other advantage of
Silverlight is that you also have a lot of things out of the box that you can actually use
and get you going quicker and faster.
You have several Silverlight capabilities but you also have the other kind of capacities
that you can use, so whether it's in XAML based, and I will go into detail as to what is
that, and also in terms of input, it is actually geared towards keyboard, mouse, touch and
so on. And in terms of media, that is it's kind of core strength. You also have
connectivity with other data and other kind of networking data services models that you
can connect to as well.
Basically the idea for Windows Phone development is not just with one area, it is actually
a collaboration of all folks together. So basically you have the runtime for the phone, you
have Silverlight as well as XAML in order for you to be able to create your app. So
basically both have access to the phone in terms of sensors, what is kind of the media
stack, as well as the managed front time frame report. Now the cool part about
Silverlight and XAML is they are the same model that you have on the desktop, so you
can actually leverage and reuse your code as much as possible. So basically we are
already, so if you have a XAML game that is actually on the Xbox you can actually now
port it over to the Windows Phone, which is really easy to do. As well as if you have a
like a Windows Silverlight desktop app that you want to port over to the phone, you can
do that as well easily.
Now also in terms of the tools you have, in terms of the Visual Studio and Microsoft
Visual Blend where you have the phone emulator, you have an abundance of samples of
course with Microsoft; it is developers are always number one, developer, developer,
developer. [inaudible] [laughter]. And also in terms of, you also have an abundance of
tools to basically a Visual Blend as well as Visual Studio for Windows Phone.
Now also you have that connected with this cloud as well, where you have Windows
Azure; you also have Windows Xbox live services for certain partners and we have the
ability to actually connect you to the cloud easily. And also the other part of it is the
services for the Windows Phone services where if you are an app developer, you need to
register and basically it monitors all of your revenue, it manages all of your kind of, okay,
what is the money coming in for you and what are the number of installs. Who installed
your apps, so on and so forth, so it is actually giving you a lot of cool services on top of
that.
So basically what is Silverlight for Windows Phone, so just a quick question: how many
people here know about Silverlight? Okay, cool. That is not so bad. So most of the
folks here are interns like from college, yes? Okay, that is a yes, cool. That sounds good.
So basically Silverlight for phone is basically currently right now on Windows Phone 7 it
was Silverlight 3 plus those modifications. Right now in Mango we have actually
Silverlight 4, so all of the cool kind of data models as well, we also ported from Mango
as well. So basically what is different is just simply we did a lot of performance tuning in
terms of the input integration with the device, and as well as we had integration with the
camera and the media stacks on the telephone as well. Also the application model is
more attuned towards the phone, so it is not this different kind of like on a browser so we
tweaked that to actually match more on the phone itself. And basically we removed a lot
of the constraints that you had in the browser. So for example if you want to access the
camera you, on the browser you have to actually give permission or something like that.
On the phone you don't have that restriction. So some of those restrictions are, we took
them out.
So basically I want to show you some demos real quick here. So the idea behind--so this
is, all right, so this is basically Video Brush. So this is a Video Brush which--touch the
screen, there we go, so let me just, so basically this is the video, this is a video playing. I
can actually now take all parts of it and just basically start playing around with it if I want
to. I can scramble it. I can take each one of them by their own. I can actually solve it
back in. So the idea, this is the kind of, the type of applications you can do with
Silverlight as well where you can take a media content. You can take media content and
you can take whatever creative stuff you want on top of it as well. Also in terms of like
Netflix, that is one of our premier apps. Does everyone here have Netflix on the phone?
Okay, so I think we can skip that demo; I guess everyone knows what Netflix is.
However the cool part about it is we save Netflix a lot of time because we already have it
on the desktop, so for them actually porting it over on the phone was really easy in terms
of the media stack and getting things started as well.
Here also is something that we are actually bringing in Mango, which is basically sockets
in RTM we didn't have sockets so sockets is basically if you want to actually open a
socket on a server, you can actually communicate with it. So you this is, I call Chap Plus
which is simply just a simple app. I can do this here and I can do, let me see, it just
depends on the network connectivity, so let's see if it actually works really quick. So
here basically what I am doing is, I am drawing over here and it is actually drawing on
the other side. So it is basically sending data through multicasts and through the network
to the other device. And here if I actually draw on the other one I can do it as well, and I
can draw both of them at the same time here. So that is basically one of the cool apps
that can be enabled on Mango as well.
And also there are a lot of cool apps out there. If I had time to actually go through them,
I would do that, but I think we will just go through what you need to know to in order to
build those kinds of cool apps. So basically, how many people here are familiar with
XAML? Okay, cool, so we will just skip this one. So basically here, just the idea behind
it is with Silverlight the key objective is that if you are used to programming with
JavaScript or C++ or C sharp everything is in code. In Silverlight you have a lot of the
utilization of XAML where you can actually write everything in a XAML format. Now
the cool part of it is it gives you the ability to interface with design much quicker, which I
will show you later on with Blend and how to actually reuse some of those resources
quickly.
So basically the idea is Silverlight is not just XAML, you can also write code behind it as
well and you can leverage both at the same time. So basically here I will show you a
quick demo of how to actually create a Windows Phone project. This is just a simple…
>>: We can't see.
>> Ayman Afanah: I know. Just give me a second. This here is, there we go. So this is
Visual Studio. Oh my God, I can't see a thing. All right, okay, so the idea behind it is
through, in the browser in Visual Studio you can actually see what is going on and here
on XAML I can create whatever I want, over here real quick, let me just see here,
highlight that dude over here. All right. Got it. You know what?
>>: Hopefully everybody has a monitor that is higher than 1024.
>> Ayman Afanah: Yes. So the idea behind it is I can create whichever text box, I can
do it through code or I can do it through XAML as well. So for example here in my Grid
I can--okay--so basically here is just a design where I can actually define where my
XAML and where is my phone, and you can do that through the UI will quickly, whereas
this is, and I will show you which stack panel you are--like if I click on the stack panel, it
will tell me which one is actually selected, so this way you can just go ahead and program
from it over there. I am going to stack panel, a Grid, so on and so forth later on as well to
give you some of the differences. That is just basically, a basic idea do what XAML
looks like. The idea is that I can add a button here and here you also have some of the
other cool tools were you can actually know which position is it and you can actually
align it with other objects as well. Also, so basically this is what is created over here
where basically you have the button selected. So basically you can create this through
XAML and you can go ahead from there.
Now in terms of the C code, you can actually double-click and it will actually go into the
C Sharp code or you can actually now hook up all of the events. Now the cool part about
this is in XAML you don't have to actually go do the loaded, in C++ where you actually
have to define which events and hook them up to the controls, you can do that also
through XAML much cleaner like right over here. So you can define what are basically
the events on click and you also have hook up to all of the other events that you want, so
for example here I can do, loaded and you have all of the kind of the IntelliSense help
and you can actually do and get you going really quickly. I will take that out of the way
here and get back to the presentation.
All right. Now the other cool part is actually you can do a lot of things vector-based, so
when you actually do things in C sharp and C++ if you wanted to do something that is
actually more native to the app either A you can actually get an image and you have to
write a program to actually manipulate it, which kind of becomes a little bit cumbersome.
Here you can basically take anything from either Photoshop or Blend and you can
actually just take that XAML and just put it immediately into the phone. And you can
actually get going there quickly. Let me see here. It actually shows you a lot of cool
things that you can manipulate with Blend and you can actually know exactly what to do
with it.
So I will just show you here kind of a quick demo of Blend real quickly. Now the cool
part about Blend is that it actually is a Microsoft project, see you can actually use it in
collaboration with Visual Studio. Okay, let me just close this. So this is basically Blend
and how it looks like, and I can just create a new project and, let me see. And it actually
creates the same template that you had on the phone as well where you can actually now
concentrate on the design and concentrate on everything related to it.
Okay. So here I created kind of a Silverlight app and I can do a lot of cool things with it
as well. Like this is a list box that actually now is designed with Blend. So if I want to
actually manipulate any objects, just create or change the colors or any other thing on the
text, I can do that quickly. Now the cool part about that is, let me just do view
[inaudible]. I can actually see the XAML for it as well, so the idea is I can create
something in Blend. I can just basically export it and just give it to someone else who is
actually using it in Visual Studio as well. And also you can compare both of them at the
same time, where you can see okay what are the changes I did in Blend, and how do they
reflect back in, on the phones themselves as well.
I can just go there and go back to the demo. Now also the other part of it is with controls
you have a lot of controls in Visual Studio. So you have in terms of buttons you can
actually do that in XAML as I said. And as well you can do media element and you can
do the list box and you can do all sorts of cool stuff with it as well. Also anything that
can be created in XAML can be created in code as well. I think, yeah, we went through
this demo real quick. Now I will just kind of go over the differences between a layout,
you know Canvas and StackPanel. So the idea is you can actually lay out your objects
which ever way you want. So with Canvas it is actually a fixed position so you draw out
an area and you say okay this is what I want, the specific pixel. With StackPanel you are
actually putting everything in either one row or one column, so everything is just stacked
up together. And the Grid is basically self-explanatory; you can just position them like
kind of in coordination with each other. So I will just kind of show you a real quick
demo here. Is there a way to put this thing in full-screen on the thing?
>>: Unfortunately not.
>> Ayman Afanah: Okay. No problem.
>>: Just touch it.
>> Ayman Afanah: Touch it?
>>: Yeah, touch it. If only everything was so easy.
>> Ayman Afanah: There we go, all right. [laughter]. Why couldn't I have done that
like 10 minutes ago? [laughter]. All right, cool. So the idea behind it is I can just go
over here really quick and in this Grid--so one of the actual examples of Grid is in this
template where you can actually define what is the row definition and what is the row
height. So the idea behind it is I have a fixed amount of height, but the rows you can do
as many as possible as you want. Here basically I will just do an example of Canvas, so I
can do Canvas and basically just do a rectangle in it. Can everyone see this or do you
need me to project higher or something like that? That is fine, okay. So basically I can
add rectangle real quick and I can--now the cool part about this is I can like I can say
relative to the Canvas, where do I want it, to the left, to the right? I can actually position
where to kind of start the rectangle for it, and as well as I can say I want that 50 as well as
I can do Canvas from the top to have it as a 50 and as well as I can do, I can define the
width for the rectangle and that is the cool part about IntelliSense. It will just type
everything for you real quick and it will know exactly what you need to have.
Let's say 100 and I can say fill like real quick here and I can just close it down. And it
will actually just draw everything here. Now any other rectangles will actually be
stacked right next to it basically in the same position as well. So the idea is a gives you
the ability of instead of trying to align your rectangles yourself, it will make it actually a
lot quicker for you as well. Now also let's say--now I just want to--instead of this, I want
to have like a StackPanel where and I want to do it orientation wise as horizontal. Okay,
you know what, the need do this here. This is better. No, it is not better actually. Okay.
See, I can close this one down here and I can now draw my rectangles in it as well. And
if you guys have any questions please feel free to ask at any time. This is not like a
presentation or anything; this is more of an informal kind of, ask if you have any
questions about what I am doing, please go right ahead and do it.
>>: Over to your left.
>> Ayman Afanah: Oh, yes.
>>: Do you need to find this stuff in C sharp code as well or is it all the same?
>>: Yes. As I said before basically if I go to the view, let's see here, if I can, okay I have
to [inaudible] first. So let me just do this here. I can view, I can view code and basically
what I can do I can just do rectangle and basically it is the same objects that you have and
XAML as well or you can do rec is equal to new rectangle, and can do the whole
definition that you did in XAML as well as here in code. So the idea is that if you have
event-based type of programming and you want to modify you can do it also in code. Or
if you have all already some libraries where it actually defines the coordinates you can
also use them here as well. Any other questions?
>>: [inaudible] when you're on the other [inaudible]
>> Ayman Afanah: Is it too big or is it too small?
>>: [inaudible] too big.
>> Ayman Afanah: Oh yeah, that's all right, don't worry about it.
>>: It is hard to see the whole… If you zoom out of the emulator and you increase the
size [inaudible].
>> Ayman Afanah: All right. There you go. Is everyone happy? [applause].
>> Ayman Afanah: Thank you. Thank you I appreciate it.
>>: [inaudible] someone in the room. [laughter]
>> Ayman Afanah: All right. So basically here I can just do fill here real quick and do
blue and I can do copy here real quick. So as you can see, it will actually stack them
correctly together, like you don't have to actually have the hassle of defining where the
coordinates, where it actually happens. It will just, you can just copy paste the kind of
the controls real quickly and it will actually just create them for you in that same
StackPanel correctly. You don't actually have to manage the coordinates, so on and so
forth. Also you can add the margin where you can actually have the spacing between
them so you can do a margin of say 10, so you can actually now see it actually it
increases the size between the both of them there as well.
So there that basically is the presentation for, this is for StackPanel. For Grid you can
actually define basically the, you know, which row definition as well, so I will just do a
quick example here of it, real quick. So I can do Grid and show gridlines; I can say it's
equal to true and, no sorry. And here this is an important part. grid.definition, oh sorry.
Where actually I can define, okay, what is really the height of each row that I want? So I
can do, now, let me see here. Yeah, I can do [inaudible]. [inaudible] definition. Locate
and then I can say row definition, height is equal to 50. So basically you can see here
that actually it created one of the rows with that specific height and the rest is actually
used for other rows as well. So the idea behind it here is that you can define how do you
want to stack your Grid and how do you want to assign your columns as well so this way
you can control the positioning of all of your controls really quickly. So I will just go
right ahead quickly and… You guys had a question? Oh, okay, that's convenient. Okay.
And also you can do this with the others. This is the row column, and you can close it
down. And you also can control the Grid column as well here. I'm sorry. So here what I
am doing is actually creating… Oh, go ahead?
>>: Where do you find these tools and resources and like the stuff online so that we
could work on it at home and teach ourselves?
>> Ayman Afanah: You can go on to MSDN where basically you can go to the phone
development page and already we actually released the Mango tools for like the next
release of Windows Phone 7 so you can actually go ahead and pop them in and you can
actually start kind of coding and doing a lot of cool stuff.
>> Ben Lower: The best place to go to jump off for everything phone related is
create.MSDN.com; we refer to that as APP HUB. You can download the developer tools
there. I recommend that if you are interested in the competition this summer, download
the Mango tools. It is a public beta that came out last week and there are links to sample
apps, sample code, all of the MSDN dots are linked to from the APP HUB site.
>> Ayman Afanah: Oh yeah, go ahead.
>>: So do you need to be running Mango on your phone to be able to use that? How do
you get this stuff onto your phone in the first place?
>> Ayman Afanah: Oh, okay. So basically like the tools that are actually available right
now, you can use them for Windows Phone 7 as well as Windows Phone Mango. Now
the emulator that comes with it is actually the public release for the Mango build itself. If
you wanted to actually put it on the phone you basically have to register as a developer or
basically get all of the tools in order to A, unlock your device and launch your test app
into the device that you have. Now you can buy any, like any device, any Windows
Phone device, and you can update it to that and you can actually launch your apps from
there. Now I think we still haven't kind of released the actual home device. We only
have the Mango builds on emulators right now. Later on we will have them on actual
devices.
>> Ben Lower: I wanted to talk about this later but do we actually have phones that have
this app fest events so I am expecting that as we go forward and people are having apps
that they want to test on a phone, I have phones that you can use that these events. As
part of the contest we also are going to provide loaner phones for the summer to each
team that is going to build an app, so we will find a way to get a Mango capable device to
anyone who is going to participate in the competition. But like Ayman said, the emulator
is great. You can do pretty much everything there, especially in the beginning stages, but
obviously you are going to want to have a phone to, you know, finalize your testing
performance and all of that.
>>: Which build of Mango is going to be on the phone?
>> Ben Lower: Say that again.
>>: Which build of Mango is going to be on the phone?
>> Ben Lower: So the question was which build of Mango is going to be on the phones?
The build that I have on the phones right now is I have the friends and family builds, so
that was 7629 was the latest. I think there is a new friends and family build coming out
this week, so I will update the phones to whatever that is. But we will keep those phones
moving forward as Mango releases come out throughout the summer.
>>: All right cool.
>> Ayman Afanah: So I will just finish this up real quick for the Grid. So the idea is,
here what I did is I simply defined what is the Grid. I created the broad definitions. Here
I created two rows and I created two columns and what I am doing here is basically now
any shape that I have I am defining in which row and which column does it actually go
to. So here I am basically this should be, this should go into kind of column zero and as
well as going to, into row zero, and actually kind of closing out the rectangle. I did the
fill. So you can see that it actually now puts it in the correct kind of Grid position that I
want. So that is kind of the three differences between layout, like in layout. So you have
Canvas. Oh, go ahead, you had a question?
>>: Sorry so how is the workflow handled? If the [inaudible] is bigger than the
[inaudible]?
>> Ayman Afanah: The way it does it is it depends on your definition. If you do a.style
[inaudible] either expand it, or it will actually just snippet for you as well. So it will
actually handle it for you. So yeah, with that I can just move on to the next kind of
demos now, with Transforms you have a lot of cool Transforms that you can do, so on all
of the shapes that we have actually drawn, you can actually do anything that you want.
You can actually--we have a lot of out-of-the-box solutions that you can actually use for
animating or transforming any of the objects that you have. So any of the controls that
you have, anything that is actually UIL, you can actually now transform it or do some
cool stuff with it. So for example the Video Brush, the first example, the video puzzler
one, is basically we took some of the elements and we just basically manipulated them
with those Transforms that we have here.
So basically you have, you either have Transforms or you have projections where
basically it applies 3-D effects into 2-D elements. So that is basically what we have on
the phone. So basically the three types of Animation that you have, you have Storyboard
and you have Animation can you have the Keyframes, so the idea behind it is the
Storyboard you define, it is kind of like you are doing a movie, where you are saying
okay, on this clip I want it to be here, on that clip I wanted to do this. Animation is
actually the mechanism of doing all of that and with the Keyframes you can actually
specify the timeframe that you want it. With that I can just show you quickly in Blend
here and let me see here. So basically this is our Windows Phone page and the cool part
about Blend is I can just, it is designed for a designer so you can do a whole lot of cool
stuff with it. So for example here I want to draw a rectangle and I am just basically
drawing this here. Now I can select it. I can do a whole lot of crazy stuff with it where I
want to select this, I want to do the capacity, I want to change the capacity to little bit
here, down there. And I want to do some cool stuff with it like a gradient type where I
can actually select it over here and select this color and select this something else. And I
can select this color as this here. And how else was that? Okay. So this is a gradient
brush. Here it basically selects what the colors are so here you can actually select, okay I
don't want it to be white. I wanted to be something, green and the black here I want it to
be this color over here, I am sorry.
So you can do all kind of cool stuff with it. All of those elements coincide well with
whatever you have inside the actual studio video project, so basically all of the
terminology is almost the same. So if you were actually a designer working with the
developers, you could actually collaborate much easier. Go ahead.
>>: So when you were [inaudible] implemented [inaudible] things like face recognition
or voice recognition or things like that that you may use in mobile applications?
>> Ayman Afanah: No, so apparently we don't actually have those implemented by
default. But there are like a lot of code out there in the developer community that makes
those very easy to do.
>>: [inaudible]
>> Ayman Afanah: Yes, exactly.
>>: Some of the things that you just mentioned like speech [inaudible] service are
provided which you can actually use and send it off to the cloud, get it done and it comes
back. [inaudible] but doesn't help [inaudible].
>>: Will it does help [inaudible] but the good thing is you get those things [inaudible].
>>: Uh-huh.
>> Ayman Afanah: Here basically what I want to do is I want to do some cool animation
on this. So what I will do I will just go to the XAML page here and here you can see you
have all of the XAML code, and what it did for you is it actually just saved you a bunch
of time on defining what is the gradient. We will do the same trick we did before. We
minimize this. So you can see here it basically drew up all of the XAML for you, so you
don't need to actually worry about what is the color for this, what is the color for that.
You can actually just use Blend and it will actually make it easier for you and the cool
part is this project can actually be opened in Visual Studio so for example I can say edit
here, I can say here, and like I can select the actual project. The mouse is a little…So you
can actually view your XAML for it.
So moving on I will just show you sort of how to do animation. So here what you have
to do is create a new Storyboard so we will do a demo here. So here what you have on
the left pane is actually the time lines that you want. So now we are actually starting
recording. So now I can select this, move it over here, and I can say over here I can say
at this time frame I want it to be over here. And as well as I can do some--basically we
have a lot of cool stuff as far as the e-zine function where I can actually now apply other
Transforms to it as well. Now I have actually moved it over here and now I want to do
something at this time where I want to rotate it a little bit. So this is the projection. I am
actually rotating it towards us and I want to do this as well here, actually rotate it this
way. And then at this time frame I want to move it over here basically. So the idea now
is now I can do a play; it will actually do all of this for you as well. So the idea is I will
create all of this Storyboard for you really quickly. You don't actually have to write all of
this code. You don't have to worry about okay if it's this projection I have to apply this
function to it. You can just apply it here really quickly and you can get going easily.
And as I said before--and also if you want to stop, you can just stop the launching of it as
well.
Also here you have, so all of this you just created this Storyboard in XAML for you so
you can actually use it as well as it created all of these transformations that you have,
which is basically as I said before you can apply Transforms into any object that you
have. Here we actually applied it to the rectangle. And also the cool part about Blend is
you can actually launch it in the emulator as well. It is basically as if it is a development
tool for you as well. So now I can launch it in emulator and see how it actually looks.
Now I think here the problem is simply what will happen is it won't move. It will
actually be static. And the reason is because we actually just created this Storyboard; we
did not hook up the events for it. Now there are two schools of thought. One is to
actually leave it to the developer to hook up all the events and just basically have the
designer do what is really the behavior. The other is to have the designer also define
what is the behavior if it is something really quick. And in Blend you can actually do
that really quickly. So here you can actually, this emulator you can run it from Visual
Studio as well as Blend. So the idea is you do not have reduced functionality as well.
So basically this is the app. I can actually keep it in there. And I can actually just run
again for it. So here the idea is I can now define a new behavior where I can say you can
go from the left side, you can select all of these controls. One of them, you have a lot of
things out of the box, so for us we want something, something called behaviors. So the
idea here is you can actually control a lot of the events in your program, you can actually
hook them up from Blend as well. So the idea here is I want to control the Storyboard.
When does it happen? That is what I want to do and to what do I want to apply it? So
instead of actually writing it in code I can do it from the UI here really quick. So here I
actually select which element that I want to apply it to, I say this one over here. Oh,
okay. I can say on this dude and can I create both? Yes. Here I basically say okay on
which do I want to apply to? Which we said to the rectangle. Basically what is the
event? And so here it just loaded. Like once it loads I can apply this Animation. So
once we go back into the emulator--I forgot to do one thing here. Let me see here.
>>: Did you set up [inaudible]?
>> Ayman Afanah: I am sorry, yeah? Yep. So basically you can actually do it very
quickly, very easily. So that is basically what is there in Transforms. You can do a lot of
cool stuff with it, a lot of cool Animations. I am like the technical guy. I don't know a
lot of cool stuff to do but probably all of you guys have a lot of cool ideas to actually
implement on the phone and we are looking forward to it.
So that is, that over here and--the other cool part about Silverlight is actually you can
apply a consistent format to everything. So the idea behind it is you can actually in your
resources you can define what is really the style that you want to apply. So here really
quickly I can--so the idea behind it is simply in this example here, what I am doing is just
saying what is the target type. Like any text box that I want, I want it to have this set of
properties. So here basically what I am saying is always have the setter where it says,
okay, I want the font size to be this and I want the property to be a certain point. Now
this is very basic. You can actually go crazy in terms of the style. And this is how we
actually implemented it on the phone as well. Basically we applied the styles specific for
the phone which matches the [inaudible] design which basically makes it more consistent
with the shell and UI [inaudible] so basically any app that you write out of the box, it
actually looks as if it is the first part of the app. It is not something like a third-party
developer may have written it.
So with that I can just go quickly into the demo. Here I created an already done project.
Let me just do this here real quick. So basically this is any project that you have. We
will just hide this here really quick. So here what we have is just simply a project of, I
created an app that has three types of buttons. So basically here in my main page that is
XAML I have the default button which is simply, oh this is going to be tricky. That is
not going to do it. Let me just do it dude. So the idea behind it here is I have three types
of buttons. This one, the first one is just button XAML with so on and so forth. And
basically I did not set it up to any style. The second one I basically applied like a really
quick style to it which is basically custom button. So if you actually go to this style over
here, basically what I did is I just said okay, the control template which is basically
saying okay what do I want to do with the actual UI. And I said basically set the width to
the height of the template itself and so it automatically calculates it for you. So basically
if you expand it, you collapse it, you can, it will maintain its same height and width.
Here basically as we did like in Blend I defined what is the gradient color and where does
it stop and where does it end? So basically those are kind of the radial gradient brush
which basically defines you can do, like the colors here and the other colors over on the
other side. So basically this is offset and what is really the colors on both ends of the
spectrum. And basically, yeah, I defined my button to be an ellipse, and I defined what
that ellipse is actually filled with. Here the content presenter is basically simply whatever
is the content of the button, so when you go actually to main page that is XAML and you
see this content over here, it is basically this one over here. Like how do you want to
present this content of the button? And that is basically what we did over here really
quick.
Now of course I have another style here for text. So it is not only just for buttons; you
can also do it for all kinds of controls. So here I have one for text. I can show you really
quick how does it make a difference. So here this is called subheading text. So basically
we have this, keep an eye on this text over here. All I am going to do is simply instead of
actually using the default phone templates, default phone styles; I will just change it to
something else. So I will just go with heading, what was it called? Ah, subheading text,
thanks. So basically, we just kind of flipped it over real quickly for you, so the idea is
that if you have multiple texts and you want them to have the same style you can do that.
And the way you do it is you actually have something an app in XAML which basically
holds your resources.
So the idea behind it is that in your application resources you can set the common things
for all of the pages in your app to actually use. So that is basically one of them. Here for
now this is a very complicated, like really cool but somewhat kind of involved template.
So the idea behind this one, I will just show you kind of snippets of it. Is basically we are
defining how it looks like. Now we are also defining the transition, like if you click it
what will happen in the background, what color does it give. So the idea is you are
giving some transition to it as well. So the way that you control that is actually by visual
state manager. So the idea behind it is you can create the template as we did before.
Then you can define your visual state manager which will kind of give you all the
Storyboards on top of it where you can define how does it behave at certain points.
So I will just go over it real quickly here. So what we are doing here is creating the
Storyboards that we want and giving them names that coordinate with the events, like
when I press I say visual state.press and it will actually do this Animation for me. And
the same thing with, if it is actually disabled as well. Like if it is disabled it will actually
be a different color. So yeah, with that I can just show you really quickly how does it
look like in XAML, on the emulator here. Let me just close this dude first. Anyone have
any questions until this thing comes up? Go ahead.
>>: You can actually create the styles and then expressions in Blend as well?
>> Ayman Afanah: Yes you can. And actually there are a lot of cool tools there as well.
You can actually like add a new style, you can do it then you can actually export it as
well. Or you can just actually open it up in Visual Studio and the style will be there as
well. So the idea here is, this is the default button which is from the phone page. This
one here we did not define the kind of the pressed events so it is just simply kind of the
shape of it. This one here, as you can see, we are actually managing the visual state for
it. We are actually saying change the color for it once I press on it. So here it gives you
an idea of what styles you can do, like if you wanted a custom control or anything that
you wanted you can actually do very easily as well with Silverlight.
Now the other cool part… Oh, we have a question. Yes?
>>: About the events in the states, are they based on like the states from a mouse? In
Silverlight I saw focused and as far as [inaudible] how does that connect to, how does
that sync up with the phone?
>> Ayman Afanah: It syncs up, so the way you actually, in terms of all the events that
you have in Silverlight you can actually hook them up through the visual state control.
So that is kind of the way that you would do them. So your question is how easy it is or
how, what are the limitations?
>>: What are the specific to the phone?
>> Ayman Afanah: Specific to the phone. Basically whatever you want it to be. So
basically you can give every state and name and then you can enable it any time you
hook it up to the events that are actually available on the phone. So whatever events are
available on the phone, you can actually hook them up to it, so that is kind of the way that
you do it. Please, go ahead.
>>: [inaudible] events only or can they I don't know [inaudible]
>> Ayman Afanah: You mean in terms of like does it only happen on that object or…?
>>: Yeah, so [inaudible] can be [inaudible]
>> Ayman Afanah: Oh you mean, okay, okay. I see what you mean. Like for controls,
it won't happen that often, but it should be fine. It is kind of atomic, but it is basically up
to you to handle it.
>>: There is no guarantee [inaudible]
>> Ayman Afanah: Now it is actually guarantee, like each event that you actually hook
up, it will actually fire the correct event for you. Should we give folks five minutes? All
right. Okay.
>> Ben Lower: Five minutes, you can have some pizza.
>> Ayman Afanah: So the next item we are going to talk about is just simply like if you
have a list box how do most people here actually control what is in the list box, and you
select something out, how does it go away? How do you actually manage the data that
you have in your apps? Just as a general question, how do you guys usually do it?
>>: Data binding.
>> Ayman Afanah: Data binding, okay, good point. [laughter]. Basically what we have
here is just a simple way of actually managing how you actually connect the data with the
controls that you have. So here what we have is property binding as well as list binding
as well. So the idea is let's say that you have a list box, you can just control one item of it
where you can just control the observable collection or any kind of list that you have, and
it will actually automatically update your list box automatically. So this way you don't
actually need to manage basically, okay select it, make sure you take it out and you have
to manage like multiple data at the same time. You can just control it from one endpoint.
So basically there are a couple of ways of doing it. You can actually do it in a two-way
connection or just in a one-way. So you can have the source control that is over there or
you can have them both controlling each other as well. With that I can actually just show
you a quick demo here. I love this mouse. So basically this is a solution that we have
done. So basically what I am doing is I have a list of images that I basically have
automatically kind of pre-populated. All I am doing is basically putting them in a list
box. So what I am showing you now is just simple binding and what does it mean. Like
list binding, how do you actually do it, as well as some advanced scenarios where you
can actually implement your own kind of collections. So it is not just simply text, you
can actually have anything you want in a list box where you can add images plus text, the
list goes on and on.
With that I can just show you some cool like really quick on the simple one. All right.
The simple one is just simply what I am going to do is I am going to take two list boxes
and let one control the other, which is actually going over there. So I will just add, what
is it? This text box as well as this text block over here, so the idea is you can think of it
as you are going to implement kind of a typing scenario as well. So here we have these
two text boxes and what I am going to do is just rename them real quick. So we will just
say this is input and this is output. And what I will do is just basically add like a data
binding to it. So what I will do is I will say, what is the text in it. And I will say I want
to bind it to something, and I say I want to bind the text. So it is kind of like, okay, what
do you want to bind? So here this is the target property that you want to actually bind.
And you can also add like with which kind of control that you want to bind it to. So the
idea behind it here is let's say you have multiple controls, instead of actually knowing
which property you want, you can actually just hook that control with the other one very
quickly and very easily.
So here basically I can just say element. Excuse me?
>>: Is that like [inaudible] equals text and it pushes the property name and then the
element will be the other object or control [inaudible]?
>> Ayman Afanah: Yes, exactly. That is how it is going to be. I think I have another
text, that is why. Yea, this one here. Here I can give it a nickname and I can say input.
And we will go to this bad boy here. Here we are good. I got it, I got it, I got it. There
we go. So the idea behind it is where we can actually run this real quick. Here I can
control it by saying this. And you can see it automatically binds it to the output text. So
basically you don't need to have events saying this is equal to that. Here it is actually
handled for you pretty quickly. So that is some of the simple data binding that you can
do quickly on the phone.
Now for list box is kind of the same thing as well. So was just basically stopped by doing
this session here. And we can go to… So here we can actually go to the list XAML kind
of example, where I can create like a quick list box. So what I will do is I will simply
drag and drop like a really quick list box here, and what I will do is basically in my
XAML I will just create a really quick, in my code I will just create a quick string over
here of stuff of what it is.
So I will just do a string of stuff over there. Let me see there. Also if you want I can
show you kind of the way that you can do to wait binding as well, where you can actually
have two of them controlling each other. So if we want to go ahead and do that. Here I
will just continue this on really quick. So here basically I can do aircraft and in my thing
here I can do aircraft. And I can do it this way here. B-15. So what I will do here is
simply say here, basically bind this to the list that I actually created. List box.1.item
source is basically just equal to aircraft. So the idea behind it here is I do not need to
actually--I think it is better this way. There we go. So basically what I am doing is just
basically creating a list box and just immediately giving the source to any type of
collection that I have. So the idea behind it is that you don't need to worry about the
types. You don't have to worry about if this type actually matches that one. You can just
immediately any type of collection you can actually just set your controls to that item and
it will actually control the content of the list box from this collection over here that you
have. And that is basically it for this app over here. So if I go to this binding it actually
automatically just basically points it out and you can actually edit them the way you
want.
>>: Can you have a list box for each row has a custom view?
>> Ayman Afanah: That is the next one that we are actually looking at, so this one here
is now the advanced one, or the one that we are actually taking a look at. So basically
this is the advanced view. What we have is in my XAML, this is kind of the way that
you would control it. So A, you would actually have to in your list box, you will create a
data template with item templates as well. So here you actually define how does the data
look like. So what we did here is we actually defined the item template and we defined
like a data template type, and we basically said okay, the data should look like in a
StackPanel where you have, as we said StackPanel stacks them together at the same time
and you don't have to worry about a thing.
And here basically what you are saying is I want both, I want to have the source as a
image and as well as a text box, which is basically the most common kind of scenario that
you will have. Here basically we said okay, bind this to like thumbnail and name. Now
those actually come from this specific class that we actually created. So the way that you
would do it is simply we create an aircraft class which simply is just a string and like the
source to the actual images that you want to actually set. So all we did is basically define
those and we made it inherent i notification property changed. So this what it does is
simply says okay, I want this to be hooked up with the notification events, so this way
whenever it actually changes, it actually raises up an event, so you basically go through
your normal kind of methods as well as constructors.
Here this is the important part where you can actually say that in the set you can actually
fire off the event saying okay, the property has changed. So this way if you have a
collection of this class and it actually changed you can actually now fire up the event and
you can actually, the list box will actually handle it for you. And the same thing with the
thumbnail as well. If that happened, you can actually raise it up and you can actually
raise this event over here with your thumbnail. And that is how you got the data binding
one where name and thumbnail basically they come from over here.
So back to our XAML over here, so basically that is it. We just define kind of the data
template as to how does it look like, and now the other item we need to hook up is just
simply the button where if I click delete, it actually takes it out. So going to the code for
that one, let me just see here. So here what I am doing simply is just creating a list of
type class and that is how you have to do it. So any items that you actually wanted to
data bind it has to be from the generic class. So either it can be a list, an array or any
kind of genetic collection that you want. Here I am basically just statically creating them
one by one and I am just data binding the list box that I have into this observable
collection that I just created. So it is just simply, I have a collection; I set it up there and
that is it. Now here in the deleted but, all I am doing is deleting it from the actual
collection that we created, so we are not actually managing the list box, we are managing
the observable collection for it. And that is how it is actually been controlled. And with
that, yeah, that is basically how you can do data binding with, over the Silverlight. Any
questions in regards to this? Okay cool. We can actually just move along. I think we are
at the right time here.
Basically the idea behind, just kind of to wrap up things, the idea behind it is to make
sure that if you have code on the desktop, especially with Silverlight, make sure that you
can actually reuse it. Also if you have custom controls you can port them in very easily
to the phone. Also in terms of if you have, say basically reuse as much UI and as much
code as you want from the desktop into the phone as well. And with that basically just
the call to action is download the tools, start building like really cool apps. You know,
you guys are young; you have a lot of cool ideas. And yeah, if you have any questions
please let us know and we can help you out. Cool. Any questions?
>>: Will you be posting all the examples that you just did today?
>> Ayman Afanah: Yes, I will. Yeah, any questions, it's okay. Ah, please?
>>: When you post those examples [inaudible] because it doesn't work at home. We
only have access to the page at work.
>> Ayman Afanah: I see what you mean, okay.
>>: Repeat the question.
>> Ayman Afanah: Basically the question is can we post them instead of just in the
domain, instead of just posting it internally, can we actually post it externally as well
where folks actually from home can download them. I can post those out. Those
shouldn't be so bad. Yeah, cool.
>> Ben Lower: All right, thanks Ayman.
>> Ayman Afanah: All right, cool, thanks guys. [applause]