>> I'm Jeremy Likness with ON .NET.
If you are a XAML developer, UWP developer,
and you were a fan of XAMLPad,
you're going to want to check this out, XAML Studio.
>> Yeah. It's the big new thing.
>> The big new thing. So, rapid prototyping,
data binding, debugging, lots of cool features.
You'll have to tune into the show to check them out.
>> We'll see you there.
[MUSIC]
>> Hi. Welcome to another episode of on.net.
My name is Jeremy Likness,
and I'm here today with Michael Hacker,
who has an amazing new application to share with us today.
Before we jump into it,
this is something that XAML developers
are going to be pretty excited about.
Michael, why don't you tell me a little bit
about what you do with Microsoft,
and what team you're on etc?
>> Thanks, Jeremy. Really appreciate being here today.
I work on the PAC's team which is
Partner Analytics and Essential Experiences.
We help with the ISP ecosystem and partners to really
enrich their development experience with Windows and Office 365,
the whole Microsoft 365 experience.
So, I've been working with them for a couple of years
now and a couple of different capacities.
I've also been a core contributor to the Windows Community Toolkit
and ramping up more on taking on some ownership of that.
>> Great. I actually did a previous episode
with the Windows Community Toolkit. So that's exciting.
So, my understanding is you had a Hackathon,
a few was last year, two years ago.
>> It started in the 2017 Hackathon
that we do every summer here at Microsoft.
>> Okay. Tell me a little bit about what
you tackled in that Hackathon.
>> Yeah. So, having just started working
on the PAC's team for a few months back then.
Some of my developer contacts with just learning,
wrapping up with UWP is like whatever happened to XAMLPad?
That great tool that we used for
WPF development and I was like, "That's a great question.
I've been thinking about that too."
So, I just really missing that gap of being
able to jump in, rapidly prototype something,
try out something from the docs,
and we are able to visualize it and
see interact with it right there on the spot.
So, I started with the Hackathon just seeing like, "Hey,
is this possible with UWP,
and they still have that great API call that let you load XAML.
So, I started from there and it just
grew into a much bigger project that we'll get into today.
>> All right. In the project is called?
>> XAML Studio. It's really supposed to be a one-stop shop for
this rapid prototyping and iterating on UWP XAML projects.
>> Okay. Great. Well, tell us a little bit more
about what it is and how we get started with it.
>> Yeah. So, it's UWP store app.
So, you can just go to the Microsoft Store on
your Windows 10 machine and download it from the store.
So, you don't even need Visual Studio installed.
You can just get started with UWP XAML development right away.
So, that's going to be pretty cool and different change.
You don't have to wait for Visual Studio
installed on a new machine
if you want to get started with something.
>> Right. You just pull the store app,
open it, and you're off to the races.
>> Yeah. I think it's going to be like a 100 megs or
pretty small store app compared
to the couple gigs you pull down with Visual Studio usually.
From there, you can just land on the welcome page here,
you can start a new file,
and it boots up right away.
Gives you some XAML down here,
which is driving this text up here.
So, Jeremy, what's your favorite color?
>> Let's go with the purple for today.
>> All right. So, I can type in purple here and then we see
the text change up at the top to purple right away.
So I can do other things right here too.
I could change this to a stack panel.
You can see I've got some IntelliSense
there to help me out with that.
Then I can add a button in here too and give it some content.
Now, I can actually have this button here and
unlike the Visual Studio or Blend designers,
you just see the button in its place on the page.
This one's an actual button that I can click on and
interact with as if it was in my app.
So, if I put a text box down here as well,
then I can actually type in this thing.
>> So, the thing to call out here is that this is interactive.
So, I'm seeing what my styling and
animations look like when I'm clicking the button.
I can see offsets between the button and the text box.
>> Right.
>> So, you could adjust your padding,
your formatting, you'll do all this basically live.
>> Right, exactly. I can resize the app here if I wanted to
play with how responsive is my app being at the time.
So, you can really see how your XAML is going to
behave in your app live as if it was
running without needing to actually start up your app,
and wait for it to compile,
and run and then, sometimes,
the live edit and continue doesn't always deal with resources,
the greatest and so,
or you change everything in your XAML page,
and you restart, rebuild your app.
>> Right. So, it could recreate the whole graphing.
>> Exactly. So, this is a lot quicker.
You mentioned animations which is a great segue into this.
A friend of mine, Justin,
had some old Windows Phone Silverlight animations.
> Oh, yes. I am
so glad you brought up both Windows Phone and Silverlight.
Those are still that's where I got started in going out and
talking about applications and
development was in my Silverlight days so.
>> Great. Yeah, I wrote a little puzzle game back
originally for Windows Mobile 6.
I ported it over when the phone came out.
So, that was just a lot of fun.
But then I didn't see any of
my users from Mobile 6 pick it up on Windows Phone 7.
So, this is an animation example we had
and so use some behaviors to have the button here that's
actually part of the page and the XAML trigger
the animation and then having
another click trigger secondary animation.
>> This is all previewable basically in the window here.
>> Yeah. I can edit this animation.
It's pretty large.
It has a lot of different resources and things,
but I could go in here and make a change,
and then automatically just replay the animation,
and see it update live.
So, it's a pretty powerful tool especially for
these types of interactive experiences because
you can actually see the result and interact with it and
understand that that's going to be how it behaves in your app.
>> Let me ask you this. It hasn't been forever since
I've worked with XAML and WPF and Silverlight.
So, XAML is a way of instantiating
objects and those objects most of the time are related the UI,
and layout, and animation,
and things to that concept.
So, we have the code behind, right?
The code that drives those.
Does this support any type of custom code behind,
or third-party libraries, or anything along those lines?
>> Right. That's a great question.
Right now, this is purely dealing with the UI XAML markup itself.
It's not dealing with any of the code behind.
So, I can use the behavior extensions for
XAML to trigger some basic behaviors like starting an animation,
but I can't go in and I can say, "Okay.
When I click this button,
go load some other app." Right.
>> Well, which really the focus
here is to be a rapid prototyping tool,
get it exactly where you want it,
then you could bring it into
some other IDE to do your hardcore developed if you will.
>> Right. This is really a jumping off point.
So, I see an example on docs.microsoft.com.
I can copy and paste that in here. I can play with it.
I can craft it nearly make it look and
feel and how I want because I can do that rapid prototyping.
Then I can copy it into my project in
Visual Studio and hook up all the actual behaviors.
>> Makes sense.
>> So, you mentioned third-party libraries.
I do have for instance the Windows Community Toolkit.
I also have the Telerik open-source controls in here.
So you can actually use those libraries as part of this as well.
So I have some data context here for our chart.
So it's just an array of numbers.
I can actually go over to
this data context panel that I have here,
paste that in and now I have this data
live driving my chart that I generated with the XAML.
So, I could actually update this number
here and we can see the graph changed right away.
>> So, what is the data context panel support?
I see there's a REST URL,
so you can actually call end points and pull it back that way.
>> So, I can actually go over.
I have a weather example here.
So, I have this pre-generated link
and this gives us the weather in San Francisco.
It's going go pull down
that REST API JSON Blob
and then drive the weather for San Francisco.
So if I put our location in here in Redmond,
then it'll go pull
the Redmond weather. So, it's going to be raining.
>> Basically, again, remind us that we're in the middle of winter.
>> Yeah, exactly.
>> Although it's actually pretty warm today, 52 degrees.
It's like a heat wave.
>> Yeah, you this especially after the cold spell we've had.
>> Sure. So you've got this ability to edit a data source.
So, obviously, we can do data
binding and look at how stack panels,
or grids, or other things that have
repeatable elements would work out.
What other tools are available as far as troubleshooting,
how my data bindings working?
>> Yeah. So, data bindings is always one of
the tricky parts of XAML development and
really pick up on and start to use,
but it really adds a lot of power to your app being able to have
your data model separate
from your UI and then ranking them together.
But, traditionally, in Visual Studio, debugging them,
it puts out a little output line on the command window when
you've got something wrong
and it's a little hard to figure out what's going on.
So, that was one of the things that really took this
from the XAML path of the past to the XAML Studio,
this modern experience in the features because I added
some helpers to help you debug your bindings.
So we can actually see that down here already.
I have this binding and I can see
that it's being triggered three-time,
three different values of pass-through because
we updated the data context,
and the last value was 0.1
which is the one that we see up here in the UI.
I can actually go see what
other bindings are on this page here.
So, I can see there's some "Sunday Night" texts.
This is from all the different list items
but I can click on here and jump into
where I'm getting that
binding from and so I can see the different hits.
So, it's getting hit so many times because it's a list.
So, this binding has been triggered for every item in the list.
>> All right. Okay. Yeah, because that's
the template that gets repeated basically.
>> Exactly.
>> As it renders out. Okay.
>> Yeah.
>> So, this gives us a lot of power to
really dig in and see what's
going on with our bindings and the app.
I have a little example page that I wrote
which has some animations and has a "Toggle" button.
So, I can actually change the mode to history.
So, every time I toggle the "Toggle" button,
we can see this history gets updated
with when it was toggled and what the value was.
And if I click on that it'll take me over to that binding,
so I can see where that was my code.
>> Now, on this UI that has the grid marks
so we can see positioning and everything.
>> Yeah.
>> I noticed as you hovered your cursor over it,
it highlights different elements.
Is there any interactivity between
or it's actually that was just the list on the weather app?
>> The list on the weather app, yeah I have the highlight.
Yeah there's no kind of visual tree picker.
That's be a future feature probably,
have a long backlog of things I'd like to add.
But yeah the exert in the background is actually an option
here so I can turn the grid off if we don't want it.
And so now it just gives you the actual color.
But it's helpful if you're trying to line things
up and do a little bit more precise padding.
You can turn the grid on and just all the different
sizing and opacity to your liking.
There's a bunch of other features in here too.
>> So my understanding is this has been
a project which start off as a hackathon.
It's been kind of some late night coding?
>> Yeah. Night for weekends.
>> It's about to mature and be released as a general tool.
Not to put you on the spot because
someone actually has to implement these features.
But we talked about rapid prototyping.
You've got a data source debugger.
If you'll data binding debugger,
we've got some flexibility with data sources which is really nice,
because I think most of the time when we're writing apps we're
using some sort of web API to hit bring back right data.
So that works. What are some of the top
I guess features that you're considering putting into the tool.
And again, not as a commitment,
but things that people might get excited about.
Or is it too soon to tell?
>> Yeah. I mean right now, I've just been working
towards getting it out
there to the world and everyone and so that's been,
obviously there's a lot of
work that goes through just shipping the product.
Shipping is a feature in itself.
>> Sure.
>> And the garage has been great at helping me
get these final little check marks out and pushing it through.
And so that's just being the exciting piece for me.
But in the meantime I have that backlog of
features that I do want to implement in the feature.
Like we kind of mentioned being able to look
at more of the visual tree like you can in Visual Studio.
That would be one the ones up there.
Got some other pie in the sky things to look at
to just kind of helping out with some of the existing experiences.
Configuring if you want your editor on the top or the side.
Some of those things.
We did some great samples recently with the tab view.
That's from the Windows Community tool kit.
So probably some improvements there.
>> That's the irony of this tool that I'm laughing about.
Because this is a UWP app that uses XAML to
allow you to prototype a UWP app for example.
So it's a little bit of inception gone.
So say that two other questions
that came to mind while you are talking to me.
First, is in case someone watching this isn't familiar with it.
You mentioned the garage.
What does the garage?
>> The garage is basically kind of
a maker hacker space for Microsoft employees to kind of aggregate,
come together, get resources for
their own passionate personal kind of
side projects beyond what they're doing during their day job.
So, I'm fortunate that this is
kind of aligns a lot with what I'm doing in my day job,
but it's still something that I've just been working nights and
weekends slowly over the last year and a half.
>> So the garage is a place where you can host content,
find people to help out,
do some things like that [inaudible]
basically before you release it out to the world.
>> Exactly. They have a lot of resources.
They have a whole space on campus where people can go.
And they have like Laser Wood Cutters and 3D printers.
So if people want to build things physically on robots they
can do that and meet
other people that are trying to do that come together.
Or it can be someone like me with an app and
an idea and they just need help.
How do I get this from
this hackathon passion project to the world.
>> Right. I'm sure what I would hack
together over a weekend that works for me
is a far cry from what would be
released as a polished professional product.
>> Right, there's just neat picky little details.
All the things that you don't think about when
you're hacking a prototype on the weekend.
They add up and a lot of time and effort,
but it really makes a big difference.
>> Okay, so the next question might be a dumb question.
Where I'm showing my age because I haven't
worked on XAML recently.
Is there still a Visual State Manager in XAML?
>> There is.
>> Yeah.
>> Is that something that this tool support?
>> So yes. With the behavior that's kind of how
this animation gets triggered in a way.
Well this is using more of a storyboard
but it's a similar concept.
Like this button has a behavior attached to it to trigger
the storyboard to cause this animation to play initially.
And so you can do similar sort of things with
the Visual State Manager and that's probably
an area that I want to improve on in the futures.
I got a little bit more insight [inaudible].
>> So, I'm basically creating work for you by mentioning this.
And so, my understanding is this is close to being released.
By the time someone's watching this it
should be out there available ready to go.
>> That's the plan.
>> We'll put a link up so
that people can get to it and download it.
Is there anything else you wanted
to share that we haven't touched upon?
>> We haven't really touched on this other icon over here.
This is the Toolbox that lets
you quickly kind of search for tools.
So if I need a grid, I can pull that up.
Just none of that fails.
>> Well it's because we're live so.
>> Yeah, there we go.
>> The issue number for 497.
Case sensitive.
>> Case sensitive. There we go.
I'm so used to typing it in XAML.
I'm always typing with the capital letter I guess.
So I'll have to fix that quick.
>> Sure.
>> But yeah so now I can see all the different types of grids.
And I can even see the ones from the toolkits.
There's the uniform grid we added earlier this year as
another WPF Compact for UWP.
So we've got a lot of those in the toolkit.
So if you're moving from WPF to UWP there's a lot of
different great resources out there and
controls to help you use the ones that you're still using.
>> So I see each of these has a link into docs too. So this is.
>> Yeah so if I want to know more about
the Uniform Grid I can click on "Docs."
It'll jump me in there.
Give me the resources there that I
need and what it all does and how to use it in the samples.
So I could even copy one of these samples out here
and doing a live demo, right?
>> Right. What could possibly go wrong?
>> So I put that in there,
and then we've got the uniform grid from the sample.
>> Nice.
>> Right there. So it's
pretty exciting to see how it all comes together.
>> Great.
>> Well this looks like an incredible tool.
So I'll definitely look for that when it comes out.
And again we'll post the show links and everything else.
But thank you so much for coming out and sharing this with us.
>> I appreciate it.
>> Appreciate you.
[MUSIC]