Building amazing applications with the Fluent Design System | B107

Hey. I'm Paul Gus Moreno, I'm James, Clark we're both from the developer platform team in Windows and we're excited to talk to you today about, building amazing, apps with the fluent design system yep and. James. And I wanted to start today's talk with, this beautiful. Photo. Of a meeting room and, let's. Just take a moment to savor this meeting room it's, beautiful, it's open look at the lighting the materials, the texture, the glass, it's, also very functional has, a bunch, of swivel chairs with arm rests, and a nice large table, a whiteboard a screen, for projecting, might, even be a surface hub, businesses. Invest in creating, great workplaces like. This for, many reasons, to improve, productivity, to, increase, satisfaction, and loyalty of their employees, to show, off their brand when, customers, come to visit them and. You. Know what, we think about is how, can we make our digital, or modern digital workplaces, also. Be these beautiful, wonderful delightful. Places, places that increase, productivity, and, satisfaction. And loyalty. Places. That show off the brand of your company, that. Reduce, training. Costs, and support. Costs. With. A fluent design system we want to help you create beautiful fantastic. Experiences. For your modern digital workplaces, and. Thankfully. With the magic of software it's a lot less expensive than what it takes to build a great workplace in the physical world so today. We're going to talk about what is the fluent design system, and how it can help you, we're. Going to build an app with fluent, design and, James will show this awesome build cast app, as, part of that and and. It will just give you some next steps and additional resources you can use to learn more and engage more so. What is the fluent design system and how can it help you. You. Know first the fluent design system, is about helping you create experiences that feel natural. In each device that, means the devices, that we all use today our laptops. And our desktops. And tablets and, so forth but. Also emerging, devices. New large screen 2d, devices. 3d. Mixed. Reality devices like all the great and, our headsets, that that, are launching this fall. No. Screen devices and. Experience. To feel natural on each of these devices and with each of the inputs, that people use on them so the, traditional, inputs of mouse and keyboard, touch. Gamepad. If it's an Xbox app. But. Also things that are merging like voice and speech. Pen. Sixth. Off controllers. And dials, and other types of controllers gaze. And, gesture, and. Even other types of sensors and so, how, can we have a design, system that helps you create experience that feel really natural in each of these devices and all these inputs.

Also. Experiences. That help people to achieve more. With. The fluent design system, we're not just interested in helping you make experiences. That. Help. People consume, and enjoy content, but how people create, work, collaborate. And do, more sophisticated business. Applications, and I think we'll show you some stuff for that today. And. Finally, with the fluent design system we're trying to help you create experiences that engage customers deeply. Leveraging. People's knowledge of the real physical world and. How we experience, things there to make, you eyes that, feel effortless and reduce cognitive load and draw. People in, experiences. That use light and depth and motion and materials, in scale and these, digital techniques that were once reserved for the world, of video games in major motion pictures and make, them a part of everyday experiences. That are so easy for app developers, to go create, and. You. Know to do, this fluent, design, system we're trying to provide a comprehensive system, for you. Controls. And high-level building, blocks and platform. Support for that guidelines. Design, tools support, dev tools support, element, samples, and and really great comprehensive, end-to-end samples, of which, one we'll show you today the build cast app and. And, one thing to be aware of with fluent is unlike past Design. Systems where. Maybe Microsoft has, gone. Kind of dark for many years and then come back but you know out of the cave with some great new thing for everyone to go adopt with. Fluent really trying to be iterative bring. It to you along the way learn. Take, people's feedback and input together. And so what, we'll show you today is what's in the very first wave of fluent, that's in the you know out this fall and, know. That we're working with you and taking your input to kind of really transform, user experiences, over time three, iterative waves so, that's a lot of talk I'd, like to show a video now that just shows some of the kinds of experiences, you can create with fluid and these are all experience, of shipping the Fall creators update let's take a look. Well. That's fun and those. Are all real experiences. Shipping. On the windows 10 fall creators update using, the same platform and guidelines and things that we'll be showing you today, and that you can take advantage of so. Let's, let's get to it let's build an app with fluent design and I'm. Going to pass it off to James to show the app that we're gonna build all right. Let's. Trump build an app so if we could switch to the demo machine please that, would be awesome. Great. Well sadly, the weather does not look like this desktop, image outside it's, a little bit wetter and Rainier here in Redmond right now however that's not a problem we're going to jump in and show you our sample, apps so here. Is Bill cast and, what. I'm gonna do is just sort, of talk through a few of the characteristics that we'll dive into in a little bit so the first thing is as I drag the window around that kind of beautiful sunset, that that thing very very reminiscent. Of summer that. Nice orange you can see that kind of bleeding through the window and this sort of rather nice texture, here as I. Move the mouse over some of the items here in the in the menu you can also see the lighting effect and this is something that we call reveal highlight and will, kind of drill into that in a little moment, when. I resize. The window down you will also see kind of the adaptive, nature of the UI and this is showing how as the window shrinks and expands it, can nicely adapt, for us now. Not, to be outdone we have a rather nice sort of nighttime scene of Seattle here we're sort of celebrating the last build which was here in Seattle and, as, I kind of navigate. And scroll over this list you'll see that we have this rather nice parallax, effect and so really. Sort of trying to introduce that notion of depth at introduced of. Motion. So. Next up some, animations, like if I go in now and I'm sure many Watchers, are very familiar with channel 9 will drill in and have a look at some, of the channel 9 items and, this. Is showing so the animation support the connected, animations, and some of the sort of beautiful staggering. Animations, that we have here and. If. I just kind of come back you can see these play in Reverse as well so you can really sort of see that context.

