02 - XAML Controls in UWP

okay and welcome back this is the samel control session in the developers guide to Windows 10 yeah I'm Andy Wiggly and with me is Chen Chand hey everyone right just a couple of question which I clock up the questions first so we got from our first session so we've had a question saying I'm a complete beginner how do I get started developing uwp apps and I'm really interested so we are working on a complete beginners video series so we're going to be shipping that before too long so that will be aimed at people for who are real you know totally want to get started right from the first principles yeah clearly we kind of this talks these talks were doing here we're so really expect expecting you to have some little bit app development experience and some experience with c-sharp and probably Visual Studio Sun design what yeah yeah so I apologize if it's Lots going over your head I hope you're just getting excited about you know the possibilities are things you can build and then we got some consum tutorials coming along very soon that are going to be aimed at complete beginners I also question about the Xbox yeah yeah so that's coming so with this first ten to 40 is all about shipping the the first public release off the platform for desktop and convertibles we're obviously still working on all these you've seen me do mobile emulators using variances and if you are in the windows insiders program you can get builds for your real physical physical phones right now as well but we haven't actually shipped the kind of we're still working on the shelves still working on that sort of thing yeah and another question are we going expecting developer guide videos for each release of the Windows SDK I expect so yeah I think yeah continuous continuous revision exchange lot of each SDK release yeah well we're going to be we're gonna be preparing these videos and then we sort of will try and probably have like a chain like this isn't stiff exactly and yeah some of the videos that Jerry and I recorded for the the tech preview are still relevant yes released so there's things like sharing drag and drop and the file file storage and these kind of things we're still those ones are still valid you know occasion of the tools might look a little bit out of date but you know so we're going to continuously refresh this yeah so another question we're still confused a little confused one binary you said we still have to choose the device CPU type like you did so that was just the C bugging so when you debug an app and you ship it out if you're actually debugging you know if you if you're running it on the desktop or on the phone emulator it's an x86 because that's where it's running whereas the rest big pie that was here and it's now more because we love it we've eaten it it's running an ARM processor so a debug you have to select but when you ship up to the store it's in a pic so what we really should say is it's a single app X that runs across multiple devices and they themselves will have different CPU configuration so you still have that 64 80s when you deploy to the store so the build process takes care of creating those after those cpu specific yeah see you look blowed those binaries based on the CPU architecture and essentially what we're really saying is it's just that single app egg so yeah Jordan a scat x86 for instance any CPU with x86 yeah we'd be able to say that package regardless of the device you don't have to be a desktop could be if you get a phone as x86 you go to that yep yes yeah we will be making the slide decks available yes they'll all be up somewhere soon yes keep keep watching the the channel line pages and well will direct you to those they're not available right now but we will get those up just as soon as we can and we're going to talk about the store tomorrow it's tomorrow in detail it's at 3:00 p.m. PST yeah that's right all right let's move on to zamel controls let's talk about this one for the next sort of 50 minutes or so there are a bunch of zamel controls so yes so we are talking about the bridging technologies before you know and we are you know the interesting thing about the iOS bridge for example is that you you are your objective-c you you're actually writing your code just as if you were targeting the the Apple controls but we map them in CERN eternally to a probe to the corresponding zamel controls things are having apparently for you with this kind of interoperability layer so when it runs on our platform there native controls and we know is our controls we if all these bridging technologies we are there to help you if you are if you know if our technologies are not your favorite short tools of the trade but still zamel and see sharper eyes probably if you want the very best experience this is the way to go here so let's look at the controls of the sam'l toolbox first of all it's important to realize you know the controls we've got are adaptive and I showed you a little bit about this in the first session with the pivot and that's how that kind of runs across all these different devices and if actually knows about the screen size and and adjusts the lair automatically and it's the same you know we're third thing that is they'd like the menu bar and this sort of thing on the different kind of user experience that you get there from those those different devices so they adapt automatically show different number of icons according to the amount of space you've got so that's one thing the other thing is they like they do understand how you're interacting so a list box like this if if you are using a mouse and keyboard it has built into it the intelligence to adapt so you will get these up and down arrow adornments that you can use for navigating if you're using a mouse and if you're using a touch then you'll notice that the spacing increases yeah you have no.you to be like hiding a nice nice easy touch targets because you know what it's like some screens that you know usually the old finger and silent on the fingernail regular stuff yeah we don't like that so on the same they on the left you know we've got a menu that the spacing is increased when we when we're actually using touch so all the standard controls and there are lots of them have a lot all this kind of goodness built into them so you want to build your UI using these as they yeah yeah your main tools of your trade so using these standard controls gets you a long way we're going to talk in the not the next session the one after that about adaptive UI and how you can actually use these controls and add your in your own design input into it as well so let's look how its really this is going to be a gazetteer of all of the controls so some of them will deep dig a bit deeper into them particularly going to concentrate on some of the newer ones like the relative panel the split view and this kind of thing mm-hm so yeah the windows these are little layout controls so the layout controls generally don't have any visual appearance no border perhaps does you might be able to paint the background but what their their job essentially is to act as a container for other controls so you use these to lay things out that's why they called layout controls yes and you know there's a these are these are they so just to run through a canvas is the kind of I don't I never used a canvas to be honest it's not widely used it's not a good drawer anywhere so it's very sort of like yeah you're pinpointing exactly where you want things it doesn't relay things out and it's pretty much you are in control of everything which gets a bit difficult time and it's probably fair to say in a responsive layout kind of world canvasses of limited utility because you are very discreetly positioning things at certain positions it's just too much overhead you'd have to manage yeah we've got padded controls like so yeah stacked panel is useful though yes this a lot this is a has to orientation so you're gonna have horizontal or vertical horizontal alignment I don't know the orientation orientation which is not a result on this yes so the default orientation is vertical it's over here we've got a rectangle ellipse and a polygon stacked vertically yes so you can change the orientation horizontal and it would stack them horizontally so very useful for laying things out the relative panel is another way of doing this with it yes sometimes this is just nice can you just put the children in and it just sort itself you could put margins on each of these to put spacing between them you know they don't have to be touching some more a stylistic thing a lot of pointers first yeah yeah now grid this is this is your main tool of the trade really so this this is the one that you're going to use the most so here we've got an what what a grid is is a table it's a table layout tool and you know it's your most valuable tool really for doing responsive layouts so there are a number of different ways of defining rows and columns you don't have to define either you could have a zero row 0 column grid and that would be equivalent to a a 1x1 table basically that's right but normally more often than that you'd actually define some rows and then you can use it for laying things out relative to each other here we've got a rectangle ellipse and a polygon and if you don't you see these grid roam grid columns these mention the attached properties attached properties so attached properties actually not a property that is on the control itself it's a it's on its parent touches it yeah it's kind of its kind of yeah so what you're saying is that rectangle the blue rectangle is in row 0 column 0 of its containing grid and the polygon is in row 1 grid column 1 which is why you can see that green things out there and I'm assuming if you don't burn any of these and they all just go straight to the top left and they go on top of one another and so do any layout yeah that's exactly so controls was just sit there don't forget that that's right and this is really great because it's really important to have a proportional layout so here we've got an example of three columns so we've got three ways of defining the width of of rows and columns star sizing is just a proportional layout and then they're auto sizing is I want to just a shape size this row just sufficient to contain the controls that you flatten it it just has the child saying hey home yeah what's your height and what your width to know I'll give you whatever you ask exactly yeah that's right yeah so you'll typically have an arrangement like this where you might have an auto one where you stick some stuff in it like a header and then then you want to have the rest of the grid sort of proportionally laid out across the rest of the page and something that will have two thirds of the content would have this stuff in it and then one-third will have this on it and that will automatically adapt depending on whether you're on a smaller or larger screen this is where these star columns and rows really come in useful so you the proportional layout thing the star though is just a weighting so you got two star and one star so you add them together it means that that whole area is divided by three the left-hand column gets 2/3 of it the the middle one gets 1/3 of that space and then the auto one is discretely sized accordingly but some people also use that so the decimal point so I want 0.25 which essentially is like the whole I want oh yeah yeah so whatever how have you whatever you want to do as long as it's it's proportional itself really in some aspects here yeah and then you can pick so you can hard code size you can pixel size things as well and it successfully avoid in my situation is why would you want to do that you can do that but but that again soon as you start hard coding sizes that's usually the core the routes to getting some problems and getting a nice responsive layout yeah it's one of those it works on my box everything yeah and you know there's another example but doing the same thing with rows so yeah you can get the kind of idea of this as to how this might how is my shape open um another example and here's a proportional layout with grid you know again we've got an auto column at the top which has got the header you've got an auto ruts are also row at the top which has got your header got an auto row at the bottom which has probably got a stackpanel in it or something left and right um no it's got another grid in it which is divided one by one and then you've got left Basu meas left or oriented in there in the first cell and then the the right text is Right oriented in the bottom shell and then the one star means just take up all the rest of the space so this is a nice way of putting a header and a footer and all the rest of your content maybe it's a ListView when you have items in it it goes in the middle so there you go you get a nice layout and on different screen devices now I'm just going to show you a beautiful demo not really by me I'm afraid right so this actually is one of the SDK samples and on github there are a bunch of the universal app plan Universal Windows platform samples there's samples and this is one of them the app and it's it's a beautiful thing so let's just switch to x86 we're going to run it on the local machine and you know whatever I say in the next 45 minutes about controls actually just go and have a look at this because this is this is the way to find out it's a beautiful-looking demo so here you go all those out all of those amal controls and layer are all in here so you know and you we can we can go over to specific controls by name or you can go and look at them by contours i'm going to have a look at the grid so one we were just talking about and here you know we've got the got an example of this and zamel which just drill into it so you can see that so we got a couple of three columns with one this is where we've got a pixel size which we don't do fifty we've got one that's Auto so it's sized according to its content and then we allow the one where it's the default if you don't say anything that's star and then we've got some rows as well and we've got some some stuff in there so so you can see that and that the output is this thing above so we've got the red one moves around so we can actually change the row so now we've changed it turned to grid row equals two and this is green row because one goes in the middle we can change the column to be two column one or we can change the columns two out to be column column two so you can see how it all did things move around relative to each other so you can have a play with this and you can see the zamel updating the real time and this this sample has got one of the controls in here we will return to this you can be sure so that's very nice now then um so that was a brief look at the layout with a grid and the chance to show you that that control wrap grid is another one it just wraps content so it will either go horizontally and though it runs out space it will wrap around or it continuing vertically quite kind of useful I use one very much actually yeah I'm using in the past quite a bit it just depends on your scenario space scroll view is very important so if you've got some content maybe you've got a star thing and then you walk in there loads of content not a list view so this controls have got that sort of scroll bars built into them but if you've got a bunch of static content you've got some a stack panel with some text blocks and then an image and more more stuff and you want to be sure that people can scroll and see it all on whichever screen size then it's good idea to wrap it in a scroll viewer because then they can scroll up and down or left to right and actually see anything that's not visible and if it you know if the space is sufficient then obviously you won't see the scrollbar so it's an intelligent control now the new button the new guy this is the brand new one so all those other ones have been around for eight bit one but this is the new new chapter my favorites it's a news hour layer control and it range children by declaring relationships between them that's real nice so the kind of way you use this is you put essentially you'll probably have you need to think of your content as islands of content and I showed in the first session with the the blue yonder Airways where we had yeah we have different sort of panels where the content is so you have these sort of bits of content and then you arrange these so that each of those blocks of content will itself be a layout control of some kind a grid or another rows in panel or thing or a stack panel and then you can actually you kind of probably position the top left one for example and then you can arrange the others in relative to that position saying say I want that to be right of that and underneath that and left of that and right of this essentially moving the pair removes everything else around with it that's right yeah now where this becomes really valuable is that you can change those relationships in one of these visual states so you can actually this is where as the screen size reduces you can sort of move some content from over there on the right and put it underneath and this sort of thing so yes do you know you can have a good layout that really works well you know in a responsive design so really important tool it's definitely a lot easier using this then trying to arrange all the grid columns and rows when it's trying to be responsive yeah a lot easier nicer so here's one example we got a relative panel which contains within it a rectangle and this the bit highlight in yellow there is that they're attached properties again and so you're setting on that rectangle you're saying okay I want to align my horizontal Center with the panel so it does another red one here yeah so that's right so the red rectangle is aligned with the center of its container which is the the big blue square there so it's Kahn Center and we're aligning the vertical center so it expects me what we do is just simply right in the middle yeah yeah and then underneath we've got rectangle blue rect which hasn't got any explicit positioning so that just ends up top left top left okay and then so that's there's a whole bunch of properties where you can align with the sibling and then as a whole whole sorry aligned with the panel and then it's a whole bunch of other properties where you can align relative to other content so here the red rectangle so first of all we got our blue rectangle is top left again yeah not exactly bit of artistic license there's a margin missing I think it's probably on that so and then the red rectangle is positioned relative to that light blue rectangle three blue rectangles so you can see there we are lining below the blue rectangle and we're lining our horizontal center with the blue rectangle so you can see the effect it's directly beneath the blue rectangle but in the middle of that's right so um that's nice now where this really becomes useful is in an adaptive design so I'm going to show a quick demo of that so I'll leave that rain because we're going to come back to that but over here I've got another copy of Visual Studio this is an adaptive list then I'll run it first and I'll just talk you through how it worked okay so this is a list now a list is obviously a control that will allow you to show load of children so you bind it to a collection of items yeah here we've got an adaptive this so you can resize the window it says here to see columns getting dropped or added in the list so as we resize it you'll see there we've got oh yeah yeah the actually the the name here yeah the name gets dropped underneath and the and the time comes and goes you see the throughout there disappears as well so we've got this is an adaptive list so this is a this uses the relative panel to rearrange stuff and position that name the artist name which is currently right of the title as we get narrow becomes underneath the title and also you know the the time actually disappears altogether so this is an example of an adaptive list so assume there's a like an adaptive trigger there then from there goes that changes this look at how it works yeah exactly that so the way this works is first of all let's have a look at our main page so this is our main main layout I'm not too interested in the designer view so that'll come out in a minute in like 5% a tiny little thumbnail oh no it doesn't think of it Lyde a th tablet so um but here is my I've got a grid isn't the outer so every page must have a scene you know container control a layout control as its so it can only have a page but I only have sort of one aisle one route child element and then inside that you for everything else so inside that we've got a literally pixel size row not meant to do that should have been Auto really and then the rest is the rest of the row is the second row is everything else and so text block text is this guy is going into row zero if you don't explicitly mention the row that's where it goes in zero zero so that's the header which is the adaptive list scenario bit let's text up here mm-hmm is going on there we just run that down so we can actually see something there we go and underneath that we've got our list a list view which is in grid array 1 so that's positioning everything underneath it's bound item source is binding to a collection of items which is in the data for this which we don't need to look at okay now this is this is the container for the items but the important thing here is an item template is how in a list you define the layout for each and every item that it's going to show so for whatever items they're on this collection it's going to use this like an item template to layout and in fact inside that you always have a data template and inside that you might have a grid stack panel or whatever but in this case we've actually got this thing called a local item template control so this is a user control now this is something that's new for you if you're not used to these adaptive triggers which you won't be if you haven't built you don't pee before if you want to use adaptive triggers inside a data template you have to put that data template in the user control show yep so item template control this is our user control so this is I've got some design time data so you can see what's going on and down here we're going to look at the tooling value build this actually in an upcoming session the adaptive UI session but here we've got our controller our main out to container control is a relative panel and inside here we've got some visual States so we've got an arrow layout which is for anything that is a window width of 1 or higher and here we're using the relative panel right of which making sure that the artists name this guy here is right of the numbered number text box which is this guy here so the importance here is make sure that your UI elements have names on them otherwise there's no way to do no that's right that's right the duration text box which is this is collapsed disappears and the artists text box which is this guy again is below the name so it's it's actually right of the number and below the name so this is why it appears under there mm-hmm if we were in blend you could actually view this I'm not going to bother now because we've gone back to that in the adaptive UI session but in blend you can see this we can't in visual studio then the wider layout which applies once we get to nine hundred or above actually there's absolutely nothing in there so what we're saying is okay when you're on a wide screen use the the design layout so that that's it actually essentially so we've applied adaptive triggers to this to create a nice adaptive UI using the routed panel to reposition stuff all right okay split you so yeah you're an expert on the split you you know tell us about what split you yes and the split me some of you probably know it as the hamburger control the idea here is is allows you to have your navigation in a way that's sort of dynamic an adaptive and it has various states which you can see here so you can see there's a couple of properties that are really important on the split V there's the hiss pane open and there's there's the display mode so the pain is the bit the pain is the bit yeah so that's where most people the navigation navigation but actually the control when you you create and crate one out of you know you in you've type into the zamel split view yeah and close close it off it doesn't have any visual appearance out of the box there's it no nice so it's totally up to you to you know make sure that it's somehow your style and the way you like to do things but out the box is just a basic control that allows you to have the pain and the content and then from there you know we'll have a demo in a bit that shows you how to why they're all up and make sure that you get a rich experience and again based on your device and your screen size you'll then make a decision as to whether you want the split view to sort of disappear and they used to have the control at the top to enable it or whether you'll have it sort of in a compact modes is a thin little bar or if you've got a lot of real estate than hey you've got the option of just showing it by default yeah so this nice nice isn't it so the the display mode is inline yeah so the content is and the and the pain are side by side right overlay where the the pingers aims slides out and actually overlays the contents of the content still remains behind it compact in line yeah so that's what it's basically where it's sort of you know if you've got it true then it'll be wide but when it goes to false it'll go to the thin narrow strip as opposed to totally disappearing yeah so that's the difference it's essentially the same as in line but it's that you just is thinning this compact yeah so you still got probably just have icons on that so the correct the user will know this command surface there they might tap on it to extend it out yeah and then obviously compact overlays no it's very similar okay lots of cool stuff yeah so um at this point we need to just do a switch all right near the HDMI okay and you're going to show us an example of oh yeah so yes so the split view is probably going to be a big favorite for people yeah yeah yeah so I recently wrote a blog post on this blog Chincha and calm there you go shameless plug yeah so here we go so here you can see we've got a very simple application and as I resize it you can see we again we use in visual States you can see that what I'm doing is I'm swapping between the various you know display modes and the pane open and here I've got a hamburger which you can click so let me show you how we go back crane is very quick yeah so if I could plays that because there's something actually quite interesting that you have to grasp with the split view don't you and that if you think about a normal page you know and we're going to talk about this actually I think in the next session so and when you look at a page of an app hidden around that is this thing you can't see called a frame current a frame is the container for pages and so in a normal and normal app that's not using a split view you tend to have one frame and a bunch of pages inside it and in this case we're gonna but in this case flip it you invert it don't you know so let's go through that and I'll then show you the app running with the frame in so here we have the split view control and you see here by default item we put the display mode in line and true this is number four as develop projects like to see on the designer to make sure I can see what I'm doing but actually my visual States once they're put in override any way yeah so that's fine so you can see here actually I set the split view pane and I've got a stack panel in there and essentially I use radio buttons I just generally like the states that they have yeah and in there I have another stack panel showing the symbol icon radio buttons are ideal for a navigation service like that because correct one it automatically deselect dislikes the other one yeah yeah so I quite like then you can just put the nice I they also nicely include a an icon symbol I call so then the text see that's what you've done that's what I've done here so what I actually override the style slightly on the radio button so I remove sort of the check and actually put in a symbol icon and a text so so what you've done there you've out you've opened the radio button yep and there's the closing thing and inside is the content so you're totally overriding but standard pushpop appearance the yeah you'd say yeah because I like the little icons oh yes just a nice little touch and then the frame that we talked about so this is the main frame so notice that this is outside of the pane now so this is in the content of the split content area yeah and just before we took a bit more about I just want to show you the actual button itself so some people like to use you know the from character map you can go to the MDL assets the same drag but realize yes so it's actually one of the fonts on the other Segoe MDL - yeah and you can go in there and pick the font I'll say so I I generate issues as a panel with a three rectangles and just to show that you can actually use whatever you like but this makes sense cause people are used to it yeah and then if I just quickly run this up again there is a there is a hamburger in the air but you just I thought the right thing yeah I struggle trying to find it all it's whatever works so I click the map and you can see the map actually loads in the middle yeah so how did I do that well actually what I'm saying to the air is when I click the map button I actually own it to load inside this mainframe yeah so you'll notice here that actually what I have on the map radio button is a click event handler and I actually tagged it as well with Matt you can actually have different event handlers for different you know buttons but actually because of the way I like to do things I've just thought taken might be faster and in essence what happens here is when the click event fires I just basically make sure it's a radio but and I check the tag and if it is then on the main frame so this is the one inside the content of the split view yeah I call navigate it's a frame that's within this yeah now becomes the new container fuel content pages and you just treat it just the same as a frame of a regular app yes exactly exactly so and at that point I just pushing them at page and I can pass in the usual you know it's using the same navigation that you'd be used to on a WP and then the final thing here is it's on the hamburger as well where you see I've got I get to the hamburger as well you can see on the button I also have a couple of things here so I said the width and I said it to the basically the compact pane length of the split because I don't want it to look too short too wide yeah and then I also have a click event handler on that as well which is basically a very very simple sort of a you know if you're open and close and if you're close and open so you just flip the view around and that's pretty much it it's pretty simple so it's nice nice yeah I've seen on Twitter a lot of people struggling to know how to use this control they you know once you explain it like this it's not too common yeah I mean yeah this source will be available as well so yep purely to overplay alright thank you so much I'll hand it back over to you yeah so there was a nice example of the split view which I think with the relative panel is that we know the major new controls that we've got yeah yeah I mean just because it's there doesn't mean you have to use it but it's it's it's there in case you do indeed yeah right this run through a whole bunch of others we've got a load of buttons yeah buttons are pretty boring really and actually radio button should be this button hyperlink button and repeat button top a button there you go there are buttons boring button is a button there's a body click it yeah and we got a bunch of text controls as well I'll text box passable box textbook what about you can seem all that and loads of ways of displaying stuff and not that that sample I showed you before yeah you know has has great examples of all of these so you know go and get the go and get that from the from github Universal Windows platform the SDK samples and there's that and a whole bunch of other great new stuff as well loads and loads of samples in there um so I'm not gonna talk about them because they're all kind of boring okay so radio button turns up in here because it's a selection control yeah because control so uh yeah here you know there's a great example of the the calendar calendar view that's a new one actually so this is real nice very rich control has all this nice coloring for showing selection in the so you know this is actually you can use this in your apps it's exactly the same control that is used by our first party apps yes you know you got all that goodness as well in fact talking about our first party apps you know one good message for saml-based developers today is that our first party apps are built using exactly's controls exactly the same controls and same sdk that you are using which wasn't necessarily the case with earlier versions no nope now we had our own kind of toolset stuff you know we obviously try and produce the very best developer tools for people but anyway now we are building you were using we're totally eating our own dog food because the stuff we are shipping is using the same tools that you're using so um there's a bunch of yeah selection of picker controls these are collection data controls we already kind of had a good look at ListView and things so there's been too much time on that hub control content control and this sort of thing so there's various ways of holding collections of data there ones on the right there the templates these are the ones the different ways of customizing headers and the content area and all this sort of thing so there are different controls you can use them as contain another container controls for collections so you know there's a lot most of the most of the time you is going to use the data template and items panel template you know really to use change to or anything else we've got a question here what's there any change in the ListView control from windows 8 to Windows 10 well we've built I mean we've done a lot of work on all of them yes so if you'll find you've the question is there thanks for the questions there for you saying it could not scroll both vertically and horizontally only way well you can override the content the you can achieve overwrite the override the items panel template and turn it into a wrap panel and change the orientation so if you want to scroll both ways you could even just look at put in a scroll view around it right well I just want to scroll both ways you want probably look at a grid view yeah yeah yeah so there you go so yep so that's those the collection of data controls there yeah those are the containers the different template bits for modifying the bits of the layout here is an example of the grid view syntax so you can see there the grid view is the outer container and inside we've got our item template and a nice template contains a data template so you kind of saw an example of this before but with a ListView gridview takes the same kind of pattern so the data template the stuff inside that you can just have zamel controls directly in like that and that defines the layout of every item in that collection how it's going to show those items the example I showed before the adaptive list was as I said there if you want that the content the item template to be adaptive then you have to put that into a user control and you can use adaptive triggers in it that's an example of that there we go and then ListView very very simple similar you see here we're actually overriding the header so you can change the the header by by it by using syntax like that or you can just set head of property header equals some text up in the the opening element and then just uses in the default rendering or you can override the the styling of the header in the way that's shown there but despite by doing that list view dot header element and then again the item template has exactly the same data template so I don't it's a flip view great for doing like photo views and this sort of thing they're all but you see the whole book pieces at the same pattern data templates and inside that you've got your content area definition well it's nice because once you've mastered it once it's pretty easy to then just go and use the same sort of technique because every each of these collection they're just slightly different ways of arranging in children really and here's the hubsan text which you tend to use for these very media rich kind of fun things with a huge lovely background like yeah beaches of the world gosh it'd be nice to be there now maybe the next one yeah well should we do the next update from I don't know thailand's yeah yeah good I think yeah we'll put that to our to our leaders yeah I'm sure they go for it yeah beaches the world so here we got now the one interesting thing about the hub control is that you divide this up into number different hub sections so this example here we've got a latest travel we got header which is beaches of the world then we've got a number of different hub sections which is the latest travel news the top beaches and the top trips so the and each of those Hubb section the content of it has to be in a data template so that's one weirdness if you like for the hub control but they are after you just defined the content for each area even though in general it's only sort of a sync not a collection as such a collection yeah although inside that you could have a list view as well so but then the content has to be in a data template so there you go and again if you want to make that I did have a question on Twitter recent if you want to make that a hub section adaptive yep just the same rule applies make it a user control and then you can use your adaptive triggers in here let's stick it all in yeah there you go yes the latest travel news how we got at bars and camasta these are interesting in the sense of the app bar which used to be just the command bar on the bottom or the top of the page in 8.1 you can now basically put them anywhere so it's just another container control but for app bar buttons and that bar buttons are very nice they can use these new nice sort of empty icons it's Windows 10 style so the styling has changed we've got a power buttons out from toggle buttons and app bar separators and you can create these nice little control strips very easily and they can be assumed can have these vertically yeah I think so there you go so and this is very nice for these kind of collections of buttons nicely there's a lot of them as well there are huge numbers of icons yes and you can create your own custom ones of course as well the fly outs controls pop-up is open content on fly outs content dialogues interesting this was a phone 8.1 mm-hm think of this as a rich message box mission yes its dialogue so it's a it's a pop-up control that you can you can put it's not just the kind of message box it's not just external button there's more rich epics on it and so thing this thing so here's an example showing on a phone but it is used everywhere so it's a uwp control now you can just put stuff in it supports both full and partial screen so you can have it floating there interestingly if you could do if you do add new item on a uwp zamel project one of the new item templates is a Content dialogue and that's so you actually code likely user control so it becomes a separate zamel item in your project and those tend to run fullscreen on a phone and they're still run as a floating window on desktop but you can have them you can define them inline or you can define them in zamel so you can actually do one purely this is the content dialogue add new items content dialogue you just design it as if it's a user control and then in your code when you want to show it you just new up an instance of it I call its show async method await it and then you'll get back from that content dialogue result so you can figure out whether user press the primary or the secondary button and you can just set that up and it's nice and flexible so at this point I'm going to just dip back to our lovely sample from from before not that one we've done with the adaptive list and back here here we go so let's go back and let's go and have a look at our let's go back oh there's a Content that let's have a Content dialog so this is the this is the the the sam'l for that so here you can see the the Sawa's content dialog it's got a title of sign-in primary button text you can set secondary button text yeah you can set this in sam'l or of course in code or you can actually data you can actually data bind you can bind these two properties on a view model or something you've got primary button click so you can have a click event whenever somebody clicks one of those and then underneath that we've got a stackpanel which is the content that we're actually going to show show on that and if we show the dialog that's what it looks like and you can see it's nice a nice modal and you saw actually there's a nice animation was yeah so it's a it's actually a really nice way of having these nice modal windows floating over over your content now if you ran this on the phone which you can this is you double you know it would come up so full screen and again you can design these in blend as well you don't just need to be visual studio centric right oh absolutely I mean family you know blends the kind of the best place for visualizing this anything so yeah it's nice and you know so you can actually can here we go and there's bunch of other like I said this sample is beautiful you have loads of examples of fly outs you can you know this is that's just a click to show fly out so it just pops up there's a there's a button with a fly out to all items will be removed so fly it's a very nice way of having confirmation dialogues pop up really nicely so real nice and here you can see the examples there's aa one you'll need to do all of this sort of thing at bar buttons are we going at bar button with a font there you go and that button with a symbol you know so keep playing with this download it masses of great content in this I think that's probably enough for that one yeah produce media and it can controls yeah we've got them you know progress rings that's the nice wait for a minute you know doing something ink canvas we're gonna we're gonna look at this inking and all these other plates were on isn't it we're gonna do one tomorrow if you're watching this in real time the more personal computing session so I've got lots of really cool stuff like that speech and inking and windows hello face recognition always we all new cool ways of interacting with a computing device the ink canvas is the way of grabbing allowing users to ink on stuff they've got media elements and capture elements so loads of great stuff for doing those kind of things now when wrap up this session but just talking a little bit about resources and styles because this is obviously an important part of working particularly with text kind of controls so what is a saml resource so you have system resources customers also control styles and templates so system resources you system resources are supplied ones out of the box it's actually not that many of them to be honest no there's a bunch of them but you can create your own custom resources and it is a nice based on the syntax so you can say I want to create a new style called migrate style and it's based on a I don't know a caption text box style you know example and so you would inherit all the properties of that and then you can open your stove writing the bits basically change size or you know all this kind of thing and you can create your own objects and brushes and there's colors and this sort of thing the control Styles based on and then you can actually read template controls and this sort of thing the resource scope you tend to you know whenever you create a new style a new resource you can give it a name and then you can say I where do I want to define this do I want to define it at the application scope in which cases the definition gets put into around sam'l yeah or you can just put it in this document which is at the page or whatever of the trophy's or you can create a something called a resource dictionary which is just a sam'l file which contain is a container for the your custom styles and when you're creating a new style you can either use this UI to to do all that so these are the star results is for textblock as you see there are if you look at that image there's a base text box down body text caption fly up pick your head out some head of subtracted Tufnell that's it so but you can obviously you can apply one of these styles and then in addition you can say I'll set the font size to 24 and said it mean old as well so you can even you've got on a specific control you can override whatever controls are whatever attributes are apply from the style and you can create your own styles you can use this based on in fact all the standard stars if you look at right at the bottom of this here the header text block style maybe I should make that a bit bigger for people watching at home if I can figure out how yeah so you look at the bottom here you've got a style header text box style target type because text block based on static resource of the base text block style so that itself is based on a one that's included in the standard things but what it does is it then overrides sets the font size to 46 sets the font weight to light and set something called optical margin alignment so trim side bearings whatever that means I'm sure style gurus will be able to yes wax lyrically about the beauty of trim side bearings well I don't know retain spawned like it does so yeah you can see there that's an example of of one of the built-in stars you can create your own ones that are just the same what's happened to my screen it's gonna weird mmm is he not I'm trying to won't do it hello got a slight technical gremlin here yeah I've got stuck in zoomed in and it won't go out windows - yeah that's right that's what I'm doing Oh hmm let me just escape I'd never do that let's not I've learned something you doing Thank You Maggie fire escape is it may be a good thing to try there you go all right so there's a bit on start now here's one thing that I need to do people who have seen me speak before will know that my my background is only phone I used to do phone jump starts and I know I've been on the journey through the years I love creating you eyes on small devices I still do but I now love building them on all devices but on Windows 8.1 phone users can select a theme on the phone which is light or dark and that kind of changes the whole appearance of the UI of the phone you know - tube light or dark and apps would automatically get that behavior mode inherit it so the the problem with that might be is if you explicitly make your text foreground color to be white well then the user chooses to set their light phone theme to life what happens if you get any visible text so it's another reason for using the style resort the theme resources because those that are theme aware they know about this but anyway this problem has kind of gone away in Windows 10 we still have light or dark theme so actually you can see here this is a phone eight point of phone 10 in yes prep prep preference user preferences so yes you can still like this on mode light or dark and that changes the kind of built in UI of the phone and the settings and the Start screen all this kind of stuff but the apps don't get that automatically anymore so instead and there's also also the other thing while we're talking about this thing is the user can choose an accent color and that's kind of the coat of the background of the Start screen when you're in tablet mode and and the kind of highlight colors on on transparent tiles so the feet the accent color kind of works through your whole experience on Windows 10 and both on desktop and on the phone you can choose your accent color and if you want a color text in your app to that accent color you can create yourself a solid color brush like that yeah give it a name I don't know an accent brush is a good idea and then set it to the color theme Resort system accent color and that will pick up whatever the user has selected so you can you can use that now on Windows 10 mobile as well you see on Windows 10 desktop there is no light or dark mode selection no where there is on the phone but in any case your app does not automatically get that anymore I'll talk about that just a moment but you can also use this can also select this is important though users can select on all of these devices bigger text if you're getting old like me and you can't see any more you need to make things a bit more readable so the question here and also high contrast if you're visually impaired you can turn off a lot of the graphics and make sure everything is really really high contrast you know if you're an app developer you should test your apps for these modes so that you make sure that you are supporting these users users users work very well now just build back onto the light or dark mode so you can actually set it's now up to use the app developer which mode you select for your app and you you might want to put it in visitor here you could put in the user settings so you can be on your app settings that allow the user to choose but there's this requested theme equals dark or light you can set it at the application level and that sets on that's now inherited by all the pages in your app or you can set it on an individual page or into actually write down on any element it's under control yeah yeah and that's a requested thing rather than a actually doing it again because of this you know users could select high contrast so you could ask whatever you like if the user selected high contrast it's just going to get over in so that's that on on that we've done on that before we close we've got a question I was going to just try and answer us so we're I don't know a question says what is the best Thank You FICA what is the best way to switch between rap panel to stack panel as the item panel in the grid view using adaptive trigger well so that's a good question and I don't actually know the answer to that says the assistant imagine that the item panelists are you well actually what you could do is simply you could the blunt way of doing this would actually just be have two copies of your gridview in yours amo and use the vir scientists use VSM to cite to show or hide individual ones a pending on where you are that would be a it's not a neat way of doing it no but that would certainly work and if you use what we're going to talk about later which is x defer you only load stuff up if when it's needed you know you work there isn't even a because of performance yeah that's true because the problem is if you have both of them on screen you'll probably find you'll end up using resources from the system for both lists even you that the you're only Shane once if you defer it you'll only ever utilize whatever is on screen that's right yes right but that's a topic that's afternoon all right we're done with sample controls and we're gonna take a roughly seven minute break yeah I'm gonna get a drink of stuff and hope you will too and you can join us for the next session which is all about what it's all about the back button really is actually a fascinating and interesting topic in eww you wouldn't think so by actually providing back navigation and page navigation through your application application yeah so well hopefully see you in just a six or seven minutes time okay

Channel: Technocom 50

Views: 9,315

Keywords: Developer’s Guide to Windows 10

Id: fI3gkjCSRXU

Length: 51min 25sec (3085 seconds)

Published: Wed Sep 23 2015