>> Jeremy Foster: Hari has come and helped out at a number of events for me presenting about
Blend. You work in the product group for Blend, right? And so he's going to talk tonight about
Blend. He's going to fill up most of the time talking about Blend as it applies to your XAML and
C# development, and then I'm going to come up for just a little bit afterwards and talk about how
all of that, all of the Blend goodness applies if you're doing HTML and JavaScript development.
Okay? So please welcome Hari Menon.
[applause].
>> Harikrishna Menon: So it's great being here. So I work in the XAML Design tools team.
We pretty much own all XAML tooling across every platform, like WPF, Silverlight, Windows
Phone and Windows [inaudible].
So one big thing that we did for the last release was -- I don't know how many people have used
XAML Design in dev 10. Anybody used it? So dev 10 designer was completely different code
base. Oh, I'm sorry. So yeah. So the dev 10 code designer was completely different from the
Blend 1, so we had two different code baseline on Microsoft. So what we did for last release, we
took the Blend designer and moved that into VS as well. So we have the exact same experience
in both products.
A common people that people ask is that why do you have two different products, right, you
know, it's the same designer. The reason is we wanted Blend to be a place where people do
designed focused tasks. In VS you have a lot of windows flying around. In Blend you only have
those things that you need accomplish the design tasks. Everything else is actually hidden away.
You don't have to worry about it. In VS we want to be a place where people can do complex
operations like actually writing code or actually doing a factoring. And we wanted to actually
make these products different in that way.
Going forwards we'll invest more of our time in doing design tooling in Blend and doing
probably more stuff like advanced [inaudible] or better factoring features for VS.
So is everybody here a XAML developer, or like are there any HTML folks here?
>>: HTML.
>> Harikrishna Menon: HTML, right? So I know Jeremy is going to talk about HTML and
JavaScript, but I thought I should make my case for XAML as well. So why would you want to
use XAML? If you've been a [inaudible] for the past let's say seven years, you have definitely
touched -- you probably touched WPF, Silverlight, and Windows Phone. It's very easy to port
your skills over. The exact things XAML, almost all the constructs are the same. There are
some slight differences, but not that many that you would find it difficult to move on.
For developers new to XAML, XAML is basically describing objects in a declarative model. So
it's very powerful. You can pretty much write your entire UI in XAML. There are certain
patterns like MVVM that allow you to make sure that your application UI and your data model
or your logic is actually very separate.
For Windows Store there are a lot of free third-party libraries out there that help you get started
on this, so you can ground-up build the application in a very, you know -- in a very well
architected fashion actually.
Then the XAML platform team ships a lot of controls out of the box. There are some that you
probably won't find that you'll find in JavaScript at this point, things like menu fly-out
[inaudible] buttons. But some of these controls are available from third-party custom control
providers like [inaudible] controls, or even there are open source libraries like Color Store
[phonetic] that is available that it can download using the [inaudible] manager in Visual Studio
itself that provides these kind of controls for you.
Then if you want to write a custom control, it's very easy. It's as simple as deriving from a type
and then you could write your custom behavior and you have a new control that you can share
with other people or you can use an application.
So I'm going to skip this slide. We already talked about this. I'm just going to tell you like what
we offer in VS and what we offer in Blend. In VS you can basically do things like control
creation, layout, property editing, basic data. But in Blend you have more advanced
functionalities for XAML where I can actually edit path vectors. You can declare vector
[inaudible] in XAML as paths and you can actually edit that in Blend.
You can do styling. You can edit templates, edit control styles, edit data templates. You can do
data binding. You can even edit states in a visual manner. You don't have to actually change a
state value, F5, and see how it's going to look like. You can actually do that within Blend itself.
And I'll show you how.
Then you can set transitions. And we even offer you ways to import Illustrator and Photoshop
files, so you can import your essence using Blend and actually incorporate that into your
Windows 8 app.
So how do we help you get started. A lot of time for the last release we spent on actually
creating a whole bunch of templates, like the grid app, the split app, a lot of item templates like
contract that really helps you get started pretty fast.
These templates in Visual Studio, if you say new project, you go to Windows Store, you'll see a
grid app, right? That thing's almost a completely functional Windows Store app. It basically has
a navigation built into it, it responds to layout changes, like if you snap your app to snap, it will
actually make the correct transfer on the UI. And all the plumbing is built in for you, even things
like [inaudible] suspension manager is also a part of the template.
So it's up to individuals. I've seen certain people actually build their entire app starting from
grid, other people actually take a new -- they create a blank application and just selectively input
assets from the grid app and use it. So it's up to you.
But there's a whole lot of functionality in the templates and you should definitely take a look at it
if you're going to start a new app.
The same thing for JavaScript as well. They are the exact same templates and a couple of more
than JavaScript would. We also have item templates for contrast like every Windows app should
theoretically if it sense to support share and search contracts. So we have item templates that
you basically say, hey, add this new contract, we insert code on everything for you such that it
just works out of the box. So you should give that a try. We'll go through that in a couple of
minutes.
Around seven months my manager wanted me to actually go ahead and build what he hoped was
good looking app. So I was like, okay, fine, I'll build something that has movies and I really
wanted to use some kind of a REST API, so I choose Flixster. So what you see on the right is
basically just a grid with a couple of fancy images in the background and a grid view that is
bound to some data source, which is actually live data.
One more thing in the Blend designer is that the Blend designer is almost a full running
Windows Store app. We pretty much execute every piece of code in a project, and that helps us
actually give you a very visible experience. What you see on the UI in Blend is almost always
what you'll see when you actually [inaudible] provided you have the correct data model
[inaudible].
So what you see here is I'm actually talking to a live Flixster service and that data is on the
designer itself. This is not F5 from the app. It's actually F5 -- I just took a screen shot from
Blend itself.
Now, so this is basically what we'd walk through in demo is I'll take an app from the start and
we'll try building something that is similar using Blend itself and probably not -- I don't have to
write any hand code, any XAML.
So let's do that. Before -- before that, let me just show you the template that I'm talking about
and what you need to know about it.
[inaudible] project. Select Windows Store. By the way, this is all publically available
[inaudible]. There is nothing new or fancy. It's just [inaudible] team. So, sorry, [inaudible]
2012 with update to.
So I'm just going to hit okay. I'm just going to open [inaudible] page. So you have this exact
same design in Blend as well. We can create projects in Blend as well.
If you look at the common folder, you know, there a whole bunch of things here that are very
useful. For example, layout of our page. Every page in this particular template derives from this
particular type. And this actually has things like it responds to, you know, your keyboard input.
So it's a very good reference point to figure out how do you want to respond to keyboard input,
how do you want to respond to touch input, how do you like your suspension manager to work,
everything is actually enabled in this particular template.
So you can just take a look at it whenever you're building your app and probably copy over stuff
into your app and it will just work. It's very well tested as well, so it's a good starting point for
you.
And if I do -- if I click the project -- one sec -- and I go to Windows Store, you can basically see
we have contracts like file open, search contract, and shared contract. When you add these
contracts, we inject currently our solution so that the correct hookups for the Windows
[inaudible] is actually set up so when you [inaudible] and hit check contract, the page will
automatically get hooked into it.
So all that is done for you behind the colors, and that's pretty awesome. So that's the templates.
Please feel free to stop me at any time and ask questions if you have anything around these
topics.
Let me start it off. So I've just opened this application here. I'm just going to show you the
XAML for a bit. As you can see, all it does is I have a collection view source that's bound to our
groups in my data model. The data model I've actually declared as a static resource.
This collection -- the reason why we use collection resource is basically to support grouping.
Because I want to group by like the rating or audience rating or the critic's rating. So I have to
provide a group data source. And CVS converts a group data source into something that the grid
view control and the list view control recognizes and then shows data in a group by format.
So our data template, let's not look at that. I'll create data better from scratch there. And all my
application has as time is a path that basically defines this guy over here, which I have imported
from Illustrator. So the grid view is now [inaudible] property is set to the grouped items view
source that we saw.
So first I want to basically create a simple tile that shows the image of the movie and the name of
the movie. So what I can do for that is right click on the grid view control and go to edit
additional templates, edit item template, and say create empty. So this box lets me choose where
to put the data template.
So a common thing. If you go to use the data template only in one place, you might as well put it
in the same document, the reason being Blend has much better support for [inaudible] the same
document. You can edit these resources within the scope of the space itself. Let's say if I put
that in application, when you do edit template again, we'll have to take you to [inaudible] XAML
to edit that. So we can't edit in place.
So if you put in this application, Blend can allow you to edit this thing in place. So I'm just
going to hit okay. You can see the new data place created, a grid was here, [inaudible] as well
by default. And like the grid, you can see that there's nothing there, right?
So I'm going to set a height of it to let's say 200. The height at 250. You can see the random
design surface itself. And because this is a grid, we support a whole lot of design time for grid. I
can basically click here and create a row instantly. So I have a row here. You can see the row
definition, everything was set right ->>: What were you doing at that point? Were you just simply hovering your mouse?
>> Harikrishna Menon: I just hovered my mouse over. So that [inaudible] is for grid. Then I'm
going to go to the [inaudible] panel. I want to search for the text. This text look right. Yeah.
I'm going to drag/drop that to this area. So you can see every single item now has a text block to
it. And I'm going to just do a recent layout just so the external margin and everything is removed
and it fits completely into this particular area defined by the grid.
Now I'm going to do a data binding. I'm going to select this text property over here and head to
create data binding. I'll show that actually on a different screen.
>>: [inaudible]?
>> Harikrishna Menon: Which one?
>>: So actually the XAML.
>> Harikrishna Menon: Yeah.
>>: You had the [inaudible]?
>> Harikrishna Menon: Yeah. So this is -- [inaudible] 2-1-1 it's absolute pixels to one star
basically sizes.
>>: Sizes?
>> Harikrishna Menon: How do I explain it? For example, star star means equal.
>>: Yep, in that area.
>> Harikrishna Menon: Right? So 2-1-1 basically means if you have -- let's say you have
hundred pixels available, a 200 star will translate to the current relative layout. So ->>: So basically you can divide those based on the [inaudible]?
>> Harikrishna Menon: Exactly. Related to the size of the thing. It's not exact pixels, though.
It will translate itself. So I have that here. I'm just going to click on text, create data binding,
and you can see that Blend now actually flows data context over, so right now we know what
property is available in data context for it to bind to.
So I can just go ahead and click display title and click okay. So you can see that now -- you the
see the name of the movie is here, right? The next what I'd like to do is I'm going to search for
image control, drag it off the top one over here, right click, recent layout, it fits in. I'm now
going to bind the source property to a property in the data model. I'm going to click search,
create data binding, and select profile.
So that's easy. It's that easy to actually design [inaudible]. All you got to do is create a data
template, you start binding to your properties and data model, and it instantly lights up. And it's
actually live data from the service itself. I don't have any sample data or anything. It's actually
running pure user code at this point.
So we basically have some form, you know, something that we want. So I'm going to make it a
little bit more prettier. I'm going to select the text block, and I can do operations like group into,
a border, and I'm going to select the border, go over to the property inspector and just select
something like black.
I can select the image over here and change this property so that it's uniform to fill, so it kind of
fills up the space that's available. And I have something similar to my actual finished running
app. Now I'm going to scope, so right now on the data template editing scope. So I need the
scoper to come back to the actual tree, the visual tree of the current document.
I want to come up and see if it refreshes, you can see everything here. What I'm going to do next
is basically add groups to this grid view. I can do that by right clicking on the grid view again
and execute the add groups [inaudible] command.
So now basically a new group service added to this grid view. The whole XAML, everything is
inserted for you, you have nothing to worry about. But I need to start it now. So what I can do
for that is right click on the grid view again, go to edit group style, edit header template and edit
current.
So you can see there's a small space over there. And this label text block, go to the text property,
hit data binding, and you can see that even we flow down the correct schema to an item in the
group. So collect title and hit okay.
So the title is pretty tiny at this point. I want to set to a style. So, by the way, all the templates
come with a file called standard size of XAML. It's basically Windows approved styles for like
what should the size of your page header be, what should the size of your subtitle be. So all that
is prepackaged with the templates itself. So I've added that particular file to my solution as well.
So I'm just going to set edit style, apply resource, and I'm going to set as the product [inaudible].
And the style is instantly applied.
I can select the text block again, so group into a border. Set a slightly different color. And that's
it. Then I'm going to scoop up -- I wouldn't really change the whole layout of my group. If you
look at my final application, it basically has a group on -- the group header on the left side and
items on the right. But this is like topdown. I want to change that layout completely. I can do
that by going up where I click on the grid view again, go into edit group style, edit container
style -- sorry. Yeah, item container style, and hit edit current.
So you can see a whole box has been drawn around the whole -- in the group. I can select the
grid. So this [inaudible] center is where the header is actually -- the header of the group is
actually placed at. The items control is used to display the items in that particular group. Right?
There's not just one. So I want to select the content for center -- sorry, the grid.
And I'm going to delete the rows off. I don't really need rows, I need columns, so I can just
delete the rows. Then I'm just going to add a column over here, select the content for center, go
to properties, and set the column index to 0 and the column span to 1.
I'll select the image that is items control over here, set the column to 1, the column span to 1 as
well, so you can see that basically it moved out of the way, right? But it is kind of big, though.
That is surprising. Oh, yeah, I should set a size for it. So you can see that now it's two different
things. I can set the items control, set a margin to it so it stays a bit away from the title. I can
use a property inspector for pretty much everything except like [inaudible] pixels.
I'm going to scope, scope up for a moment, edit quick view, edit group style, header template,
select the border and set a height and width to it.
So that looks a bit better. Still not really good. We'll just go back into editing the container style
again. Let me see why this is set so far away. One moment. Yeah, this is not really behaving
well this time. It should actually go up. So basically if you make a little more edits, you can
actually move the header template at top and keep the group item on the left side itself.
So if I just F5 this application right now -- this is going to move that aware function, Windows
function, page up. So there's one problem in the default template. I really don't like this whole
blue border over here, like how would you change that. This only happens when there is like -when you actually select that element. So I can use Blend to edit any state. A state in a control
in XAML is basically what we call visual states. It is a control using something called visual
state manager. I think of visual state as a user state input, so there could be things check state or
selected state, selecting state, dragging state.
So in XAML what we can do is you can specify in these user inputs or in these actions I want my
UI to change so and so. So basically states is just a property [inaudible]. It's the setup properties
you set to modify the look and feel of your element based on some user interaction.
And these states are internally called by the controls logic. So when a control sees a mouse over,
it actually calls internally mouse-over state. The mouse-over state will contain some property
settings which will basically change the look and feel of the control.
So I'm just going to close this, come back. What I can do is I'm going to right click the edit
quick view, go to edit additional templates, container style, edit a copy. Hmm. What would that
go to? Sorry. That's fine. I'm going to go to states. If I go to states, and I see -- so you can see a
whole lot of states here, like normal. Normal is a base state. This is what the control is in the
normal [inaudible], when there's no user interaction whatsoever.
[inaudible] presses on it, you can see that there is a different, then a disabled, you can do pointer
over. And if you come down, you can see a whole lot of selection states. So we can see selected
over here.
So in selected we can see the whole blue border with a check mark. I really don't want this to be
shown in selected state, I'd almost like it to just be black. So what I can do is open the document
outline in Blend, and you can see these red mark -- these red record buttons. It shows that this
element has been changed in this state.
So we can further drill down. I can keep drilling down until I find which element actually
changed. So I can go and see that, hey, this is the selected check mark. So probably in this state
I can set it to collapsed and it's gone. So you don't really have to do multiple iterations of F5,
change something, come back, see how it is. I can basically do those interactions here, change
those values without having to do multiple round trips.
Then I can go a bit more. I can select the selected border. You can see, hey, this has a stroke
over here, I want to change that to let's say a different shade of black. And there is actually two
borders, so it will change in a couple of places. But contain border, that's foreground, yeah,
change this guy as well. Give me a sec. Hmm. Did that change? Yeah, it's black, so it's right.
Sorry. I thought it was actually blue still. So it's pretty easy to actually modify states and stuff
in Blend itself.
So have you guys ever written states and everything by hand or do you guys all do writing states
by hand, you do hand coding, right, pretty much all the time. So you can see it's much easier to
actually use Blend in these situations.
The last thing I want to show you is working with animations. So Blend has a full-fledged
animation editor. You can create traditional applications using key frame animations, color
animations, et cetera.
We also support actually authoring team animations. Team animations is a part of the Windows
8 animation library. So if you open the control panel and stuff, the new settings app in
Windows, you can see things fading in and fading out. You don't really have to write those
animations yourself anymore by changing the opacity or the visibility of the object. There are
pre-canned animations like fade-out animation, fade-in animation, that are used to basically get
those effects in Windows 8 applications without having to hard code any of those.
So there's this whole set. I think there's around 14 animations in whole. And Blend allows you
to alter those animations within the context of a state. We have full support for that. So I'll show
you a quick demo of that.
Let's say I really want to bring up -- I'm going to have a text block, I'm going to add a text block
to this page. I'm going to call it -- I just want to give you the movie name. I really like the
whole Zune idea of things moving in the background or slightly moving in the background. So
I'm going to simulate something similar using team animations and standard animations.
I'm going to call it -- let's say Dark Shadows or something. And when I click on it again, edit
style, I'm going to apply a new style to it, like the header text style. So it's pretty big. And I'm
just going to put it in a fancy angle. But I can use Blend right on our system to actually
transform anything, so I can just click here, just -- my mouse is not the best. Okay. Whoops.
Yeah, my mouse is not behaving. I'm just going to change the property in the property inspector
itself.
Okay. Support an angle. I'm going to select the text block, change its foreground property some
other color. So basically if you select this particular button over here, it shows all the resource in
your project, so you can really just select from here as well. So I'm going to just select to this
color, which is not really visible. This is better.
Then what I'm going to do, I'm going over to state panel, and I'm going to add a new state group.
So these state groups over here are like full screen, landscape, filled, portrait, snap, et cetera. It's
to allow the application to respond to different states.
So basically you can actually -- I can select the snap state and say that, hey, in snap state I don't
really want my title to be shown, because there is so much space [inaudible] on 22 pixels. So I
can select this and set the visibility to collapsed if I want to.
And I can see in snap state that particular object is no longer there. But if I go back to full
screen, it comes back. So it's pretty easy to modify states and stuff in Blend itself.
And what I'm going to do is add on a new state group, then I'm going to add a new state to it. A
state group is basically you don't have to really name it or anything, it's just basically a collection
of states. There's nothing special to it. So I'm just going to call it visual state 1 and add one
more state which is visual state 2.
In visual state 1, I would like, you know, this not to be there, and visual state 2 I want to make it
come end with a Windows state animation.
So I'm going to select Dark Shadows, I'm going to select the visual state name over here. You
can see a new property error does show up here. It's call team animations. From this list I can
select let's say the fade-out animation, which actually the box comes under different monitor,
sorry. Yeah, I can select which element I want to apply to. I'm going to say I want to apply to
the text block. I'm going to click okay. So you can see it disappears here.
I'll go to visual state 1. I'm going to add a fade-in animation to it. I can see it come back. So in
my code behind, all I have to do is when my application loads up or something, I just have to
say, hey, visual state manager, go to state and give the state name. And then visual state
manager will actually force the space to go to that state, and you can see that thing come
[inaudible] animation.
In Blend you can even preview these animations by clicking this button over here. It's called
[inaudible] preview. We generally turn this off because of [inaudible] reasons because
[inaudible] everything at 30 frames a second. So if you click on it and then I start targeting the
states, you can see the animation actually happening. It fades in slightly. In runtime it looks
much better.
So that's how we can work with team animations. There's a whole bunch of team animations you
can use. But finally what I've seen people use is the fade in, the pop out. Pretty much most other
once are very specific scenarios. For example, if you look at the split closing animation, the only
place used in Windows is for the [inaudible] box to come up. So when you click on the
[inaudible] box, you can see it like pop and then expand, right? So that is an animation that
Windows uses to simulate that. So it's pretty rare to use some of these animations, but fade in
and pop out are pretty common.
So let's do one of the -- let's do a key frame animation now. So what I'm going to do is I'm going
to group this guy. Let me just come back to base. Go back to [inaudible] panel. And there's
[inaudible] grid over here. Group in another grid. I want to have a really big image in the
background that slowly moves when the application is running and basically moves from X to Y
and Y again to Y negative and just moves around slowly throughout the lifetime application and
basically looks like zoomed right, you have the whole artist thing moving around.
So I just want to simulate something like that. So what I can do for that is add an image control
to this grid over here, set image control's source to one of my -- oh, you can see that it's over
there. I'm going to set it to reset layout all so it fills the whole space and it's in the background.
But I want to move it, right? So if I move it, I really want it to be bigger than the actual image so
that the user does not see anything, a different shade coming in. So what I'm going to do, I'm
going to go to scale. I'm going to make it 2 1/2 times bigger than you should. Oh, sorry. I did
not -- this is the one. So it actually is much bigger than the normal size. It's basically scaled up.
I'm going to go here, add a new storyboard, so there's a new storyboard here. What I can do is -what I can say is that when the time is four seconds I want the image to move from left to right
by a hundred pixels. So I can select 4 over here, select the image, go to the translate transform.
So there's one thing in Windows you've got to be very careful about when you're writing
animations. There are two kinds of animations, dependent animations and independent
animations. Independent animations are those like if you modify transforms, like you can do a
translate transform, you can make it rotate transforms, those things are independent. Those
happen with, you know -- those happen as vendor threat and doesn't really block the UI threat
from executing.
But things like we want to change the height and width of an element using an animation, that
will cost the UI thread to block because now we have to do the whole thing, measure and early
engine re-lay out the entire thing.
So be always -- so in low powered [inaudible] devices, blocking the UI thread is not good.
You'll actually have -- that's why within certain applications you'll scatter while moving, is
because they might be doing some animations and stuff that are actually blocking the UI thread.
So in Windows you be very careful because we have to support multiple form factors in way
different kinds of tablets out there. Never use dependent animations. Always use independent
animations. And you're safe with transforms, but then modifying like margins and widths and
heights, not a good idea. So that's why I'm doing -- I could do the same thing by making bigger.
I could have done a width, I could just modify the width. I don't want to. I'm actually applying a
transform at that point.
So here I'm just going to set the translate to I want to move it to X like hundred pixels to the
right.
>>: So does the Blend UI tell you what kind of animation?
>> Harikrishna Menon: Yes. If I tried modifying the width, Blend will show a dialogue saying
that, hey, you want to modify it with an animation, you know, click, if you want to proceed.
Some people know what they're doing. In certain situations they might have to develop
animations. They have to take the risk. If you have a lot of elements, guaranteed it's going to
cause performance issues in application.
So I just moved it in a hundred pixels to the right, and now I can display the animation over here,
the image slowing moving to the right. And this is all independent. This happens without
blocking the UI thread. So as long as you're transformed, you're good. And I can just -- yeah.
I'm just going to go right. And let's say at five seconds I wanted to mow another ten pixels
down. I can play the animation again. I can see it slowly actually moving. And then at that
point it actually moves down.
It's pretty easy. I can modify any number of animation grid, all kinds of these animations,
modifying any of the independent properties, and that easy in Blend. You can then set the
property of this. I want it to loop forever, so all I have to do is select the animation over here.
Sorry. And set the repeat behavior to forever. And I'm good. It will keep looping in as long as
the application allows it to explicitly call the storyboard to stop.
So that's pretty much it for my demo section. And if you guys have any questions, please go
ahead. And I can show you a lot more features if you want me to or anything specific you're
interested in. Just let me know. Yeah.
>>: I might have missed it. What version of Blend is this?
>> Harikrishna Menon: This is an update to CDB2, which was just publically released like last
week on 31st. Yeah. But it's same for Metro, it's the same for Windows Store. It is the same as
RTM. There is no difference. We just added support for WPF and Silverlight and update to
CDB2. And, oh, we added Illustrator and Adobe Photoshop support for Metro as well.
So that's pretty much it from Blend. So we have -- like I basically showed you like document
outline, assets panel, I showed you design [inaudible]. I showed you property inspector. There
are a couple of things like device panel, which is pretty cool. You don't really have to leave. So
it supports multiple resolutions, right? If you want to really test without change the monitor, you
know, resolution of application of your monitor or [inaudible] machine or find machine that
support the resolution.
But in Blend you can just go ahead and click that, and we'll actually render the design surface
[inaudible] resolution. So you don't really have to deploy to multiple devices to verify if your
application scales well. You just to have use the device panel and [inaudible] resolution that you
want to test in.
We also allow you to preview how your application would look like if it's in like landscape mode
or fill. All you have to do is, you know, click this snap field view over here, and we resize the
entire [inaudible] to only fill in that area so we can see how the application works in filled view.
We can click snap so we can only have space enough for snap. We can do the same thing for
portrait as well. So we provide a lot of functionality that a device would and what a user would
[inaudible] device within the device panel.
And you can even change your theme. So, as you know, [inaudible] applications, we support
dark, light. The application already chooses, or the user is high contrast and we have to render
things in high contrast. We can even preview those in Blend itself. You don't have to go and
change your system properties to reflect and test it out. You can do it all within Blend.
Another one thing I haven't talked about is resource panel. Resource panel is pretty much our -it's something that helps people in refactoring and stuff. Like you pretty much can see all the
resourcing applications sorted by, grouped by the document it's coming from. It can do complex
things, like it can delete a resource. Deleting a resource means you might break your XAML
because those results might be used in multiple places. But here you can actually say a
converted local value, it will actually bake all the references, make copies of the resource and the
local place itself so that the XAML is always valid.
We do all the factoring heavy work for you. So that's what the resource panel is used for. You
can also directly edit, click on it, and we'll open the style directly so you can edit in place as well.
So that's pretty much it. That's a good rundown of the major Blend features that's available at
this point. Any questions?
>> Jeremy Foster: Actually, before you do some questions, everybody give Hari a round of
applause. Thank you.
[applause].
>> Jeremy Foster: My portion of the presentation is going to be quite short relatively because
you've already seen all the features of Blend and Hari's already showed off all the cool stuff that
it can do. And for the most part Blend is a single story for developing your Windows 8 apps
whether you're using XAML or HTML. But the nature of the different language stacks, HTML,
CSF and JavaScript and then XAML and C#, means that there are going to be a lot of differences
in the app still.
So if you are a Web stack developer, you're going to come to expect what you find in Blend for
the Web stack developers, and if you're a XAML C#, hopefully you'll also come to expect what
you see in Blend for those developers.
You'll see a lot of -- in the C# XAML stack, you'll see a lot of strong typing, a lot of references
all the way back down to exactly where a type was declared and everything. And you don't
always get that in HTML and JavaScript. You know that when you're a Web stack developer,
you're kind of shooting from the hip and there's a lot of stuff that the IDs just can't tell you
because it's all dynamic and there's no way for it to possibly know what type this variable might
be or whatever.
So you'll notice all those differences between the two, but the way that they implemented Blend
for HTML and JavaScript is really exciting, in my opinion. First of all, it's all new. I haven't
seen any IDE that does this. We've had a lot of kind of code-based IDEs in the past, like your
Notepad++, the just raw work with the code only. Of course Visual Studio has had incredible
Web stack IDE support for a long time, very code-based support.
Everybody tries to get into WYSIWYG HTML support, and it seems like developers never really
like it, and I'm one of them. I've never really liked any of the WYSIWYG support that I've
found in any IDE, but Blend is actually the first time I've ever really liked a design-based IDE
for the Web stack, and I'll show you exactly why.
So I've just opened any project. I'm opening my Code Show project. The front page looks like a
lot of Windows 8 and then it's just got a grid of tiles. In my case they represent demos. I'll just
go ahead and run the project here so you can see what Code Show looks like when it's running.
And then I'm going to jump over into Blend with this same project.
>>: That's set for remote machine.
>> Jeremy Foster: I have it set for remote machine. And it's not able to communicate with my
surface, which is currently at my house. Thank you for that. And, by the way, I'm hitting
control F5 to make it faster. I always like to remind people of that.
And I'm also getting this issue with the fact that it's already installed on this machine. I have this
store version, because this is actually in the store. You can't see that. I have the store version
installed on the machine, and so it's not letting me run the app. So all I have to do is go to my
start screen -- I know you can't see this -- go to my start screen and uninstall Code Show real
quick, and then I can go run my app and use the built version.
>> Harikrishna Menon: Another quick tip is you could change your name [inaudible] just give a
different name.
>>: [inaudible].
>> Jeremy Foster: Oh, and it didn't like that. So let me go ahead and try to change the name
using Hari's tip. Not that this is all that important. We're going to see the app running in Blend
in just a second, but this will be nice to -- so here you would put something on there?
>>: [inaudible].
>> Jeremy Foster: Oh. It's freaking out. Oh, well. Well, we'll just go ahead and see it in Blend.
That shouldn't be a problem. Hopefully this stops, though. Okay. Whatever that was. I have no
explanation for that. Okay. So here we are. We're working in Visual Studio because we are a
developer. We're the code guy. We like to look at functions and methods and we love curly
braces, so we're using Visual Studio for this.
But then all of a sudden we need to switch over to kind of design mode or maybe we're handing
off the project to a designer, right, somebody who's going to be looking at the exact same project
but from the perspective of a designer.
So I'm going to right click on Code Show and open in Blend. Now, I actually shouldn't have
done that because I already had it open. There we go. So here it is in Blend. And you can see
that one of the huge -- it's flickering a little bit. One of the huge advantages of Blend is that it's
already -- it's already showing me my app. Boy, I wonder if that's going to stop.
>> Harikrishna Menon: [inaudible] yeah, it's good now.
>> Jeremy Foster: It's good now? Maybe I just shouldn't talk. Oh, well. You guys can
interpolate. So Blend is already showing me what it looks like. Now, let me tell you enough
about Code Show so that you can tell what Blend is doing for me here. Code Show doesn't have
a little JavaScript array of demos that it loads up. It has instead a demos folder, and when my
app starts, an asynchronous process begins that enumerates all of the demos folders in the
project, and for each one it builds some meta-information about that demo and it creates a tile for
it or it creates the list that the tiles are based on.
So all of that JavaScript is actually running in Blend. So this is the first IDE that I've ever seen
where you're actually designing at the same time that you're executing, and there's a lot of power
in that. You guys saw it in the XAML side and you'll see it in the HTML side, too, which is
perhaps even more impressive given the nature of HTML and JavaScript.
But you know the engine, the JavaScript engine that's driving Internet Explorer 10, that engine is
running right now. That's the same exact engine that's driving what you see in Blend.
Now, let me go ahead and click on some of these elements in here. And you can tell that I'm in
design mode, right, when I click on that I get little handles like I want to resize that. Well, that's
design mode, but then I can flip up to interactive mode. Does the XAML side have the same
type of switch?
>> Harikrishna Menon: No, it doesn't.
>> Jeremy Foster: Doesn't have that switch. So I can switch it to interactive mode, and then
you'll see that all my IDE chrome goes away and my flicker enhances. It's not flickering over
here. It looks just beautiful over here. So all of my chrome goes away. And I'm actually
looking at my app now as if I was a user of the app. I'm browsing the app, okay? So now
clicking on a tile doesn't -- it doesn't give me design handles around it. Instead it navigates to
that demo in question.
So what we were talking about is the fact that when you're in Blend you're like in design mode,
but then you just flip this switch and it takes you to interactive mode. And the real reason to do
that is that you can change your state. You can change the page that you're currently on, or if
you're in a card game you can flip a card over, something like that.
You want to change your state like a user would, right? Well, you change that state and then you
flip back out of interactive mode and back into design mode, and the beautiful thing here is that
you still maintain that state. So you're still on the page you navigated to. If you were playing a
card game and you flipped the card over, it's still flipped over.
And if you know anything about JavaScript and HTML, you know the way that we interact with
the HTML elements is by adding little classes to different elements, you decorate it with the
flipped attribute, with the flipped class, and then your CSF knows how to style that card and
maybe show the image or do an animation or whatever.
Well, all those classes are constantly changing their values and all of those class values are
maintained whenever you flip out of interactive mode and back into design mode. Okay. So
that's the nice thing.
So now here I am in design mode on this page. Actually, what I meant to do was while I was
still in interactive mode to swipe over here and look at this grid. Now, you know in XAML
you've got a grid, right, well, when we were releasing Windows 8 and giving people the ability
to program for it in either XAML or HTML, we said we're really going to need to have feature
parity here, we're going to need to give people the same powerful grid implement in HTML that
we have in XAML.
So Microsoft implemented the dash MS dash grid. That's currently our vendor proprietary
prefixed version of the grid CSF attribute, which is a standard in W3C, it's just not really
implemented by any of the other browsers yet. So we had to kind of jump ahead and make sure
we got that thing implemented so that we could reach feature parity with XAML.
So this grid, we have the same powerful grid in HTML that we do in XAML. And I'm actually
using this grid in a way that I probably wouldn't normally to be a whole bunch of little tiny cells.
So let's jump back out of interactive mode and see how it handles those cells.
I can go click, and now notice when I click one time, it actually doesn't know what it is -- there's
a bunch of layered stuff here, so it doesn't know what it is that I wanted to click on, so it just
highlighted the containing element there. But I can click again and then it drills in a little bit
more and now it says now I know what you're actually wanting to click on, that individual cell.
So I click in on that individual cell, and you can see that I've got all the chrome that allows me to
control that grid, modify the sizes and all of that.
So really good -- really good UI for switching between design mode and interactive mode.
Now, if I go back to interactive mode and get myself back to my hub page, and then I flip out of
interactive mode, you saw in the XAML how you got access to all of the styles and the style
inheritance so you can drill into any element and figure out why, for instance, the selected item
had a check mark up in the top right corner, right? Well, in HTML and JavaScript and CSS, we
have a cascading style sheet, CSS, and so you have multiple style sheets, all these layered style
sheets, in a style, for instance, the addition of little check mark or a blue outline or something
like that, could come from anywhere in this CSF inheritance.
There might be at any given point six or ten or 20 different style sheets -- hopefully it's not that
many, different style sheets that are responsible for the styling of any given thing.
Now, it's really cool the way this is implemented because any element that I click on -- so let me
click on this animations tile here, I click a few times until it knows that this is what I want to drill
into, so this tile, how does it get its width. If we look over at the right, it tells us that its width
property is 250 pixels, but where does that come from? You see on the top it says winning
properties? That means that it applied all of those cascading style sheets and determined that 250
pixels was winning the value.
In other words, maybe the width of that tile was specified down deep in the WinJS CSS file for
us, but then maybe we overwrote it in our default .CSF and then maybe for the specific page we
overwrote it again and said I want you to be 250 pixels. Who knows what that cascading
inheritance was. But when you have winning properties selected here, it actually tells you just
the winning one.
And the cool thing is that it knows where that came from. So if I go and change 250 pixels to,
say, 240 pixels, it knows which CSS file to change that in.
Now, if it is able to change it for us, then ducky, but sometimes it's not. Let's look down at some
of these properties are grayed out. That means that it got that property but it's in a CSS file that's
read only. Usually that means it's in the WinJS. There are two CSS files in the WinJS library,
UI light and UI dark. In this case I'm using UI light. And so actually if I hover over those, I
already am, you cannot edit this property because it's declared in UI light .CSS. So it's not going
to let me change that one.
Sometimes I actually -- and, again, I'm going to drill back into the CSS grid in interactive mode
and then flip -- and then I'm going to scroll all the way to the right, flip back out of interactive
mode, and I'm going to click on one of these little grid items again.
Now, the properties on the right -- takes a little while for them to refresh. The properties on the
right have a little blue outline around them. What do you suppose that one means? Any
guesses? They're also gray. That's a hint. I can't change them. Why not?
>>: They're coming from JavaScript?
>> Jeremy Foster: They're coming from JavaScript. They're dynamically created. It's created at
runtime. These properties can't be changed because basically you did it with code. So this
whole grid, I didn't do that declaratively. That would have taken me a week. I actually ran
through a couple loops and got some random color numbers and created that grid.
And because I did that in JavaScript, it's saying it's ridiculous for you to think that you can come
in here and change this color to something else, because what do I change for you? There's not a
CSS file that did this. This was done using JavaScript.
So it's really supersmart about where all these styles came from and what it needs to go change
to do this.
The thing that I think is really cool is that for the developer, because XAML and C# have -we've done so much work to give them quite a bit of feature parity and because Blend actually
really ties those together really well, now you have a bit of a consistent development story where
you understand Blend and where the properties are and where to go do things, and it kind of
means that you can take your XAML C# skills and translate those right over to the HTML
JavaScript world. Somewhat. There's still the nature of the beast in here and you still need to
kind of get used to it.
Okay. So the other cool thing that I want to point out about Blend using HTML and JavaScript
is that you've got the live dome running over here. So all of those, however many billions of
pixels I have rendered there in that grid, all of those are a little tiny div, and every single one of
those is available to me in my live DOM. Because they actually exist. So even though these
aren't declared in HTML, I still see them in my live DOM. So I can come over here and I can
click on one of these, and I'm actually grabbing that individual development.
Now, these ones I can't change because of course they were created dynamically, but if I wanted
to, I could right click on one of these, and if I had access to it -- actually, let me just click on
something I do have access to. Like that. And I could add a new class -- see, this is in H2, and
so I could right click on that and I could add a new class to that element, and then I could start
filling out that class and it gives me quite a bit of code support down here in that the whole time
I'm designing I also have access to HTML and my CSF. I can't actually change my CSS pane
here to a JavaScript, but you don't usually want to write your JavaScript in Blend. Doesn't give
you nearly as good a support.
Okay. So let me invite Hari back up and we're going to go ahead and transition from
presentation to Q and A, and you guys can just fire whatever questions you have at us, and I
might be able to answer, say, 15 percent of them.
>> Harikrishna Menon: I know nothing about HTML.
>> Jeremy Foster: And ask XAML C# questions as well.
Do you want to keep your microphone on for Q and A? I think we probably need those.
>>: So what kind of animation support we have on the Blend for JavaScript, like say [inaudible]
available for JavaScript?
>> Jeremy Foster: So the question was what sort of animation support do we have in the HTML
JavaScript world.
The animation support is I would say not as rich as XAML, but it is rich and getting richer, and
it's all due to CSS animations.
So you look in CSS animations -- actually, if you go to IE test drive, Microsoft has that site that
has a lot of really good demonstrations of the capabilities of the IE engine, which is what's being
used behind all this, you can see a lot of those animations.
So we have transitions where we can basically just say any time the user changes or the code
changes a property of an element, I want you to animate the transition from what the value was
to what the value is. So that if I change, for instance, the width from a hundred pixels to 200
pixels, then it goes [making noise], and it gradually gets bigger. So that's a transition.
Now, an animation, you define an animation, just like you do in XAML, you define a storyboard
with animations in it, you define an animation and you can animate the different -- all the
different properties, the CSS properties, and you can create as many key frames as you want.
And then you apply that animation to -- and you give an element to any given class.
And then as soon as an element acquires that class, whether it's because the page just started up
and it had it or because the user did some action and JavaScript went and added that class, as
soon as it acquires that class, that animation runs.
>>: [inaudible] can you show us like how do we do animations in here, even as simple as take a
red box and color it to blue and once again?
>> Jeremy Foster: I think that I would have to kind of think about some of the terms and stuff,
so I think that would be too much thinking in front of you.
>>: Not even like animation, like XAML here [inaudible]?
>> Jeremy Foster: Oh, to do it through Blend?
>>: Yeah.
>> Jeremy Foster: I actually haven't done the animations in Blend before with HTML. I always
do mine by hand.
>> Harikrishna Menon: We can talk about it offline.
>> Jeremy Foster: Yeah, I'd be glad to try to do it afterwards.
>> Harikrishna Menon: I can talk about it, like just ping me offline or after this meeting. We
can talk about it, yeah.
>>: So I have a question about states. When we were doing XAML stuff, I saw like from a little
window there were two different kind of states, one was application state and then one was
visual state. Are those the only two buckets and what exactly ->> Harikrishna Menon: You can create N number of buckets. So visual state group -- so visual
state group is just basically a collection of states. We can have N number of visual state groups
and application. So basically one was for application view states. The reason it's named that
way is because the layout of our page, when the window size changes, right, when it goes into
snapped or filled, it actually cause that particular state and makes -- and that state will then have
those properties set on the UI elements which will make it -- change it to something the user
expects at that state.
But you create N number of state groups. You can create something like I did, right? I created
some for animation. I wanted to click off a particular animation in the state. So I can do that as
well.
>>: And so is one visual state associated with only one application state, or can one visual state
be associated with many application states and ->> Harikrishna Menon: So application states are nothing special. They are just normal visual
states.
The reason we have choosen to implement the way the UI changes and different window sizes
using states. It's a method, achieve the same thing, but there's nothing -- it's just a way. It's an
implementation detail. It's not tied to it in any way.
>> Jeremy Foster: Yes?
>>: In the -- I think the first meeting or maybe some other one we looked at the cooking app.
And the grid there, there were -- there are multiple cooking -- different recipes. And every other
one had a different color background. And I was wondering how do you achieve that with
XAML.
>> Harikrishna Menon: That's actually doable. So what you do is ->> Jeremy Foster: Let's repeat the question.
>> Harikrishna Menon: Huh?
>> Jeremy Foster: Repeat the question.
>> Harikrishna Menon: So the question is so each recipe had different background, right, so
how do you achieve that in XAML.
So there are two ways to do it. What we can do is we can have a property in a data model that
specifies what color you want and again bind that property to the background property. Right?
Another way to do it, you can have different data templates. You can define different data
templates each of a different color. And then what you can do is you basically overwrite a class
called data template selector. And in that class there is a method that allows you to select a
particular template. So basically you can check, hey, basically this recipe belong to this class, so
let's load this template instead of other one. So you can do that. So basically you would write
some code for it to happen. Or we can just do a data binding, by the way.
>> Jeremy Foster: And basically the same two options exist in HTML and JavaScript. If you
have some reason why one is red and the other one is blue, then I would attribute that to the data
and it's dynamically choose a class, or in your case choose a color based on that data. But you
also have full control of selecting which template you want.
>>: Thank you.
>>: I was going to ask, does Blend have support for semantic zoom?
>> Harikrishna Menon: Yes, so ->> Jeremy Foster: Repeat the question.
>> Harikrishna Menon: So the question is does Blend have support for semantic zoom. So our
support at this point is semantic zoom have both zoomed-out view and zoomed-in view, right?
So if you select a grid view inside of zoomed-out view, we'll render that. If you select the grid
inside the -- a zoomed-in view, we'll render that. So you can basically toggle between these and
again see [inaudible] designer. So we support that. But nothing more than that. It's basically for
visualization. Yeah.
>> Jeremy Foster: I've done that in HTML and you switch to your interactive mode and do your
little pinch gesture and then you switch back out and you've just switched.
>>: What's a good -- so I was trying to get up to speed with XAML and I [inaudible], okay, what
are good places to learn XAML and what are good books. And I saw a lot of blogs and books
that were referring to Silverlight and how to use XAML for Silverlight, and I did not know if that
was something I wanted to go into. It was just confusing because we've gone through so many
layers and iterations I did not know where to start. Do you have a good recommendation on
where to start to learning XAML constructs and concepts?
>> Harikrishna Menon: Okay. So the [inaudible] team has a blog called BlendInsider,
blendinsider.com.
>>: BlendInsider.
>> Harikrishna Menon: Yeah, blendinsider.com. It has a lot of good content, especially for
Windows Store. Honestly, what we call Jupiter on the XAML platform, right, is very close to
Silverlight. The platform is derived from Silverlight version of XAML. So a lot of the
constructs that you see in Silverlight will also be there in Jupiter, or the Windows Store XAML
platform. But not everything. So you'll have -- there's a lot of things missing, like, for example,
implicit data templates is not available in Jupiter. There are a lot of things that's missing. But it's
basically derived from Silverlight itself. So you'll have some parity.
>> Jeremy Foster: And what I found when I was trying to learn some XAML was that if I
started with anything Silverlight it assumed that I already knew some of the basic concepts of
XAML. And so if I started with a WPF course, then even though so many things that are in
WPF don't exist in Silverlight or Windows Store apps -- what are you calling it?
>> Harikrishna Menon: XAML -- let's call it XAML platform.
>> Jeremy Foster: Okay.
>> Harikrishna Menon: XAML platform for Windows Store apps.
>> Jeremy Foster: If you start with a WPF course, then they usually go, okay, you don't know
anything about XAML, so let's start with what is a resource, you know.
>>: Okay.
>> Jeremy Foster: Then it helps me learn the concept. But just know that you'll probably learn
some things in WPF and then you'll come over and find out that that doesn't even exist in
Silverlight or Windows 8.
>>: Have you seen the Charles Petzold book?
>> Harikrishna Menon: No, I have not. I always thought that was ->>: He starts at what is -- what are brackets, what goes inside of a bracket. How do you build
up a bracket, what's an attribute, what's not an attribute. He starts from baby, baby, baby steps.
>> Jeremy Foster: But he assumes you know what a bracket is, right?
>>: Once you get three quarters through the book, then he gets into WPF specifics and you can
ignore it. But that first two-thirds of the book is really, really good.
>> Harikrishna Menon: And what's the title of this one?
>>: I think it's just Programming Windows.
>> Harikrishna Menon: He has a book for each platform, so just ->>: Yeah, I think it's Programming XAML or Programming Silverlight. But, yeah, the book is
fantastic.
>>: And my favorite is the Pro Blend book that is I think about 200 pages [inaudible] and that
goes over -- talks about -- nothing about code, only about Blend, everything that you can do just
with Blend.
>> Jeremy Foster: Great.
>>: It goes over it just like a Photoshop book, this button does this, this button does this.
>> Jeremy Foster: Pro Blend?
>>: Yeah. That's the first time I actually [inaudible] Blend could do.
>> Jeremy Foster: Do you know the author?
>>: I'm trying to search ->> Harikrishna Menon: Also Adam Kinney's blog is pretty good for Blend.
>>: Whose?
>> Harikrishna Menon: Adam Kinney.
>>: Adam Kinley?
>> Harikrishna Menon: Kinney.
>>: Kinney. Okay.
>> Jeremy Foster: K-i-n-n-e-y.
>>: Is he one of the authors for an upcoming Windows [inaudible]?
>> Harikrishna Menon: He's done a lot. He currently works with [inaudible] on a company.
He's pretty famous in the XAML circle. His blog was pretty good back in the day.
>> Jeremy Foster: And now he's doing more JavaScript.
>> Harikrishna Menon: JavaScript. I know.
>> Jeremy Foster: Yeah.
>> Harikrishna Menon: I wasn't going to say that.
>> Jeremy Foster: He came over to the -- he left the dark side.
>> Harikrishna Menon: No, he's gone to the dark side.
>> Jeremy Foster: Oh. Questions? I think ->>: Yeah. So are there any like best practices in terms of jumping between Blend and Visual
Studio? Like you said, Visual Studio is probably -- probably we're going to be doing a lot of
debugging of JavaScript or C#. Any kind of workflow tips and tricks about jumping back and
forth?
>> Harikrishna Menon: Actually, Blend and Visual Studio supports the same project solution
structure, so everything is compatible. If you create a Visual Studio project, that will open in
Blend. If you create a Blend project, it will open in VS as well.
And we -- there's no specific practices and we monitor for file changes and everything on both
products. So if you make a change, it will be reflected Blend when you go back. So there is
nothing specific, it should just work for you.
Other than that, I wouldn't say anything specific practices. But one thing I'll tell you is especially
if you're using C#, the nature, for example, in -- because we've run a lot of user code, it is
sometimes necessary for you to guard your code so it doesn't crash the designer. Because in
your user code, you might expect a certain type not to be null. But in the context of designer,
because we don't have access to let's say any Web servers or anything out there, things might
cause the designer to go down. So you might need to be a little careful in guarding certain
things, especially constructors and stuff, so be a bit careful there. Other than that, Blend should
just work.
>> Jeremy Foster: So really an individual like myself can jump back and forth and use Blend for
its strength and Visual Studio for its strength. But you can also certainly use it if you have a
team of four, three developers and a designer, everybody's speaking the same language, they're
working on the same source control. It's just that one guy's using the design tool and the other
guys are using Visual Studio.
>> Harikrishna Menon: And Blend [inaudible] as well, integration as well. So...
>>: So you disconnected your laptop, so I don't know how convenient it will be, but when you
talk about Adobe and Blend integration, what kind of features are you talking about?
>> Harikrishna Menon: Can I use yours?
>> Jeremy Foster: Yeah, sure.
>> Harikrishna Menon: So I go to file, I go to import, I can do [inaudible] so I can import a
PSD. If I have PSD, if I import it, it actually will show you every layer. You can selectively
select, hey, I want this layer, that layer, and import [inaudible] back in the application. In
Illustrator we'll convert the vector drawing into XAML [inaudible] the path vector and you can
just use that as well. So it's pretty simple. It just a one [inaudible] function.
>>: I'm guessing when you finally publish the app it does the conversion into proper formats for
you?
>> Jeremy Foster: Well, like he said, when you import it, it turns it into XAML at that time.
>> Harikrishna Menon: For Illustrator, for PSD, it will just let you import specific layers as
images.
>>: I see.
>> Harikrishna Menon: So all that is taken care of for you.
>> Jeremy Foster: Does it put it in an actual -- wrap it in an actual image?
>> Harikrishna Menon: No. It will just import your project at that point.
>> Jeremy Foster: Oh.
>> Harikrishna Menon: [inaudible] how many image blocks, right?
>> Jeremy Foster: I see.
>> Harikrishna Menon: It will do -- import [inaudible].
>> Jeremy Foster: I see. We got time for me questions. Feel free.
>>: So, again, [inaudible] it won't be like I can keep editing the PSD file in Photoshop and it
will keep updating in Blend.
>> Jeremy Foster: No.
>>: Okay. That would be too easy.
>> Harikrishna Menon: Yeah, I know. But the problem is once you commit a PSD, like there's
no action translation back because we're actually extracting specific layers [inaudible].
>>: [inaudible].
>> Harikrishna Menon: Exactly.
>>: Okay.
>> Jeremy Foster: Interesting point. Anybody's looking to learn more CSF, my -- I just
submitted the last change to my new book yesterday and so you can already buy it early, but it's
going to be printed here in a couple weeks. And you can find it aka.ms/csfbook. So it's all about
CSF. But it's kind of specific to Windows 8.
>>: Whew.
>> Jeremy Foster: Yeah, it feels good to be done. I always say if anybody needs any
encouragement about not writing a book your first year at Microsoft and your first year of being
a dad, you can ask either my wife or myself. Okay?
Well, let's go ahead and wrap it up. We can feel free to have some more discussion after we turn
off the recorders. So feel free to stick around, but this ends the public Q and A piece.