Transfer. From, my sort of my home page into, my into, my details page. We can come over the MS dev show another favorite, of ours here and if, we go in and have a look at. Another level of detail another level in the hierarchy you'll, also see this, this further use of the acrylic material, and you can see here that we're sort of using the acrylic material, to, really bring in some of the branding, elements, so. That's a super, quick overview, I think we'll switch back to Pauls machine now. All. Right so. There's, a bunch of different elements of things that James showed there that we're gonna walk through today, to. In detail to show you how to build an app with fluent design and so that's, that navigation, view control. The acrylic material, the, reveal highlight, gesture. Actions, input. Conscious control smart. Ink connected, animations, in perspective, parallax we've got a lot of Wow there's a little bit a lot of fun news just some of the new elements, that we'd like to share with you and talk about so let's, dig in so, it's about a navigation, view first the, navigation, views that pain, that you see on the left hand side of a lot of apps that there's now a standard. Control for and support. For in the platform, it it's. A great way to navigate across sections of an app of course a lot of apps have different. Pages, and regions in that you want to kind of go to, it. Scales. Great two different screen sizes not, just if you have a wider. Or less wide window, size as James was showing but even if you have a taller, or longer window it Scrolls automatically. Their support for headers and and various. Things like that to really take. Use of that space, it's. Optimized for every input so there's great keyboarding. And mouse pen, all the different inputs work in, a really natural way with it it's. Very it's accessible, and so actually one thing people don't realize is, if you have people. With accessibility needs. Someone. Who is using a screen reader for example, to look at their UI it's, not just about making your UIs all look the, same visually, bf2 make sure the accessibility, structure is consistent, so that those, users can get a consistent, great printable, experience, with it and the navigation, view does a really great job of having all the right accessibility, models implemented, for people and. It's just a really easy, way to get a high-quality premium, feel in your app and all the sudden you can take a an app that maybe it was looking a little you know long in the tooth and and and make it really seem fresh, and modern and so. Let's take a look at how we do that and I'm gonna go back to the demo we'll go back to the demo machine please yep so what, we're going to start off with is this is kind of a version of the app that what we took away all of the fluent elements, and so. Basically. We. Have a slightly less polished, experience here, we still can kind of do some basic navigation I, can still go in and check out my awesome channel 9 feeds but. You'll see that the animations, are gone and also, you'll see that we really don't have the notion of navigation, in this application, it's really we're, switching pages, but we don't have that notion of where am i what, where can I go kind of that what we think of as a spine, and navigation, spine, so. Let's jump into visual, studio now and show you how we can fix that so here. I have my kind of navigation, root, page and, and. If I have a look at what we have already you'll see that we have the kind of classical, frame. Element. Here the frame element is what provides the navigation, support and so. If we want to kind of introduce and add this navigation, view, it's actually pretty simple we, can do it a markup, and, what I'm going to do is just come in here and uncomment, this code block, above. Above. The element here and, and. What I'm essentially doing is, I'm essentially kind of wrapping, that frame I'm sort of encapsulating. That frame inside, of the navigation, view and if. I collapse it down you can see the structure is actually pretty simple. And. What I have is I have essentially, my menu items and that is defining, all of the kind of elements. That we have in the list of menu, items they all have icons, they all have kind of handlers. That will, cause the view model to navigate and then. I have this frame object, which provides, the, navigation, that the app that the navigation service my app needs so. Pretty simple stuff pretty simple stuff and with literally, that one addition, to the code we.

Don't Have to change anything else all of the navigation that we had works great but. We now have actually give users this sense of where are we where am I in, the app it's. Awesome that's so incremental to adapt it exactly. So. We'll fire the app up and immediately now we have the navigation view and a lot of those things that we looked, at earlier we now have kind of for free because we use that standard, stock. Windows, control that's. Awesome, awesome. All right let's take it let's take it back and that's, the navigation, view you. Know a lot of people are using split view today too and I think it's easy to move, over to navigation view gives you that complete experience, you know if people renewing that to here's, a snippet of the code and, you can go to our Doc's and stuff and see all about more, details about that so. Let's get on to the next element we'll talk about is acrylic material, one of the other cool new, elements. In this first wave of fluent people can take advantage of and. So to understand, acrylic material, it's really worth thinking about how, do we construct, our UI today. We. Use a palette of colors this is a the, standard windows color palette and. You. Know all apps today typically, just use colors, to build, up their UI and with, fluent one of the things we're introducing, is the idea of using materials, as a fundamental visual, building block to, create your UI in addition to colors and so, buy materials. We don't just mean kind, of pre-canned. PNG. Images or something like that we, mean rich. Visual. Effect graphs that look, and feel and work like real world materials, and give users some, of the, intuitive. Understanding. Of things, that they get from the real world and bridge, digital, and physical worlds, and kind of mixed reality cases, and. Kind of bringing that into as a tool for developers, to use in creating their user experiences. And. The, first, one we're introducing is acrylic material, it's. This rich visual building, block and it really helps you create information hierarchy a lot, of sophisticated, business apps have. A lot of panes of UI a lot of layers of UI to them and sometimes. It's hard to figure out how do you let people focus, on what's important, in the app design and an, acrylic material, is one of the tools you can use to create, that visual focus so people's attention is drawn into what's, important, at that time, it. Auto adapts to context, so one of things that's great about using. Acrylic material, is that. If you're, running over. RDP. Or on low battery power if, you're running on different types of devices and, configurations. It automatically, adapts, itself to that, context, to optimize. For performance and, battery life and, so forth it's. Pretty, flexible to puts a lot of app branding, so if you have a or something to your brand you can take advantage of that too with acrylic and so, great, new visual building block and let's, go take a look at how to do it in the demo awesome, yeah so again if we could switch back to the demo machine please. Awesome. So. The, first thing I'll point out is like this is the app as we just left it and as, I drag the window you'll see that the navigation view we just added kind, of has this acrylic material, by default, and as, Paul mentioned one of the things that is really cool about this is it would automatically.

