Visual Studio Toolbox

UWP Community Toolbox

Rate this post
(Video Transcript)
Hi, welcome to Visual Studio Toolbox. I’m your host, Robert Green, and joining me today from the brand new Channel 9 studios, this is my first show here, my guest David Catuhe.

>> Hello.

>> I pronounced it correctly?

>> Absolutely correct.

>> Excellent. [LAUGH]

>> That’s the French way. I love it.

>> I like to pronounce people’s names correctly. If you’re gonna come on the show, I should get your name right.

>> Thanks, [CROSSTALK] I appreciate that. [LAUGH]

>> David’s joining us to day to talk about the UWP Community Toolkit, which is a set of some controls, some helper functions, that is just released as a NuGet package recently.

>> Correct, yes.

>> So you’re gonna show us what’s in it, why was it created, what does it help me do?

>> Okay.

>> Fun stuff like that.

>> Perfect. So UWP Community Toolkit, the important point here is community.

>> Okay.

>> The idea, since the very beginning, was to involve the community with us to help us figure out how to simplify UWP development. So today you can grab the SDK, get Visual Studio, and you can start working on your application. But sometimes you may have to deal with plumbing. Sometimes you may expect high-level controls that you don’t find in the SDK, for good reason, obviously. And to fix that, the idea was, should we create a toolkit just on our own and then give that to the community? Or should we just be more open and just start with the community? And at the very beginning we handpicked the several MVPs, the most involved. And I can think about Scott Martin from the community. They are really active guys in the community. They are helping the community to build UWP applications. The plan was to start with them, think about what we could do for everyone.

>> So when you say we, exactly who’s we?

>> It’s Microsoft. In my team, we are four people. My team is inside Windows. The name of the team is Partner Application Experience, PAX. So it’s Windows/PAX.

>> You and I used to be colleagues in DX.

>> Correct, I used to work-

>> [CROSSTALK] group, and the folks on your team were doing such impressive work that Windows drafted you.

>> [LAUGH] Thanks. And my work-

>> [CROSSTALK] And now you’re over there.

>> Yeah, my work is here kind of an extension of what we did in the Evangelion world. The idea is clearly to help community use our tools and create fantastic things, fantastic applications. We are not creating application for them but at least we provide [INAUDIBLE] bricks that they can use to build their own applications. It was the case back in DX, and small Windows [INAUDIBLE] right now, obviously.

>> Right.

>> So, here enter the UWP Community Toolkit. I can probably show you, we have a sample application.

>> Okay.

>> The toolkit itself is based on a GitHub repo. So if you want to go to the GitHub repo, which is right here at Microsoft/UWPToolkit, you will find all the code of the toolkit itself.

>> And-

>> Of the sample application.

>> Cool.

>> The sample application, you can find this as well, under UWP Community Toolkit Sample App on the store. So even without dealing with [INAUDIBLE] whatever, you can still download it and use it. And we have four packets. Controls helper, animations helpers and services. So, I won’t go through all the controls that we have here but basically, the idea was either to fix a missing thing. Think about the range selector we have slide down right now in the SDK. But you have no way to easily create a control that can specify your range like min and max value. So that’s why we provided this control which is a double slider actually. And we also have kind of control that you can already do today with SDK, for instance hamburger menu can be easily done using a speed view. But for the developer, we are thinking about beginners or people that don’t have too much time to create an application. Thinking about hamburger menu is not just using the speed view. It’s also thinking about this button, which has to be on top of everything.

>> Right.

>> Then you have to deal with it, and you have to find the right font icon to use to these little three lines.

>> Yeah.

>> It’s doable. That’s not the problem here.

>> Right. So the Hamburger control, there’s no such thing as the Hamburger control. You do a rectangle, you do a box at the top with three lines.

>> Yes.

>> And then you do a menu. And it’s all put in a split view.

>> In a split view. Correct.

>> And then you gotta understand when is it on top.

>> When it’s not, when-

>> [CROSSTALK] So, it’s a lot of plumbing. It’s not that hard to do, but it’s plumbing, right?

