.Net Foundation On .NET, 10 Jul 2018

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: The Windows Community Toolkit

Description

The Windows Community Toolkit is a collection of helper functions, custom controls, and app services.
In this episode, Senior Program Manager Nikola Metulev (@metulev) comes on the show to give us a walk through some of the useful tools inside of the toolkit
[T01:19] - Getting started with the Windows Community Toolkit
[T02:10] - Exploring the controls
[T04:25] - A look at the WebView control
[T06:28] - New controls for UWP
[T07:14] - The Animation APIs
[T13:27] - Microsoft Graph controls
[T15:18] - Services provided in the toolkit
[T19:58] - Getting started resources

Take a look at the following links to learn more.
The Windows Community Toolkit on GitHub: https://github.com/Microsoft/WindowsCommunityToolkit
Announcing the Windows Community Toolkit v3: https://blogs.windows.com/buildingapps/2018/05/30/announcing-windows-community-toolkit-v3-0/?WT.mc_id=ondotnet-channel9-cephilli
https://docs.microsoft.com/en-us/windows/uwpcommunitytoolkit/
Windows Community Toolkit Sample App: https://www.microsoft.com/en-us/p/windows-community-toolkit-sample-app/9nblggh4tlcq?rtc=1&WT.mc_id=ondotnet-channel9-cephilli

A

In this episode of the on .net show,, we're going to have nikola joining us. he's going to be talking to us about the windows community, toolkit.

A

Welcome to another episode of the on .net show., my name is cecil philip and today I have with me nikola.. How are you doing today, man?, I'm good.? How are you doing cecil? doing pretty good.? Thank you for inviting me. so,. Why don't you tell us a little bit about yourself and what team are you on., yes. so,, I'm part of.

B

The windows platform app experiences team..

B

I work mostly with developers and with.

B

The ecosystem of developers that work and they build applications for windows. yeah., specifically focusing on the universal windows platform, and I build,.

B

I maintain a library called the windows community toolkit, which is a partnership between the community and microsoft, to build control, services, helpers, extensions,. Basically, anything that helps.

B

Any windows developer out there to make better apps or more powerful apps.

A

That sounds pretty good., so is this a free tool that's available and I could just go online and start consuming and using some of these services?.

B

Right, yeah. it's completely open source and it's available on new git and we have about 15 different packages that developers can start using right now and anybody can contribute to it.

B

it's all open to anybody. Really. okay. that sounds pretty good. so,. How do.

A

I get started with this?. Where do I go?.

B

The first thing you can do is, just to get started. We have a sample app., you can get it from the windows store..

B

So if you go to the windows store,, I can show you what it looks like in the store. Here.

B

You can just go to store and just search for the windows community toolkit sample app.

B

windows, community media toolkit sample app.

B

And then you'll be able to download it directly there. what this gives. You is just an overview of everything. That's inside of the toolkit. we have,. If I show it here,, you can see. In top bar, we have controls,.

B

Animations, services, notification, helpers,.

B

Different helpers, brushes,, extensions, parsers,, all kinds of stuff., all kinds of goodies that anybody could have wanted to use.

A

So,, this sample kind of has a lot of the different things that are in there and it kind of just shows you how to use them and how to get started.

B

Exactly., if you just want to learn how to use a specific control,, you can start playing with it immediately. so for example,. Let's say I want to play with a new control we just announced, which is the infinite canvas..

B

If you want to start playing with this,, you can see what it looks like and start messing around with this.. This control specifically allows you to do inking and text at the same time, and it's infinite.

A

So you can infinitely scroll with.

B

This and it's all virtualized. so,, it's something the developers wouldn't really be able to develop. Easily., it's not something simple to develop, but we provide it out there out of the box..

B

You can do things like,, you can look at the xaml and you can start immediately editing the xaml in here and start messing around with it and copy it directly.

B

or if you just want to look at the documentation,, you can look at it directly from the sample, app.

B

now,, let's say you're on a plane, there's no internet.! This is all off line., so you can start messing around with this and be able to get started with any of these controls. Immediately..

B

I really loved that model. How I could try.

A

Out the control, then I can also look at the docs,.

A

And I can look at the code right in the same place.

A

right.. We thought really hard on how to make.

B

This experience better for developer, just getting started from not knowing, what's in the toolkit, to start using it immediately into their apps., to make it really easy, we're not even having visual studio. You can start actually developing your application just by using the xaml in here..