Kind Of adapt to context, and, one example of that is it's absolutely themed aware so if I change into now the dark theme you, can now see that the material just automatically, changes, there and we can even switch to, a custom. Theme that's sort of picking up the branding, that we want to celebrate. Here in the app now. The other example, of adaptability, is, what happens when I collapse, down the navigation, view so so notice how right now as I move the window we're getting what we call the background, acrylic, which is showing me my, desktop, picture my desktop image if, I kind of resize, the app down and collapse it what you'll now see is, we're. Actually getting acrylic, sort of what we call in app acrylic so you can see that what is coming through now is the background of the application, as opposed to the desktop so. This is pretty nice and this is yeah. It's showing you how kind of this is built into the navigation view but what if we, want to actually add this somewhere else. Great. Question, well let's come in to once again I'll favorites a channel 9 here and if we just kind of drill in and have, a look at the details, for this episode, what. We'll notice here is that actually right now this header panel it's, kind of feeling a little bit flat to me it's just kind of is great it's using my highlight color yeah it's absolutely mayor, like, let's. Fix that by bringing some acrylic in so what I'm going to do is just use my, my. Zamel, tools, here I'm going to turn on my selector, and I'm. Basically going to tell, it to find that find. That element for me in the in the visual tree here and then, what I can do is actually jump to the source code and, what I can see in my source code is is the system accent, color okay, so that's where the the flatness, is coming from let's, put some acrylic in let's breathe a little bit of life in so what. I'm going to do now is just kind of dock my windows and just show some of the great tooling support we have here and, so. We have the live running out we selected, the element that we wanted and what, we're going to do is change out this resource, and and really it's very very, simple here we can just come in select. This this static.

Resource That we've defined was obviously put it in a resource dictionary, exactly. Where resources belong in a dictionary and we'll. Just come in paste it in here and. What. We see immediately reflected, in the running app is we now have some nice acrylic and and, I think that's looking better we're getting that nice channel 9 branding, is coming through it's feeling a little bit more alive what. Do you think about the color Paul do you like do you like that color you know it's okay it's. Pretty bright you, know it's a pretty bright I think it's a little bit too yellow perhaps so. What I just did I hit the f12, key I took myself to, the resource definition, and I can see here and my, my acrylic brush and once again I'm defining the brush in, zamel markup I haven't got to go in and write complex shaders, I haven't got to go and write a bunch of code behind it's, in markup, and what. I can see in the markup is this this yellow shift rod I'm not such a fan of this I think, we'll switch to orange. That's. A little bit nicer, we can even go to red maybe and. You can see this is all being applied in real time directly. In the app which, makes it easy for wannabe. Designers, like me to play, around with things yeah and you still see that channel 9 logo in the background kind of come through the acrylic to give a little bit of exact what channel on my in exactly. So that the acrylic material we've customized, it it was pretty easy awesome. All, right well let's go back to, you. Know recap, that, code Jamie show there's a whole bunch of system. Resources that are provided by default for you you can also create your own right, it's all layered architecture. As, a platform to give you the right level of flexibility, and ease of use and so go, take it look at and use a some acrylic material, and. Actually how about reveal highlight that's another new. Element in fluent. And. You. Know one thing that gives you is really a cohesive interaction. Visualization. Today, there's. Different interaction visualizations you might get sometimes with pen versus, touch versus, mouse and. So forth and reveal. Gives you just a kind of a unified interaction, visualization, that's very natural, and efficient, and, works with, all those inputs and, it really helps focus on what's important, sometimes, people. Draw out of lines or extra UI to help you see what's interactive, what's not interactive, on the screen that users need to know that you know what can they click on and reveal. Highlight gives, you a great way of visualizing. That that's, very dynamic and responsive and lets. You kind of again focus more in the content and have a lot less chrome, and in lines and things in the UI and it's, actually built into a bunch of the controls by default if any, of your windows insiders, you'll see that even more controls, now feature, reveal, highlight if you played with the calendar. If. You played with a command bar and others you'll see more and more reveal highlight even if you've if you're an insider you'll notice in the Start menu and more of the windows UI itself, this, is coming alive so, really, great time, to kind of get a on. It and you. Can also easily apply to your own custom controls so let's go take a look at how to do that awesome, yeah, great, so once, again if we could switch back to the demo machine that, would be great so.

