.Net Foundation On .NET, 17 Jan 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Introducing XAML Studio

Description

As a XAML developer, you may sometimes wish you had the ability to quickly prototype your UI and debug your markup without having to load a project in Visual Studio. This can be a huge workflow boost for designers or even for developers just wanting to try out new ideas. With the release of XAML Studio, we are able to close this grab for creators and also enable much more.

In this episode, Michael Hawker sits down with Jeremy to introduce us to XAML Studio application. He walks us through the experience of editing and inspecting live XAML updates without the need for a build or compile step. We also get to see demos of the debugging experience, the control toolbox, and even how to work with 3rd party controls.

[T02:40] - What is XAML Studio?
[T03:16] - First look at XAML Studio
[T06:33] - What's the scope of XAML Studio ?
[T07:55] - Using 3rd party libraries
[T09:16] - Debugging XAML bindings
[T12:52] - What are features might show up next?
[T14:17] - What is the garage?
[T15:48] - Is there support for the visual state manager?
[T16:43] - Exploring the toolbox in XAML Studio

Useful Links

Get XAML Studio
https://www.microsoft.com/en-us/p/xaml-studio/9ntls214tkmq?rtc=1&activetab=pivot:overviewtab

Microsoft Garage Blog
https://www.microsoft.com/en-us/garage/blog/2019/01/by-devs-for-devs-meet-new-garage-projects-xaml-studio-and-team-retrospectives/

Windows Community Toolkit
https://docs.microsoft.com/en-us/windows/communitytoolkit/?WT.mc_id=ondotnet-channel9-cephilli

A

I'm jeremy likness with on .net.

A

If you are a xaml, developer,, uwp developer,.

A

And you were a fan of xamlpad, you're going to want to check this out, xaml studio.

A

yeah., it's the big new thing., the big new thing. so,, rapid prototyping,.

A

Data binding, debugging, lots of cool features.

A

you'll have to tune into the show to check them. Out.

A

we'll see you there.

A

Hi. welcome to another episode of on.net.

A

My name is jeremy likness, and I'm here today with michael hacker,, who has an amazing new application to share with us today.

A

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

B

Thanks, jeremy. really appreciate being here today.

B

I work on the pac's team, which is partner, analytics and essential experiences..

B

We help with the isp ecosystem and partners to really.

B

Enrich their development experience with windows and office 365,.

B

The whole microsoft 365 experience.

B

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.

B

Great., I actually did a previous episode.

A

With the windows community toolkit., so that's exciting.

A

so,. My understanding is you had a hackathon,.

A

A few was last year,, two years ago., it started in the 2017 hackathon.

B

That we do every summer here at microsoft.

A

Okay. tell me a little bit about what you tackled in that hackathon.

B

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

B

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

B

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.

B

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.

B

So, I started from there and it just grew into a much bigger project that we'll get into today.

A

All right. in the project is called?.

B

Xaml studio.: it's really supposed to be a one-stop shop for.

B

This rapid prototyping and iterating on uwp xaml projects.

A

Okay. great. well, tell us a little bit more about what it is and how we get started with it.

B

Yeah. so,, it's uwp store, app.

B

so,. You can just go to the microsoft store on your windows, 10 machine and download it from the store.

B

So,, you don't even need visual studio installed..

B

You can just get started with uwp xaml development right away.

A

So,, that's going to be pretty cool and different change.

B

You don't have to wait for visual studio installed on a new machine if you want to get started with something.

A

Right. you just pull the store, app,, open, it, and you're off to the races.

B

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.

B

From there, you can just land on the welcome page here,.

B

You can start a new file, and it boots up right. Away.

B

gives you some xaml down here,, which is driving this text up: here.

B

so, jeremy,. What's your favorite color?, let's go with the purple for today.

B

all right. so,. I can type in purple here and then we see the text change up at the top to purple right away.

B

So I can do other things right here too..

B

I could change this to a stack panel.. You can see. I've got some intellisense there to help me out with that..

B

Then I can add a button in here too and give it some content.

B

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.

B

so,. If I put a text box down here as well,.

B

Then I can actually type in this thing.

B

so,. The thing to call out here is that this is interactive.

A

So, I'm seeing what my styling and animations look like when I'm clicking the button..

A

I can see offsets between the button and the text. Box.

A

right. so,. You could adjust your padding,, your formatting, you'll. Do all this basically live.

B

Right, exactly., I can resize the app here. If I wanted to.

B

Play with how responsive is my app being at the time.

B

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

B

And wait for it to compile, and run and then, sometimes, the live edit and continue doesn't always deal with resources,.

B