>> And here what you have to say is, hey, I want hamburger menu. This is my foreground, this is item template I want to use, this is option item template because you have the, here, we have the menu. And you also have the settings at the bottom that you can also use. And for the user, I just defining values instead of defining all the control should work.

>> Mm-hm.

>> That’s the point here and that’s the point for most of our controls here. They are all doable, because we did it. [LAUGH] I mean, we are just using the SDK.

>> And presumably the code for that hamburger menu looks pretty similar to the stuff you’d have to do by hand if you were just doing hamburger menus by hand. And there’s probably, obviously, stuff in there that you can learn because it’s written by-

>> [CROSSTALK] If you interested by the plumbing and how t works under the hood, you can just go to the Github report and see the code. But when we were discussing with develop props, they think about developing for Windows as a easy task. They just download Visual Studio.

>> Who knows?

>> And they want to drag and drop.

>> As somebody who’s been a developer [LAUGH] for a long time, I never use the word easy.

>> Yeah, it has to be easy.

>> Things are straightforward. Things are doable. Nothing’s easy.

>> But we try to make it easier.

>> Easier, yes.

>> So they are really happy to have a nugget package because if you are a developer and you are not interested by the code, you just need to grab it, the toolkit from-

>> [CROSSTALK] Also gives you more consistency across applications.

>> Correct.

>> Cuz the default for that hamburger menu control is this and if you just slap it in, this is what you’re gonna get.

>> And you have just to tweak colors.

>> Right.

>> Or just presentation, that’s true. And the developer think, okay, I want to wrench to the top. I get this toolkit and I have my wrench at the top. That’s it.

>> Yeah.

>> Obviously I can think about, okay, I need a double slider with, you know what I mean? It’s easier right now. We are not fixing all the problem of the universe, but at least we provide a first start. So we have controls. We worked with the notification team, they were publishing the notification extension on a separate repo, on a separate GitHub. And we decided to merge everything because it’s part of what we want to do, like helping people achieve more by removing plumbing code, let’s say. So yeah, if you want to deal with LiveTile octets, you have to deal with XML and XSPEC.

>> [CROSSTALK] There’s like 20 different templates and it’s

>> [CROSSTALK] Thanks to this notification extension, there is a object modeled on top of that. We just deal with the object, so think about the toast here, here’s a code of a toast. You create a toast content, which is an object, not an XML path, and then you specify properties.

>> Wow, look how easy that is.

>> It’s really easy. And then, with that, you can pull up a toast easily. Same thing, obviously, for LiveTile. Then we also have animations. We introduced with Windows 10 something extremely powerful, the composition up here. Composition up here is to help you re-achieve fast and fluid animations. But there is a drawback. It’s not that easy. You have to understand that you are at the XML layer, you are the composition layer. You have to deal with that, you have to deal with sometimes complex expressions, if you want to do animation or whatever. Here the toolkit just provide you, let’s thing offsets for instance. I can play with the offset of my object. See, that moves. We have two option. First, if you are more a blender-oriented guy, and you want to deal with drag-and-drop stuff, we provide it for you here in behavior. This behavior just specify, this is the offset I want, this is my duration, thank you very much. Apply that immediately. If you are more a code guy, then you can just use Extension that we added to any UI element, offset, fade whatever, where you specify the values.

It’s a nesting function, you wait for it, the animation is done.

>> Cool.

>> And obviously, that works for all kind of services, always the same thing. I can [INAUDIBLE], [LAUGH] so it’s a bit too much. Don’t forget the degree and same, you rotate, you get the values, and you can even use the up here. You can say ToolkitLogo.Rotate.Offset.Blur.Star- tAsync, and they will be merged and start for you simultaneously. And you can wait for it if you want, or if you don’t want, you can just run it, and then it’s like fire and forget stuff. The goal here, it’s always the same thing. You can do the same thing by yourself. But here, it’s one line of code, like my object.take. Easy to do. And that’s our model.

>> Yeah, you can do it yourself but it’s an awful lot of code, it’s a awful lot of learning, it’s an awful lot of-