Again. I want a sort of a start. Off by Hritik. Reiterating. The point that in our navigation view reveal. Highlight is something that we get for free and so if we just zoom in a little bit here you. Can actually really see what. This is and this is this is not fake this is not a bunch of like clever, pngs, on hover and this is actually, like a lighting, simulation that we have in the platform, comes, from our visual layer that kind of is one of our foundational. Layers in the system and it, gives me this really nice effect. Here and this, is I always say when I'm, talking about this that it's one of the things that when you actually use it and experience, it yeah it's it's that much nicer than when you're just watching someone else use, it yeah so. This is another example if you want to have everything I know me too I cannot gonna hover all the way so. This is another example and once again this is a list view control, and we, support the, reveal, highlight automatically. For free and you, can again see the effect is is here nicely for us now. What I want to show is just how easy it is to add that to some of the other areas, and there's an example here that where we actually don't have revealed, that we that we want to add it. So. If we jump to now playing, and. The now play experience, is something that we've sort of built as a as a custom, experience, and, you can see that we have this rather nice kind of scrubbing control, that has some physics on it and some. Other nice features, and. Because, we built this as a custom control we actually sort of incorporated, some button elements here and we want to actually now go and add the. Reveal, highlight to those buttons you can see again if i zoom in to just sort of make make this more obvious you. Can see that we have, that sort of fairly kind. Of binary, state. Right, now where we just we basically have a border, popping in yeah I want to bring in some of that reveal, so. If we just jump back into visual studio and. We. Will go, to the, to the aspects of the code we'll go to our custom, MTC, control. And. We'll. Just jump directly to that page nicely, here and what we can see in, our custom MTC, control, here is a series, of buttons we have a rewind button we. Have a play pause button and, so on because. We're, sort of good good, developers, we wanted to make sure we reused, our styles we didn't sort of throw, properties, into the button here we actually define these as a resource, and, again, our friend mr. f12, I'm. Going to press that and it's going to take me to my resource definition, and, what you can see here is very simple, we just have some simple properties width and height margin, and you. Can see that we're targeting a, button, element and pretty obvious we, need the style to target. The button. So. To add to. Add reveal what I'm basically going to do is I'm just going to simply take the style that I have here and I'm, going to base it on one. Of our system. Styles and the, system style in question, is the button reveal style and by, simply, deriving from that style I could I could obviously directly apply that to the button if I didn't have a definition. That I wanted to kind of use as well it's. And it's literally as simple, as that. So. We will rerun the app and I. Will now pick up my pen and, just. Very briefly show how the, visualization. Works really nicely with pen as well here. What. Do you think Paul what do you think I'm I'm very, see see. See how easily. You. Did that and now I'm excited for the experience, ah exactly, so now I'm using I've actually got my pen here, and. I will come down to my controls here and I'm now just hovering my pen and this, is one of those things if you have you know like you, have to be here because when you see that whole intent pen experience, or you, know mouse or touch but when you're really using the pen and just as you're hovering it shows up it's pretty yeah pretty radical. And. What's cool about that too is then you can mute those buttons down a bit so they're not distracting, from the video playback but again still see that they're interactive, and still have that kind of yes information, for the users absolutely. Um so, if we go back to the you know deck, and the you. Know again code, snippet is very simple. Driving. Stuff from the button reveals style or the other sort of reveal styles and you can go read up about all of them up on the dock site.

So. That's reveal so, next. One we'll have about is gesture, actions, and so. Let's. Talk about what, we mean by gesture, actions, all. Of us are familiar today, with. Commanding. On objects, using context, menus you right-click or maybe you press and hold and you get a context, menu and that's, that's great but sometimes you want more efficient, ways just kind of do a gesture, to quickly, do something so, maybe not all the things there on the context menu but the top one or two things that you've put on the context, menu lets, someone really quickly do that and so with, gesture actions and in fluent we've got a really good support for all the common ways that you might want to have that that that work and so that includes hover buttons with. Mouse or pen or other hover type. Inputs. Swipe. Which. Can work with touch or even one of the touch trackpads, and, of, course keyboard shortcuts and. You. Know some of these you've been able to do more easily than others but we now have really good you know support for that all up, for. This kind of an object commanding, that leverages, these familiar gestures. And. One of things that's important about is making it predictable across apps and so if you all take, advantage of swipe if we all use, consistent, keyboard shortcuts it actually helps users in your app be, more efficient right away get stuff done in their app and. Do. So in a way that really works with the input that they're using so if they're on one, of the growing you know larger. Segments of growing computers, is with touch screens and, they're. On a touch device that, can do those fishing touch gestures, that they expect that they've learned on touch screens for example, as. Well as keyboard if they've keyboard device and from, a programming model as you'll, see it builds on context. Menu and it's very you know familiar to use for people who root from any context menus before so let's, go take a look at it absolutely. So. If we get a switch back to the demo brilliant, so, what, I'm gonna do is take my episode, list here and it's just a standard ListView and we've. Got already, this sort of hover commanding. In place you can see that as I hover my mouse and, I've, got the right-click commanding, in place you can see that when I right-click and so we're sort of we're already catering, to those two modalities the. Thing that's missing though is is the swipe so you can see as I, try and swipe it's like goodness, wouldn't be nice it's broken I feel like it's broke right exactly. So. Let's jump in and see how we can add that so. So what we have is is a pretty typical ListView. Control and we, have what you what you have on every ListView, which is an item template it's a data template, that defines, kind. Of the styling, for each item in the list and you know, I have a grid I have buttons I have various elements here so once, again if we want to add swipe commanding, it's this notion of where we take what's there and we kind of put it inside we wrap it inside it's, something that we call a swipe. Control, so. We'll just expand, this and and comment. It uncomment. It here and what. You can see is that we essentially, have a simple swipe control, and one, of its children is, this notion of write items, and write items this this is really what's going to be the button content, that appears on the right-hand, side of the list as I swipe it so that kind of fairly straightforward, and the bet there's left item there might well be there wouldn't. That be wouldn't that be wouldn't that be good there Arthur, awesome. So we'll just uncomment. The the closing tag as well and again, these are just you know simple command. Definitions, they have an icon they have some sort of command or click Handler whatever it may be and.