The greatest and so, or you change everything in your xaml page, and you restart,, rebuild your app.

A

Right. so,, it could recreate the whole graphing.

B

Exactly. so,: this is a lot quicker.

B

you mentioned animations, which is a great segue into this..

B

A friend of mine, justin, had some old windows phone silverlight animations.

A

≫ oh, yes., I am so glad you brought up both windows phone and silverlight.

A

Those are still that's where I got started in going out and.

A

Talking about applications and development was, in my silverlight days, so.

B

Great. yeah,, I wrote a little puzzle game back originally for windows, mobile 6.

B

I ported it over when the phone came out.

B

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.

B

So,, this is an animation example. We had.

B

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.

A

This is all previewable, basically in the window, here.

B

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

B

And see it update live.

B

So,, it's a pretty powerful tool, especially for these types of interactive experiences, because.

B

You can actually see the result and interact with it and understand that that's going to be how it behaves in your app.

A

Let me ask you this., it hasn't been forever since.

A

I've worked with xaml and wpf and silverlight.

A

So, xaml is a way of instantiating objects and those objects. Most of the time are related. The ui,.

A

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

A

Or third-party libraries, or anything along those lines?.

B

Right., that's a great question. right now,. This is purely dealing with the ui xaml markup itself.

A

It's not dealing with any of the code. Behind.

B

So,, I can use the behavior extensions for.

B

Xaml to trigger some basic behaviors like starting an animation,.

B

But I can't go in and I can say, "okay.

B

When I click this button, go load, some other app." right.

A

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.

B

Right., this is really a jumping off point. so,. I see an example on docs.microsoft.com..

B

I can copy and paste that in here. I can play with it.

B

I can craft it nearly make. It look and feel and how I want, because I can do that rapid prototyping..

B

Then I can copy it into my project in visual studio and hook up all the actual behaviors.

B

makes sense. so,. You mentioned third-party libraries..

B

I do have, for instance, the windows community toolkit..

B

I also have the telerik open-source controls in here.

B

So you can actually use those libraries as part of this as well.

B

So I have some data context here for our chart.

B

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.

B

So,, I could actually update this number here and we can see the graph changed right. Away.

B

so,. What is the data context panel support?.

A

I see there's a rest url,, so you can actually call end points and pull it back. That way.

B

So,, I can actually go over..

B

I have a weather example: here. so,. I have this pre-generated link.

B

And this gives us the weather in san francisco..

B

It's going go, pull down that rest, api, json blob and then drive the weather for san francisco.

B

So if I put our location in here in redmond,.

B

Then it'll go pull the redmond weather. so,. It's going to be raining.

A

Basically, again, remind us that we're in the middle of winter.

B

A

Although it's actually pretty warm today,, 52 degrees.

B

It's like a heat, wave. yeah, you this especially after the cold spell we've had.

A

Sure. so you've got this ability to edit a data source.

A

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

A

What other tools are available as far as troubleshooting,.

A

How my data bindings working?.

B

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.

B

but, traditionally, in visual studio,, debugging them,.

B

It puts out a little output line on the command window when.

B

You've got something wrong and it's a little hard to figure out. What's going on.

B

so,, that was one of the things that really took this from the xaml path of the past to the xaml studio,.

B

This modern experience in the features because I added some helpers to help you debug your bindings.

B

So we can actually see that down here already.

B

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

B

I can actually go see what other bindings are on this page, here.

B

so,. I can see there's some "sunday night" texts..

B

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.

B

So,, it's getting hit so many times, because it's a list.

B

so,! This binding has been triggered for every item in the list.

A

All right. okay. yeah,, because that's the template that gets repeated basically.

A

exactly. as it renders out. okay. yeah.

B

So,, this gives us a lot of power to really dig in and see. What's going on with our bindings and the app..

B

I have a little example page that I wrote, which has some animations and has a "toggle" button.

B

so,. I can actually change the mode to history.

B

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.

B

And if I click on that it'll take me over to that binding,.

B

So I can see where that was my code. now, on this ui that has the grid marks.

A

So we can see positioning and everything. yeah.. I noticed, as you hovered your cursor over it,.

A

It highlights different elements..

A

Is there any interactivity between or it's actually, that was just the list on the weather, app?.

B

The list on the weather, app, yeah- I have the highlight.

B

yeah, there's no kind of visual tree picker.

B

That's be a future feature. Probably,.

A

Have a long backlog of things I'd like to add.

B

But yeah the exert in the background is actually an option.

B

Here so I can turn the grid off if we don't want it.

B

And so now it just gives you the actual color.

B

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.

B

There's a bunch of other features in here: too.