>> [CROSSTALK] And you have to maintain it and you have to.

>> It’s an awful lot of learning how it all works in the first place.

>> Yes.

>> Here you just get-

>> [CROSSTALK] As a beginner, you want to start simple but beautiful. And then, perhaps in the future you are interested by how animation and completion works, then open the books and see how it works.

>> Yep.

>> And finally was to provide services and in services I mean connection to network services. One of them, the easiest one is clearly Bing. You can say, hey Bing, I want to Request Async of search. This search will be done here on UnitedState for the specific Text

>> And you can get result from Bing.

>> Cool. But you’d still need to go get an account and have your app API and all that stuff, no?

>> No.

>> There is a completely free new account version here using just SWI. For other services, I agree, like Twitter and Facebook, you have to create your account on Twitter and Facebook. This is where our documentation could be really, really interesting. If you go to Services here and for instance you think about, okay, I want to publish something on Facebook, then here we get for you a complete recipe. This is what you have to do if you want to get your app ID and even the settings that you have to set with the values.

>> Okay.

>> So it’s a-

>> So this would allow-

>> no brainer.

>> Publish to Facebook from inside your app?

>> Exactly.

>> Okay.

>> Services, most of the time at least Facebook and Twitter, are read and write.

>> Right.

>> You can read from it. They could get your wall. Let me show you for Facebook for instance. Here is the code. First, you initialize with your app ID.

>> Mm-hm.

>> And this is where you need documentation to go through the process to get your app ID. Once you have it, you can log in, log out obviously with one line of code. You can get your feed, for instance, with one line of code but you can also get your picture. More interestingly, you can post to your feed with a dialog to confirm, okay, this is what you will see, because being silent and permission on the wall could be stressful for people because they don’t see what will be published. So with the dialogue, at least you see, okay, this is what I’ll have on my wall. I have a data donut so you have both option. And you can also post picture, that’s for Facebook. We have exactly the same for Twitter. For Twitter same thing, you initialize it with the required value, then you can log in, log out, you can get user and obviously you can tweet just a text or you can tweet a text with specific picture, up to four picture can be tweeted.

>> Okay.

>> So, it’s like one line of code and you don’t have to deal with Oart security and all, arrest a PI, that could be there, you don’t have to deal with updates.

>> Mm-hm.

>> They’re updating the API services every time. This is done for you by the toolkit.

>> Fantastic.

>> Yep. This is it.

>> Great. So how many people contributed to it?

>> Ha, so it was unexpected, I would say. We launched it one week and a half ago and we are already at 637 comments.

>> Wow, with 25 different contributors.

>> 25 different contributors. We have 47 issues open. Some are bugs because we also have bugs but most of the time it’s feature requests and this is the idea. DropShadow in the animation library. All that kind of stuff. People in the community is responding tremendously. I was not expecting that much. I spend all my day just checking the PR and the boot request and checking if everything is fine and responding to people. They are happy that we, Microsoft, and the community works together to provide high layer on top of the SDK. And we already have more than 400 stars.

>> Moving forward do you see a continued, that we’ll develop some, community will develop some.

>> I hope so.

>> Will it ultimately just be all the community?

>> I would love to be able to remove the toolkit completely. Because obviously in the future, the SDK, we get more and more feature in it. But in the meantime, I would say that-

>> How many contributions to the toolkit?

>> I’m expecting 80% community, 20% Microsoft. We, Microsoft, are here to keep quality and to work on things that are not easy to work on like, for instance, I’m planning to add more accessibility to the controls and that’s not something easy to do and people are most of the time hesitant to do that. We, Microsoft, we need to ensure that everyone can use these controls and be able to locate an application with it. So that’s part of the thing we will do. And then that is a project management job for me. People are coming, hey, we think about this. They discuss between them and at the end, we need to take a decision, then Microsoft can come and say, hey, this is our opinion. Community say, this is what we think at the end, we find a common way, like I say, and then someone can develop that. It could be Microsoft and it could be community.

>> Cool. So what, if you know what additions are currently being worked on, what could we expect to see next?