Literally. By adding that additional and, a very much additive, piece, of code to the item, template for the list we. Will now have a nice swipe, capability, now. One of the nice things about this is sort of the input. Handling here is is is using, our. Independent. Animation layer and so it, really sticks to my finger and it has that little bounce on it nice and, and, it will actually sort of snap open bounce and it just feels very fluid, you, don't have to worry about that it's not something you have to go in and worry about you just add it and you get that person yeah there's so much to what, goes on behind the scenes there and it was just like a few lines of code to go exactly. Yeah that's great awesome, all, right awesome, lecture, our slides. You. Know there's again a snippet of that gesture, action code and, for, how to implement all of them there's again great guidance on. The, doc site so go check that out designed, at windows comm all. Right input conscious controls, another. Thing that's new, with fluent, this fall, is a lot of improvements, around making controls more conscious, of the, input and, so, there's a few improvements that you'll see you'll. See scroll bars adapt, to the input type and so, you, don't have a huge scroll bar showing up all the time when you're just using touch, or even if you're moving the mouse around the screen so, many people use track pads now and actually, just use trackpad gestures, or use mice with mouths wheels and use mouse wheel gestures to scroll that. Actually it's a smaller, set of people actually go use the scroll bar but but it's still there when you want it just go move your mouse over there and you got it. And so the, scroll bars kind of conscious, of that input it's actually really works really great with the pen now so, if you use the pen to scroll the, scroll, bar the scroller will just scroll directly with the pen you don't have to go use the scroll bar with it as used in the past I work like a finger. But, if. You need that scroll bar to do a quick you know scroll to the end of the view or something you can go grab it and do that so you'll. See that the. Pen panning, and selection, model is improved, so I mentioned, pen panning, now works just moves your pen to pan you, can also if you hold down the barrel button, instantly. Select, so it's very quick to either, select or pan now. Text. Boxes you can now speak into text boxes which is great. Just. Get the self keyboard up and click the little mic icon and and there's, and you can dictate into text boxes which is really valuable and. There's great handwriting support, in text boxes as well and so we're, not going to endure some time we won't demo all this but, the. Good part is just using the standard control standard, scroll view standard text box etc, you get all these great new features, and capabilities where, the system's really working, with all these different input speech pen. Handwriting. You. Know etc and, a really great natural, way for you so take, advantage of those just, with the standard controls but. The, pen is one particular you. Know input there's been quite, a bit of attention on and there's some cool new advancements, around smart ink that, we want you know about that. That really help you make really, fluent apps, it's. Worth realizing, that smart ink is a great natural, and efficient way to annotate stuff people. Do that both with visual. Documents, as well as you know wordy. Type documents, and, there's great support to recognize common shapes and. Also. Do custom gesture, handling as well and so, I think we've. Got a cool demo of that so let's take a look at it. Awesome. Yeah let's jump, back to the demo machine again please and. What. We're going to do now is we're, going to come into our notes, section and we. Have a bookmark here. That. We're going to that we're going to jump into so.