B

You could start changing the colors or adding more elements, and you can see it in real time. What happens.

A

Oh,, that's really cool., so I can edit it,. I could change properties and I have to see a live change in that section.

B

For example,, if I go to the adapter with you here,, I can just change the properties here directly in our properties. Panel., as I switch to xaml,. Those properties are also already applied to the xaml..

B

I can just start changing anything here.. So if I want to change the background to red,, I will actually just change it to red, or border brush to green, and will make it green.

B

It's hard to see here because it's not there, but you can actually see it's green.

B

right. nice. I like it. cool.. So what other controls.

A

Do you have that you might want to have us, take a look at. so, recently we actually changed the name.

B

From uwp community toolkit to the windows community toolkit., the reason why is up until a few months, ago,.

B

The toolkit was only for universal windows spot on developers.. About recently, we added controls to also support wpf and window forms. Developers.

B

We want to make it easier for any windows developers start using the toolkit.

B

So, one control I want to show you here is the webview.

B

so,. In the last release, 3.0,, we added a webview, that's based on the edge rendering engine.

A

This webview control can work.

B

On wpf and window forms applications., so if you are already using the web browser inside of your wpf application,, you can just replace it with a webview and kind of have the same properties,, similar properties,, but use the new rendering engine and get benefits of that.

B

so,. Those are some of the things that we've added there and you can get this directly from new get..

B

You can start using it and we're looking to add more and more of these controls in the future that you can use in wpf and window forms.

A

That's pretty cool, right, because we're not really adding more features to ie anymore,, but we are adding more features to edge, which saves those update like we'll get those features inside of our control as well.

B

All the new standards and everything that's coming up in the web, world,, it's all being updated in edge and developers that are still using wpf and win forms, and there's a lot of them, still want to be able to take advantage of those standards..

B

This is the best way to do. That., cool, cool.. Let's take a look at it.

B

so,, it's right, here.. I've actually just dragged it from the toolbox and had it added from new get..

B

It just shows up in my toolbox, I dragged it,, I add at the source, and that's so much it.. I can just start this because right now it's pointing to the channel 9 application.

B

so,. All it does. Is it just loads the website., but you would expect to use the webview.

B

On uwp or any other platform,, it works the same way.

B

You get the same events, you get the same properties, and it's really easy to use. so,. I haven't built a lot.

A

Of desktop applications, but in the ones that I've seen,.

A

A lot of people really seem to love to use this web control instead of their desktop apps., particularly when they're talking about embedding websites or adding some web-based functionality to their controls.. It seem to be pretty popular.

B

Right. mixing the web world and the native world. It's something that a lot of developers do because there's a lot of stuff. they've spent a lot of time, investing in search of their web services or they're using third party web services that they can't really re-implement natively..

B

It's a great way to actually do that. Inside of your applications., that's awesome., now moving on,! I can show you some other controls, we've just added.. One thing we do with the toolkit is,.

B

We try to bring controls, developers need for developing under any uwp application, and there are things that existed.

B

In wpf that don't really exist in uwp anymore.

A

So, we've kind of brought some of.

B

Those controls into uwp.

B

so for example,. We just recently released the uniform grid. if you're a wpf developer, you've already are using the uniform grid, and you can now use the uniform grid inside of uwp through the toolkit.

B

Or things like the menu,, if you have ever used menu,, which probably most developers that have done wpf have used the menu,, you can use that now and uwp application et cetera..

B

So, and all of these controls are available., you can take a look at them through the sample app kind of play around with them immediately. nice.. This is very cool. so,. What.

A

Else, do we have inside the toolkit that we can make use of?.

B

So, one of my favorite things that we provide on toolkit- and it's my favorite thing, because I kind of mostly focus on this is the animations.

B

animations are something that a lot of developers don't think about when they build the applications and it can improve the experience.

B

Of your applications quite a bit, if you have some nice motion inside of it., we spent a lot of time thinking. How do we make the animations easier. so for example,? If we have helpers in here.

B

So,, if I want to just grab an element from my xaml and just say, I want to rotate it, or I want to apply animation where it rotates, and then it kind of changes, the offset, and then translate and skews,.

B

I want to be able to do that, and doing it right now. It's not the simplest thing to do..

B