>> It’s easy because we have flagging our issue. The community provided a blade control. I love this one. You see the Azure portal, the new one, when you click on the button.

>> Yes.

>> The new blade is adid and then you click on this one, it’s a new blade. So you have this kind of true view, it’s like a true view but with blades one after another. We have this control right now, v11, so 1.1 one would be end of September.

>> Cool.

>> We also improve values, things like bugs. We will have drop shadows and new options, so we have blur, rotate, scale, etcetera, in the animation library. Drop shadow will be there. What else? We have, like you say, [LAUGH] we have a carousel with composition. We have a wrap control. We have Bing services supporting for video and that’s a lot.

>> Fantastic.

>> Yes, and that’s just end of September, so for V1.1. We plan, we opt to ship a version every month.

>> Every month?

>> Every month.

>> Interesting.

>> This one is gonna be huge because community response was so wow that a lot of people came and said, yeah, obviously I’m using this in my own toolkit.

>> Mm-hm.

>> Why not sharing it with everyone and then we need to polish it and take it into the toolkit, and that’s 1.1. I opt that for 1.2. It’s gonna be smaller because that’s a lot of work to maintain that and be sure that everything is working fine with the right quality.

>> Cool, very cool stuff. So if anybody’s doing, for people who are doing UWP development, everybody doing that should absolutely take a look at this.

>> I think so, I think so.

>> I’ve done hamburger controls before and I got the code from Shen’s blog and it was understandable. Easy enough to figure out but-

>> [CROSSTALK] Just one control to drag and drop?

>> Well, going from never having done one before to finding his blog, to reading his blog and playing around with it, it’s several hours worth of getting started versus just being able to get this toolkit and say, bam, hamburger control, let’s move on. So that’s really, really cool.

>> And today, to be honest, I thought the controls should’ve been the most exciting part of the toolkit and, to me, that’s my own opinion, it’s not. I’m extremely excited by animations because you can merge them and that’s extremely easy to do wow things with it in Surfaces. Like publishing to Twitter or Facebook was always a pain.

>> Yes. Well, the thing about animations, that would be the difference between having it in your app and not. Because the amount of time it would take to learn how to do that is probably daunting. So you’d say, well, in the next version. So we’re down the road, all that in animations. We want to have time to learn how to do it. Now you don’t have to learn anymore. You just get it.

>> I had an application and I wanted to add a blur when I display a message box and I was. But now it’s background blur, display my message box, that done, remove the blur. Done.

>> [CROSSTALK] Cool stuff. Awesome. All right, so people building Windows 10 UWP apps, get the toolkit. Download it, play around with it. We’ll let you guys know what you find.

>> Come, crit issue, if you have a question, or something that you want to add to the toolkit, or you want to contribute, just create an issue that’s clearly open to everyone. We are accepting all PR.

>> Excellent. Well, we’ll have you back sometime in the fall to show us what’s new.

>> Excellent idea.

>> Cool.

>> Thank you.

>> All right. We will see you next time on Visual Studio Toolbox.

>> Bye Bye.


Read the video

In this episode, Robert is joined by David Catuhe, the project lead for the UWP Community Toolkit, an open-source collection of helper functions, custom controls, and app services that simplifies and demonstrates common developer tasks for building UWP apps for Windows 10. David shows how easy it is to use the Toolkit and discusses some of the motivation and goals behind its creation.



Comments to UWP Community Toolbox

  • Woow atleast youre now back, i have been waiting urgently for youre next episode

    Alsong Dunstan August 31, 2016 10:23 am Reply
  • Hi, that looks really nice.Can someone explain me the differenc to Template 10?

    Steffen September 1, 2016 1:10 pm Reply
  • its a template 10 app,its that he has made an app that will help you with the UWP apps development

    Alsong Dunstan September 9, 2016 12:59 am Reply
  • 这样板都在变形,让一个没知识的人难以理解产权权限,有没有有可以帮助好心人h呢

    zjc520 October 18, 2016 10:02 am Reply

Leave a Comment

Your email address will not be published. Required fields are marked *

1Code.Blog - Your #1 Code Blog