That's. Let's jump. Okay. So this is a nice video that Kevin gallo our VP has made on channel 9 it's the, windows community stand up and I want to sort of show my appreciation for, this for this particular moment, where there's a demo going on so I want to show you how easy it is to do some ink annotation, I'm, going to come in here with my pen and I'm going to tap on the on the inking button and, what I now have is this thing called an ink canvas, and this is something that we introduced, a couple of releases ago super, super, easy to use you, get this amazing beautiful fluid, ink and. I can come in here and I can kind of go you, know modernize. Or something I don't know what I want to say. Loving. The demo, okay. And. It. Always does this to me. It. Always does this to me. Okay. Every. Single time it does. Real live code folks. There. We go, we. Can actually draw some stuff awesome, so. We can get our nice fluid. Writing. Here but, also we can get this sort of shape recognition so, I have the circle that I started to draw I was. Trying to kind of show my express my love for the features that Kevin's talking about and using. The recognition, capability, we take that and we essentially, snap it into a geometry, and we can then put a glyph there so. What if we wanted to do something different than a heart let's say we wanted to actually take a different, gesture like something like maybe a triangle, and instead. Of putting, in this this sort of stock glyph we actually put in some sort of emoji, instead because obviously like you've got to have a mojit doesn't like emojis who doesn't like emojis, so, let's come in here and, what I'm going to do is is just show you how easy this is so I'm. Taking my in canvas, and I'm. Basically hooking up this analyzing. Async. Method and, this, is simply allowing me to walk over all of the strokes that I'm drawing as a user here and and. Actually recognizing. Which ones are drawings and then once I've recognized, which ones are drawings I can say well if it's a circle, I want, to just simply add a heart so that's what I'm doing and what sort what I showed you right now, but. What if we wanted to detect. A triangle, instead so let's comment out this block, of code here and you, can now see that if it's a triangle we're. Actually going to show an emoji picker and this is another new feature in the full craters update the emoji picker and we're, then just going to add that into the, scene and one. Of the nice things about this, is we, we actually get access to, the, drawing itself, and what makes that nice is we can do things like see what was the rectangle, what was the bounding, rectangle, so irrespective. Of how kind of imperfect. The triangle is you can still get this notion of how big it was and where, to fit, the emoji, into. That into that space. So. Let's. See if this works, track. Record is never good but that is not going to deter us we. Will we will fight on it's. The year. When. Demoing with magnifier, yes. It's, that old chestnut, all right let's let's try it again so jump into now playing and. We'll. Play. And. We'll jump in again and we, would now draw our mouse what, is what is Kevin holding, what is Kevin hold on this, could be interesting this could be followed or ania it's. Not gonna let me it wants to pan for some reason I don't know why it wants the pan let me get in this growth use yeah.

I'm Not sure why. All. Right here, we go what's he got in his hand. An. Imperfect, triangle. Come. On baby you can do it okay. Demo. Fail live, code. Imperfect. Demonstrations. All. Right I think I think I think I'm gonna scroll viewer in the way I think something is bad but anyway it's, great and it's actually super easy and it does always work except what I'm trying to show you somebody I. Can. Attest that I've seen this down many times and, it's a very fun demo but, uh you, know just to recap you know the code they're, using. This in canvas, and the ink toolbar there's a lot of great ink, analysis. Api's. Now, that you know really help you recognize, shapes and things and and they do, do, work and we use them all the time alright. Then. Back. To the slides back to the slides, oh yeah here, we are back to the slides again. Now, how about connected animations, and. To understand connected animations, think, about how a, lot, of apps work today and really how like websites from, the 90s work and. Actually websites today still unfortunately - you're. Browsing. Some screen and you click like I'm going to click on magic. Lessons out, here and it, just breaks to the next page so you're on one screen and then you click and then you're some of the next screen and you. Kind of lose some context, when, that happens you're not sure you click on the thing you expected sometimes, now. Let's look at that same UI with, connected animations, okay so same, thing now, this time I'm going to go click and you. See that seamless, transition, much smoother before is I'm going to play it one more time if I can let's. See here, yeah, from. Screen 1 to screen 2 and so that's what connected animations, it's. About it's a common. Transition animation, we now really have great support for and, guidance and so forth with fluent that, makes it really easy to. Preserve. Context. For users and aid usability, as they move from one screen to the next throughout, your application, really. Increases user engagement, gets, people drawn into your app and it's, so easy and flexible to.

Implement, And can even be incrementally adopted, over your existing app so you don't have to go rework, everything with your existing pages, and frames and so forth that you're navigating around it's very easy to add connected. Animations, incrementally, and just, really add this extra level of engagement. And immersion that, really once, you've lived in apps with connecting animations, it's so transformative, it's just using, kind of old apps and using kind of web pages and things just feels broken experientially. And so let's, take a look at that absolutely, yeah if we could switch back to the demo machine awesome. Thank. You so, this is our before app once again and and. And basically this is exactly what you were just saying as we navigate around. Forwards. And backwards it's just sort of that hard cut that is very reminiscent of those of those websites that we're familiar with and. Really. I want to fix that I want to make it smoother I want to take an, element, like for example the channel 9 logo here and have that kind of transition, away from the. The, home page here and animate. And actually land in its in its rightful place on the details page here yeah so, to, do that what I do is, a little, bit of code and I. Basically now look at my my. Click handler, for the button so when I click on that channel an icon this this code runs and, you. Can see that right now we're basically talking. To the view model and saying please navigate, to, the. Selected, feed, to. Make this have an implicit animation, what I do is add an additional line of code and this, is where I take the item that I clicked on that's, that's the the item in the list view and I. Retrieve, the. Image that I want and it's called image and this is essentially saying within the data template, of that item retrieve, that element. That image and now, start a connected animation, on it and give. It this name podcast. Image border, so. We sort of prepare the animation, here now what we need to do is jump, over and look in the, receiving, side so if I just navigate here -, pod. Image, opened, this, is on the target page this is actually on the feed details, page and, and. On that on on that receiving, page what happens is when the image opens, so. The image is there it's decoded, it's loaded it's ready we. Can merely sit go, and retrieve that ami that animation, we set up and it's. The same name pod cast image border that's the one we set up and if. We find something there we, merely call try, start on it so. If we run this it. Will work now. As, the. Thing is launching I will mention that we. Haven't yet based, on what we just changed, got the back Direction, hooked up and so once. I've shown you this four, direction working we'll show you how easy it is to hook up the back direction, we'll just go in and show there's, the forward version so. Similarly much easier but you can see that the back Direction still feels a little bit kind. Of janky, should we say so. Let's show you how we can hook that up and that's actually pretty simple we. Just need to jump down, to our navigating, from handler so this is again. In the feed details, page so this is sort of the the second page and when, we're navigating away.