We created this api that allows you to do this., so you can do it either through xaml.. You can just add a behavior to kind of just offset element and do a plack, quick animation.

B

or you can also do it through code..

B

So for example, I can just show the documentation here.

B

If I just want to,, let's say, offset this element,, I can just say, "element", describe a reference to the element and just say, "offset", offset it by that. Much and just start the animation.

B

now we'll just run the animation, the element with offset.. You can await this action,. You can actually subscribe to events to it., but what's even cooler to this is,, which is not shown in the sample app here,, you can actually stack multiple animations and you can await multiple animations at one of the same time.

B

so for example,. Here, I'm at the documentation on docs,, so microsoft, docs,.

B

And I can actually show you, we have a new api called the animation set.

B

This allows you to take all the animations that we have inside of the toolkit and just stack them together..

B

So for example,. If you look at this animation, here,.

B

Well, this does takes the ui element.

B

at first. It blurs it and fades it at the same time.

B

after that's done, it then it fades it by applying all these properties, sets the ration on everything, but you do on a 50, 100 milliseconds and starts the animation.

B

So,, the animation would blur and fade.

B

we'll wait until that's done and then will actually fade again to a different value, and then it will complete at that point.. So it's very easy. with one line of code, you can have this super powerful, animations and value application. right.. That's really important because, like you said,.

A

Animation is something that developers are usually a little bit scared of, because they're like, oh,, I'm not a designer, and I don't want to do the math.

A

To calculate coordinates and the transitions and whatnot., so we give them simple apis and they are more likely to be like, okay,. Well, let me try,, let me kind of get involved in it and see how I can add it to my application.

B

Exactly., a lot of developers don't even know that a lot of these apis actually exist in the windows platform already. for example,. One api that exist natively in the platform is called, connected animations..

B

It's a way for if you have same element on two different pages, and you want the element to kind of just animate to a new page., I navigate to a new page,.

B

I want to sell them and instead of disappearing and appearing again,, I want it to kind of pop out. Then old page goes away,.

B

A new page comes in and kind of goes back to wherever the page is., so we actually wrote helpers to make this easier to developers.. So, for example, here, I have three pages.

B

as soon as I navigate from one page to the other page,, you can see the elements kind of just goes from one page to the other page,. It doesn't just disappear. at the same time,. It kind of just goes back to it.

B

So,, if you follow what happens when I click on this element,, you notice that also the header content also kind of moves along with that element.

B

so,. How do you actually do this in uwp?

B

there's apis? You can do this through code behind and they're, actually not that hard to do, because not all developers even know about them. well,. You may actually make it a lot easier, even through xaml., so for example, what I can do is,.

B

Let's say I have my first page and I have my border element- here, right?.

B

I can use the connected animation helper, that we have and just assign it a key. just give it a key called item. on the second page,. I have the exact same element and I can just give it the exact same key, and that's it..

B

Next time you call paged on navigate, our mission helper will do all the calculations for you,.

B

Will know where to go from one element to other element and just animate the element there. or the same thing. If you want to attach another element to the element, you navigate into, and you want all these elements to navigate as a group, kind of move as a group,.

B

You just anchor it to the existing element, just like we do here in the anchor element. or if you have a list, and you want to navigate like here,.

B

You want to navigate from this list that I clicked to the new page,. You can do the same thing..

B

You just assigned a list item.

B

Key of the same thing, and you just have the same key on.

B

Your next page and the element will kind of just navigate there as well. nice.. I really love.

A

This in-sample development experience so to speak. I guess.

A

right.. It's really easy to demonstrate,.

B

I don't have to open multiple visual studios and.

A

Kind of get started., it's really easy to do.

B

Nice. yeah, I really love that. right. so,. We have a lot more of this.. I encourage developers crouches down with the sample to start playing around different things. We have here.. I mean we have things like implicit automation.

B

so,. Instead of having to write the animations yourself,.

B

You want things to happen when the offset changes.

B

You change the offset from zero, zero to 100, 100. Instead of just jumping,. The element can just animate to it.

A

Edit, some of those helpers in here through xaml.

B

So,, you can just say for example, here what I've added implicit animations for the show..

B

What this means is,, when the element becomes visible,, just run this animation on it. so,. It would translate it and change the opacity to it.

B

I've done the same thing for a hide, animation. so,. If I change the visibility on the element,, the code behind it and say, visibility, collapsed,, it just runs the animations automatically..