B

So my understanding is, this has been.

A

A project which start off as a hackathon., it's been kind of some late night, coding?.

B

Yeah. night for weekends.

A

It's about to mature and be released as a general tool.

A

Not to put you on the spot because someone actually has to implement these features., but we talked about rapid prototyping.

A

You've got a data source debugger.

B

If you'll data binding debugger,.

A

We've got some flexibility with data sources, which is really nice,.

A

Because I think, most of the time when we're writing apps we're.

A

Using some sort of web api to hit bring back right, data.

A

So that works., what are some of the top?

A

I guess features that you're, considering putting into the tool.

A

And again,, not as a commitment,.

B

But things that people might get excited about.

A

Or is it too soon to tell? yeah., I mean right, now,, I've just been working.

B

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.

B

shipping is a feature in itself. sure. and the garage has been great at helping me.

B

Get these final little check marks out and pushing it through.

B

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.

B

Got some other pie in the sky things to look at to just kind of helping out with some of the existing experiences.

B

Configuring, if you want your editor on the top or the side.

B

Some of those things. we did some great samples recently with the tab. View.

B

That's from the windows community tool, kit., so probably some improvements there.

B

that's the irony of this tool that I'm laughing about.

A

Because this is a uwp app that uses xaml to allow you to prototype a uwp app for example..

A

So it's a little bit of inception. Gone.

B

So say that two other questions.

A

That came to mind, while you are talking to me. first,, is in case someone watching. This isn't familiar with it.

A

You mentioned the garage.: what does the garage?.

B

The garage is basically kind of a maker hacker space for microsoft, employees to kind of aggregate,.

B

Come together, get resources for their own passionate personal kind of side projects beyond what they're doing during their day, job.

B

So,, I'm fortunate that this is.

B

Kind of aligns a lot with what I'm doing in my day, job,.

B

But it's still something that I've just been working nights and weekends slowly over the last year and a half.

A

So the garage is a place where you can host content,.

A

Find people to help out, do some things like that [inaudible], basically, before you release it out to the world.

B

Exactly. they have a lot of resources..

B

They have a whole space on campus, where people can go.

B

And they have like laser wood cutters and 3d printers.

B

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.

B

or it can be someone like me with an app and an idea and they just need help..

B

How do I get this from this hackathon passion project to the world.

A

Right., I'm sure what I would hack together over a weekend that works for me.

A

Is a far cry from what would be released as a polished, professional, product.

B

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.

A

Okay,, so the next question might be a dumb question.

A

Where I'm showing my age, because I haven't worked on xaml recently., is there still a visual state manager in xaml?

A

there is. there is. yeah.? Is that something that this tool support?.

B

So yes. with the behavior, that's kind of how this animation gets triggered in a way..

B

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.

B

And so you can do similar sort of things with.

B

The visual state manager and that's probably, an area that I want to improve on in the futures.

A

I got a little bit more insight, [inaudible]. so,, I'm basically creating work for you by mentioning this.

A

And so, my understanding is, this is close to being released.

A

By the time someone's watching this, it should be out there available ready to go.

B

That's the plan., we'll put a link up so.

A

That people can get to it and download it..

A

Is there anything else you wanted to share that? We haven't touched upon?.

B

We haven't really touched on this other icon over here.

B

This is the toolbox that lets you quickly kind of search for tools..

B

So if I need a grid,, I can pull that up.

B

Just none of that fails.

A

Well, it's because we're live so.

B

Yeah, there we go.

B

the issue number for 497.

A

Case sensitive.

B

Case sensitive. there we go.

B

I'm so used to typing it in xaml., I'm always typing. With the capital letter I guess.

B

so I'll have to fix that quick. sure. but yeah. So now I can see all the different types of grids.

B

And I can even see the ones from the toolkits.

B

there's the uniform grid. We added earlier this year as another wpf compact for uwp.

B

So we've got a lot of those in the toolkit..

B

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.

A

So I see each of these has a link into docs too., so this is.

B

Yeah, so if I want to know more about the uniform grid, I can click on "docs." it'll jump me in there..

B

Give me the resources there that I need and what it all does and how to use it in the samples..

B

So I could even copy one of these samples out here.

B

And doing a live, demo, right?.

B

Right., what could possibly go wrong?, so I put that in there, and then we've got the uniform grid from the sample.

B

nice. right there.. So it's pretty exciting to see how it all comes. Together., great.

A

Well, this looks like an incredible tool., so I'll definitely look for that when it comes out.

A

and again we'll post the show, links and everything else.

A

But thank you so much for coming out and sharing this with us.

B

I appreciate it. appreciate you.