Which. We tell by hooking or by overriding, on navigating, from we. Just look here and say if we're going backwards. We, will do a similar thing we will essentially prepare, another connected animation, that. Is going in the reverse direction and. It's, really as simple. As that so we'll, run it once more, the. Other thing I'll mention is we've only hooked up one of the actual sort of page transitions, here and there's in the original as a bunch more refined. Refined, stuff, happening, this. Is just one of those ingredients. So. If we go back we. Now have our back that is, super cool. So. Let's go back to this to, the slides a moment and this just slide recap some of the code that James showed. About. How easy it is to hook up connect animations, and so, the one, last element. We kind of wanted to share. With you and highlight today is percentage of parallax and, before I dive into it I just think it's it's cool stepping back to think. About how, this app has been modernized and how this digital you know, workplace, experience, you know can be modernized, with fluid design just, looking at all the things that we've kind of shown so far already and. So the perspective parallax, I didn't, want to show one kind of last element maybe then give a little hint of some other stuff that's going to be coming. Down the line so. What is perspective parallax, it's a rich scrolling, experience. That. Allows. You I don't know if I thought my video here would show it but I think some people familiar with parallaxing. And the demo showed for sure but oh there we go yeah it's a rich scrolling experience, it allows you to highlight, content. Versus background, so, that if you while, you're scrolling you can have different layers of content moving in different rates. It really helps immerse with a sense of depth users. So when you're using an experience, with that it. Lets, you immerse with sense of depth lets you keep things on-screen a little bit longer they, would have scrolled off sometimes. And, really. We've, done a really, nice job as you'll see what the performance it's smooth smooth, and sleek it's takes, advantage of off UI thread you know animations, and so forth and again, really easy to hook up so let's, take a look at perspective parallax demo. Awesome, yes back to the back to the demo machine please another, time so here. We have the. Kind of experience that we've built up so far and and you can see that we've got a nice sort of horizontal ListView. But, it really, just sort of feels kind, of quite flat and, I want to kind of add that parallax, effect in here. So the. Effect that we had before if we launch this sort of after version of the app is you can see this. Nice parallax, you can see like if we scroll all the way over we can see Mount Rainier hanging, out there the, Sun is still shining for, some inexplicable, reason here right, but the top image is not moving the same rate as the correct so yeah I mean that if you think about what parallax is that you know if you think back to your gaming your misspent youth gaming, and doing platformers, it's that notion of an object, far away is moving, at a different speed than an object in the foreground and down. Down, here in the foreground we have our ListView and in the background we have that image so how, do we add that to. Our page well it's actually again. A very, easy thing to add we. Have currently, here the highlighted. Code is showing us our image object, and it's got a source and obviously, some basic properties set up.

And Once again I'm, going to uncomment a, something. To surround, that image. Wrap. That image and what. I have is this parallax. View control. And really, the parallax view control, is adding all of that intelligence to, do the independent, panning, that, we saw to introduce that notion of an object, moving slower, and all. That you really have to give the parallax view is is a source and the, source here I'm binding to my home feed grid and if, I go and look at my home feed grid that is essentially, just the list view and the list view has a scrollbar and so, that scrollbar, is really what the source is looking, at so the speed, that that scrolling, is happening, is then taken. And we, set a horizontal, shift factor. That determines the exact speed relationship, and. It's really really as easy as that so we'll. Run it one more time and. We. Should hopefully see some nice parallax, now this is obviously a very simple example and, it's really designed just to show the, simplicity but some of the examples Paul showed are, equally easy, to achieve and I think you know really quite deluxe there's very cool nesting, scenarios you can do we can you have parallaxing, inside, lists items as, exactly things are scrolling that really again had that sense of immersion in depth exactly. Now, what, I want to do is you know there may be some skeptical, people that look at it and go yeah I kind of see the depth but it's really not it's not really in your face it's not really that obvious and so what, I want to do now is just sort of give a glimpse at some things that we're kind of playing with thinking about, and. Ideas, and this is really showing and. In fact what we did here was we went to our design team and we said wouldn't, it be really cool if we took that image, of this of the Seattle, skyline I'll just bring it up again and actually. Did. Sort of a deeper, version, of parallax and so you know Mount Rainier is in the background it's further away wouldn't, you expect that to move slower wouldn't. It be cool if we if we could have a go at building there and so. What we have here is is just a little demo this is a design prototype. That. Shows a. Different. Version of the scene and this is actually it, looks quite 3d but, it's in fact made up of a number of 2d layers and this is really showing how you. Can kind of take this notion of depth and, and express, it actually even in apps that are not necessarily, a complete, 3d, world so. I can come in here we've got you, know go Hawks down here we've got for someone in explicable, reason there's, there's an author that's carrying the flag, and. We. Can just pan the camera and basically. What. Happens when we Pan the camera is you, get this this much heightened, sense of depth because we've actually got more layers we've got a background we've. Actually in this case got a full, camera so I can actually go to different places. And. See different perspectives. And. I can do things like sort of tilt and see and so some.