B

I don't have to run the animation myself and remember how to do that., sure. so,, there's a lot of these cool things in there.

A

So, one thing I know that people are always concerned about when we talk about animation specifically, is always the performance,. How did it affect the performance of my application.?

A

If I was supposed to start adding some of these inside of my app,? How would that affects the running of my desktop?.

B

The great thing is that we take advantage of the compositionally or the visual ear of the platform,, which is a very performance layer that lives on top of the actual framework elements.

A

So,, it uses the actual hardware.

B

Accelerated animations that were part of the platform to run this. so,. You shouldn't see a huge performance by using these animations.

B

We continuously put effort into making their platform easier on the platform side.

A

We just take advantage of that.

B

Improvement inside of the toolkit. cool., that sounds pretty good.

A

All right.: let's go ahead and see what else we got in this.

B

So, moving on. recently in the latest release,. We also added some new controls for axing the microsoft graph.. We continuously add more support for more things: microsoft, graph..

B

We just recently added support for things like accessing the device, history, etc.

B

We added controls to be able to easily add support from microsoft, graphing application.

B

so,. If I want to have a user log in,, they can just click a button and it can log in data. the developers don't have to worry about how to talk to microsoft, graph or anything like that., yeah. so,, for example. We have this control that allows you to sign in or sign out just by that, and don't you have to build this ui yourself or if you just want to search for a user inside of your active directory.

B

For example, I can search for you,, I'm logged in with my microsoft,, my corporate account here,, and I can retrieve, directly find you because the access, it talks to the microsoft graph for me..

B

I don't have to worry about how to actually do that communication. Really. so,. We have four new controls that we added this release, and we were planning to add more controls as well.

B

Coming up in next release to make it easier for developers to access these., it's pretty cool., then you.

A

Mentioned again that some of these, a lot of these are open: source,, right? so,, if you had other teams-.

B

All of the these is open. Source.. Everything that I'm showing you right now is all open. Source, everything is on our github. Page.

B

developers can go. Look at this immediately.. Everything that we do at toolkit has to be open source because we do it in collaboration with the community, right? yeah.. It's not something that microsoft does alone.

B

a lot of stuff. I showed you was actually built by the community.. We didn't build it, community built it.

A

Oh, cool., we are leveraging that. so, we're seeing continuous contributions in bug, fixes and whatnot.

B

Continuously, yes., I would say 80 percent of all,. Everything in toolkit is done by the community.

B

nice.. We have a core community group of mvps and other members that we get together.

B

We decide what goes into next iteration, and we work on it. Together. we have other developers coming and they submit bug fixes or they actually submit whole features..

B

Then we have a discussion on github and we decide what goes in and what doesn't go in.. It's all done in the open. nice., that's awesome. now,. I mentioned the microsoft graph controls,, but we also have services to access the graph, for example, directly through your code behind, or we can access things like linkedin service or you want to access twitter or you want to access onedrive,, facebook, or bing..

B

We have all these services developers can take advantage inside of their application.. We recently started doing is actually because a lot of.

B

These services don't actually require to be on windows.

B

You can actually run a lot of this code on .net, extender, proper or .net core..

B

We started moving them to .net standard packages.

B

so,, even developers that are targeting xamarin will be able to access a lot of these services.

B

so,. For example, the bing services,, the microsoft graph service and the onedrive service are already in .net standard packages..

B

So,, any developer can take advantage of those. we're moving forward to move a lot of that code. That can be taken out of your specific packages to more focus. Individual packages.

A

See you have a lot of interesting ones: here, like there's bing,, there's facebook,, you have twitter,, you have onedrive.

A

right. microsoft, translator.

B

Exactly., if I wanted to- because,.

A

Again,, all of these are open source as well.. If I wanted to do something for cognant of services per se,, like, I could add, a cognitive services.

B

Absolutely., we actually work really closely with a lot of the teams that build a lot of these services, microsoft services internally and work with them. so, for example,. We work with the microsoft graph team directly to make the service better..

B

The cognitive services that you mentioned actually already have a service that have created themselves. That's already open source out there. so,. We talked about putting it in here,, but it's already out there and they are all proud of using it,. So it's already exists.

B

B

yeah,, that's it.! I talked about moving more things to .net standard..

B