Of The things that we're playing with around, depth and parallax are really thinking about taking. Taking, what we have and really kind of starting to augment it and making it a more you, know a more 3d experience. Now. Why. Is that you know why does that matter very. Very great question, well. One of the things that, that we have in, as, part of Windows, now is his, windows mix reality and this is actually built into the full creators update and what, I'm doing on this machine I have a very, nice surface, book to here is I'm, in firing up the development environment for, Windows, mix reality, and the. Thing that's really nice about this, is that. Basically. I don't. Have to have a mixed, reality headset I can actually switch into a developer, mode and I've done that I've. Turned on developer mode and I can actually map a bunch, of the input handling I've actually got an Xbox controller here, and. I can say use that and, and and so use that to kind of give me input in my world and so. With Windows. Mixed reality it's, essentially, the same apps that I have on my desktop so I have my browser and I, can fire that up and. I can sort of resume what I was doing I have here Skype, and. And this is my live skype it's always slightly, risky. To do this but this is actually you know the exactly the same instance, that, is running on my desktop and they. The app that we've been putting together during, the course of this demo because it's a uwp app is. In, my theater down here horse and so, if we want to kind of watch Kevin, Gallo continue, his his talk we can come in and just go back to our now playing view. And you. Can see like that this is a great example of reveal, highlights, you know we want to have this completely, harmonious across. The. Different, usages. And the different environments, that we have and so you can see that light effect that beam effect yeah, that's very natural in a mixed reactor environment. Also, flows between to. The environment, as well exactly the same app that you were able to write with that same platform exactly. So. Literally, I mean this is the identical, app it's just sitting there it's the same instance it's actually accessing, the same data store, and so. You know really I guess the point of showing this demo is is to show that you. Know the platform allows you to reach into that but also as, we think about depth and parallax as we were just talking about there's. A real kind, of those real reasoning, behind why we're kind of thinking about that and investing.

In It yeah. So that's. Back to this slides, here back to the correct to the back to the future and that's a fun peek, I say it's the first time we've shown that app running. In, mixed reality right on through various talks and so, so. Back to the slide, machine, for. A moment. Seems. Like we lost our slide or something or no, I think we should not on the slide machine, please. All. Right so, we've got that's, just the code snippet of the parallax, yeah, reminder, you, know James hooked it up to a custom grid. He had but even just to a standard control like ListView can you talk it up directly exactly, very, easily, and. Just, for some other you know next steps and resources of things. You. Should get the fluent documentation. It's. Really extensive. We've been spending a lot of time and energy to make it great for you to combine, design and dev guidance, together and really, tell comprehensive, story about how to use it all this. The app that we've shown today James it's it's a github we updated it quite recently we added back the kind of visualization feature, that we showed previously at build it's now there so we're kind of continuing, to refine. The app and have it be a living sample of working sample Alvin yeah and so it's up on github you can go install, and something to store to I think not quite working. On that so we'll be coming to the store soon but yeah but it's up on github you can go install it see all the source and play with it yourself, and so with that we just want to say, thank. You very much for your time and, maybe. We do a moment, for a, question, or two potentially. If. They get. Shown to us. Okay. Ah. Here. We go, all. Right. Does. Fluent, design system support angular, the same of material, has, support. For angular. You, know that's a good, question I think that we're looking. At the right ways to make, sure people building, web. I'm, with web technologies, can make use of fluent. Design ideas, and and, branding. And stuff one, thing to be aware of that we're doing a fluent design system is we're, really trying to create the best possible experience for users the experiences, that feel the most natural, with each device they, let people create, and, do more and achieve more that, are. Immersed people, and engage people with this. Kind of richness and lighting and depth and so forth and so to do that we're innovating, up and down the entire tech, stack from the hardware, to the drivers, to the graphic subsystem, to the. Framework, itself and so it's, not that fluent is just a kind. Of simple branding, over, the the technology, but. Rather we're updating, the entire text stack to enable you to have that fluent experience, like we demonstrated, today and so, you'll, really have. To have you. Know UWPD, that full fluent, experience, on, Windows, but we are looking at ways to let people who are using other, technologies, like web technology, at. Least share in some of the branding, and things and so that's one of things that you know we, appreciate the question and the feedback on that and we're looking at ways to help you do. That but you'll certainly the, full experience. Of the kinds of things that we showed right, really is a place where we're innovating up and down the whole tech stack to let you have that kind of experience. Can. I use a Kinect animation, but staying in the same page I not, using a frame navigate, that's, a great question so I think you. Absolutely can achieve the effect and. I think it kind of depends on the structure of the page and exactly what the scenario is in other words is there, sort of a pop up you're trying to use etc so, I think. The answer is it is possible to achieve it it. Kind of depends exactly on the structures of the page as to how you would how you'd go about achieving yeah yeah.

And We definitely a lot of rich animation support, you know on on pages to do all those kinds of animations right what's been hard for people in the past is when they have two separate pages to even do an animation at all and so, that's, part of what's is pretty innovative with the Kinect animation work but. We'd have some questions again it's a good question though yeah do. We have any more I. Think. That's it all, right well. Thank. You very much and. Yeah. Thanks go go check out the sample go check it out oh thank, you.

2017-11-29 17:13

Other news