We also have things like parsers in here that are already .net standard..

B

What we decided to do for example,. We have a control called the markdown text, block,, which allows you to half mark down, and just display it, and just render markdown,, which it's not that easy to do..

B

We actually recently,. We split up the parser from the ui.

B

So,, if you wanted to take the parser,, you can actually run it on xamarin,, but right there you are on top of it, and that we can have a shared code where the parser just parses the markdown given,, and that you can actually just render it differently in different platforms..

A

That's really interesting, and you said again, all these their own individual, packages,, right?.

B

We have about 15 different packages.

B

so,. If you just want to get just the parsers,, you can just get the parsers., you don't have to take any of the other-.

A

Probably just other stuff. nice.

B

Exactly. more recently,, we actually even started adding, talking to a lot of different teams within microsoft, especially in windows, to start shipping out of their apis out of down from the platform. for example, the notifications team. That's in windows.

B

Is shipping a lot of the notification helpers that don't really belong into the platform.?

B

It's part of the sdk,, but they actually need to be out there. they ship this out of vent through the toolkit. so,. They have their own package of the ship that provides the helpers for creating post notifications or live tiles.

B

sure.. You don't have to actually run this code and you repick.. You can actually run this, for example, on your asp.net site.

B

render that as xml, because it's just xml, and then just pass it on to your application and just pop it up.

A

This code actually runs out on .net.

B

Center as well, or, for example,, the gaze team,, the eyegaze team, just recently added.

B

A new library as part of a toolkit that allows you to use eyegaze..

B

If you have an eyegaze device like a toby device on your device,, you can actually use that device to interact with the ui on your application.

B

so,. You can build xaml.. You can add a couple of extension properties to it.

B

then,. All of a sudden. You have that device.

B

you'll be able to click things with your eyes, and dwell on things, and do all kinds of things that people that use those devices are used to it,.

B

And it really helps with not just accessibility, but with gaming, etc. sure., one other things I really love about. This is.

A

The fact that, because you split all these different services,, it's almost like it's not just about windows, right?, it's just code at that point. so,, like you said I can use it on the windows desktop,, but I can use it on my xamarin apps, and I can even use it on my asp.net apps as well.

A

right. exactly. yeah.. We are.

B

Called windows community toolkit because most of our focus is on windows. sure. but, that doesn't stop us to actually provide or to provide packages that don't work just on windows,. They work everywhere.

B

it's easier to provide these packages for everybody, because more and more developers start contributing to it and make the product better. sure.. That makes sense.. I mean if you.

A

Take the markdown one for example.: there's nothing windows, specific about markdown,, right?,.

B

Like everybody could use it.

A

Right. so,, it makes sense that it can be an independent package.

B

It just doesn't have any of those windows concerns.

B

we're going to move forward to do more and more of those things. we're still investigating what we can move to .net standard and what can be used by more developers.

A

Nice., that sounds really awesome. so,. Why don't we go back and show people where we could go to get some of these things.

B

Absolutely., maybe even like.

A

The github site and whatnot that they can go.

B

Absolutely, yes., if you go to aka.ms/windowstool kit,.

B

You can get directly into our github, and can look at all of our issues and the current pull requests that are happening right now.. You can look at the code for every single package that we have..

B

The read me actually goes through automatic builds.

B

You can look at the documentation directly on microsoft's docs from here..

B

It's already all there on docs and docs is amazing for this.. It just makes it super easy for us to contribute to documentation, the community contribute to documentation..

B

It just makes a lot more sense to integrate with docs directly..

B

You can get there new get packages from here directly..

B

You can just look at the codes for every single feature that we have on here,, animations,, brushes,, etc.

B

It's all available on here. so,. If you want to get started with contributing,, we have a contributing.mv just like any open source project. Would, right?.

B

You can take a look at what our guidance are.

B

we're under the mit license, and the toolkit is actually under the .net foundation.

B

So,, if you already contributed to .net standard,.

B

This is going to be really easy for you.. It's going to be really simple to start.. I started contributing, just have to follow our naming conventions and just or follow structure,.

B

But other than that, it's really easy to do. It. cool., that's awesome,, man.,.

A

Great., thank you so much for coming on and talking to us about these. of course.. Thank you for inviting me.. This is always fun. appreciate, it, man. there. We just learned all about the windows community toolkit here on another episode of the on .net show.