C# WPF UI Tutorials: 16 - Chat Message Title Bar Menu

[Music] carrying on from the last video we're going to do this top header bar inside the chat with the name of the people in the chat the search and the drop down I'm just going to make that general head we're not going to the full drop-down menu and search functions just gain the main UI Dom for now so we're going to do that and along the way I think we're just going to fix again a few little things that need fixing so we just press f5 to run the application and one of them is I keep noticing well two on this page you've started the application you start typing nothing happens so we want to focus this email box when it first opens so that you by default ready to sign in without having to click so we'll start with that if we go to the login page we've got a text box here now the few things with focus there's a focus manager inside WPF which you could put on say this top grids can do like focus manager Docs focused elements and then you can do find into an element name and you can bind say like password text but all that does is this is a visual I think it's called visual focus or virtual focus if I remember which and you can see it's like it's it's made it the focus or the logical focus I believe is what they call it so this is logically focused but it's not got keyboard focus and that's why it's not flashing and every time that still doesn't work so what it's done is made a visual element as if you've got it selected so the WPF style for when this is selected is to flash this correct but it's not actually caught the keyboard focus so the focus manager only really does half the job that we need so instead of using focus manager we'll just make a simple attach property on this textbox so we go to the touch properties let's just copy and paste the button attach properties rename this file to test detached properties and then we'll make a new attack property that focuses this element on load and we'll Paul it is focused copy and paste that into there override beyond value changed and then inside of here which is first check that we have a control as we need a list of control to set focus so if sender is control we'll call it control so then we're saying if it's not a control simply return so we don't have a control to turn and then if we do have a control we can now do control that load is unless an outfit loading and then when it does that we want to simply do control that focus focus this control and slowly and what that will do the focus of what windows will give you a description so they have no documentation on that focus which is a little bit poor but anyway that focus set keyboard focus and their virtual focus or logical focus whatever they call it and because this is going to happen on load and because these are loaded in order sequential order if we place this focused on this element and on this element as the loading this will become focused and if that loads this had taken to roll and be focused so typically will only use this once per page or once per control to you know set which how about acting you want to be the first keyboard focused item so just do it as focused property dot value equals true and then compile nut should find and work oh yes it's got to be in the local namespace and that that's where we run this together again and there you can see emails focus by default emoji start typing so that's that point on the other issue is you've type email you've typed password you press Enter and nothing happens that's a really quick fix so there's something called is default that you can set on controls that means it's the default to enter that basically the item that's going to get clicked when it enters pressed and it goes rather way back to Windows forms days when they used to call it is default and is canceled for dialog boxes and the default button was the okay and the council was the council so it takes his name from many years ago so is default basically means that the button that will be clicked when the user presses enter on the keyboard so we set that to the login button that's called Next button in the comments at the minute we type something passed after and we press enter now you can see then add the same effect of pressing the button for us so that's another little thing fixed let's just fix this comment to say the login button load their and then the other thing I noticed when we change the blue for this bubble to look more like the image this become darker image you can see also fades strings who want to actually add back this there's blue value the original lighter blue that we had here and set this is the lighter blue and keep that as darker so we need to first give it two colors draw in styles colors will go to the blue I think it's called light blue very light blue so that blue light blue very light blue and now we're in a very very light blue so got multiple gradients of blue at the moment which is fine and what we're going to do with this one is put this back to the original value before it was we darken this and that's going to be e to the f6f peak and now we want to go back to the shuttle list item control go to the samel for that and then it's the style for the background of this control where we set the color so you see very light blue here so change that's a very very light blue and the same above here for both animations and then let's see if that fits that issue there we go now we've got the nice lighter blue that goes more accurate here and then we've got a slightly darker blue which you wouldn't notice you wouldn't realize they're two different blues but they are so that solves that issue then I'd say another issue I noticed was see how we've right aligned the x here or left aligned rather but then on the messages we receive the still left aligned I think that's them right there being under this our row so we're going to write a line that time it's just a stackpanel so that'll be in the chat message list item control again in the saml and it's these two boxes here which we just set the background of blood for now so we can see other invisible but the time is after these these here which is this stat panel here at the time container let's just get rid of that background and then the stack panel is not even aligned we've aligned the time to the right I don't know how will the alignment right in the heaven those are doing nothing anyway so we want to so the horizontal alignment here buying into the sent by me the converter is going to be the SEM by meter alignment converter but by default you can see that's the wrong way around so we're just going to pass in a converter parameter of anything we'll just a crew and then we go to that sent by me alignment converter and we can simply invert this logic so we'll just say EV parameter isn't lethal to non so the default behavior right now is it's no or in rather the Elat keep that that way so this is a default behavior otherwise we'll just do the opposite or align the opposite way around so that we can pass in a parameter to the converter to flip basically like flip the boolean around so we compile this now you can see now that fixes that and we have a right aligned bubble so there's the overall we just put a quick background on here so you can see the bubble has been aligned to or this section here the bubbles been around to the right with the margin it's got and then a stack panel inside has been aligned to the left so we were to just change the converter parameters to be not just get rid of it it's here to go the opposite way so we've basically made a flutter ball alignment based on a boolean so you see they're going to be left or right let's remove that red and let's run this and there we go that's better so now the time goes on there you know the end of each message and that aligns it correctly so what's next see I think now we want to that that's all the issues oh I know actually the register page also needs the default button and the same with email I want to make sure we do it for both so is default for true there and the email once to have what was it gold as focused property was it true let's just check that works and they're real I work for the sign off the enter either doesn't work or we haven't got the register hooked up so we've got the register looks like the animations potentially not working on that bond OOP then mean to flip that around again okay so that works there what do you actually have going on with the register button so we do nothing but wait there's an interesting thing because it looks like this as default is not really working because it's almost like it's it's taking focus away from the box and then we've logged in it's like it's calling the the login pages button still so we just remove the login page as default on that button let's see if that means the register page things because that shouldn't be yeah so when we have to is default even though we've removed the login screen it's still remembering that button in memory so let's take a quick look at what we do when we swap these pages or in fact the easier thing to confirm that is to go to the vlog interview model let's put a breakpoint on the actual login button so we know that it's going to get hit and if we go here type and press enter now we're not hitting the login button we press enter again it seems good like when it's twice so pressing enter twice is causing it to hit the login button which is kind of bizarre because we don't have that login button on the screen and when we do a go to page what we are doing to set in the current page and kourin page and then the page host we are changing the frame should animate out Arman room weather because we have it inside of a frame and we want to make it out that's the issue what we need to do is once as old pages animated out we need to remove assault from the old frame so what we need to do here is a tell old page to animate out once it is done remove it so we need to task dot delay by old page dot and then do we have the slide seconds is that what we use time a slide animation should complete just double check what we used if you dynamic out animate out slide second Jess so we want to delay by whatever the time it's going to take to animate out times of thousand because about seconds and delay as milliseconds so time slide seconds float doesn't like the fact that it's a float so as we delay by that much and then once it's done continue with we don't want to say all page frame content equals not I'm hoping that's enough to fix that issue and then the register button should as soon as it's led out become the default button so yeah we're going to jump back on the UI thread here application dot current dot dispatcher dot again invoke or without invoke here so you can't do anything on the UI when you're not on the UI thread and because we jumped off the UI thread here to delay we didn't start back on the UI thread so this just jumps us back to the single UI thread so that we can perform you know this action which is to alter the UI but at least that shows that was working it was trying to remove the login page so as we've slide we should see it fully slide out we shouldn't see get removed halfway so we want to pay attention for when this slides to make sure it is sliding out and then removing a little bit glitchy let's do that again there we go see is still sliding out perfectly fine and now within the signup page we press enter that's it now it's using the register buttons enter which just spins and press again inspire slide out press enter and now it's using the correct page so there was a little bug that we've only caught because we happen to to add to is defaults so that's another problem fixed just close all these open pages let's start the application up once more that's the sign in the register page all done I'm happy with that we've fixed that side menu that was a bit annoying we fix the alignment here now let's get on to I guess making what we planted it was making this top bar so that is in the chat page I think now the one other thing we want to see it really visually in the main window this is another little annoying so this main window you can see it's animated I hope if you will of it it's ready to animate in or it won't in fact now it's animated out because this page we have specified that the side menu visible if we look at the default value it's false oh sorry so it's the other way around it's actually animated out because we've set side menu visible to false by default and whereas once we load the page the page changes the side menu visible and logs in so actually if we just change then the current page to chat and mr. true I don't think we ever see the page because the BPF just isn't smart enough to show what we can see the sidemen year so that's actually okay there and I'd just like to ideally see the chat menu here but the issue WPF has is it cannot dynamically load in pages without the page being a complete route in fact there we go there's the solution so it's kind of a little hack for now but so we can visually see while we're designing we could potentially think it through and do more but at least see if I can just put in a chat page directly in a grid column one and you see just doesn't like to load so even though we have this the chat page in or is the page host simply over the top of it nope or maybe do we have nothing on that page let's try a login page now they just does not like to show the page at all yes no matter what we do we just does not like to to show it page inside you know when you end better control directly inside so then you're down to using a frame with source I think it is and Obi is like just pages login pages Amal nothing is just a string let's just try to keep outside of this controlled for now and just completely comment out the whole code so this just doesn't seem to like no matter what you do it does not like to put a page in there I'm just wondering whether we even use a page to be honest because we are going to do our own navigation and comment screw things up here let's just undo that so the point of a page is to kind of get all the benefits of you know page navigation and the thing we removed anyway and then we've done a custom control to uneme tout pages I'm in two minds to convert the pages so even though it's a page I think we might just convert this to let's give it a little a quick go we won't go too far in we'll just do a quick content other than we even want to content control because we are the page itself and we just want the user control so just start with this let's see what breaks and let's try and move these to just simple contents so we don't have a title so we can add that afterwards because we don't see the title anyway so we're quite up to remove title remove that from all three and that builds I don't think I was going to work somehow there's no way that's going to work by just removing page notes there we guess where everything goes all messed up there so now if we're not a page or did I just screw this up on I added a login page there which now shows and I also change the default current page then let's just change that back to login and that hidden let's just see if anything's working so we've lost slide animation well we've actually only lost the slide in animation we've got the slide out I think that slid in it's just purely the slide in animation of the page we've lost so let's go look at the base page and let's have a look why this may have broke so I'm guessing it's boiling down to the the width getting the page width I'd slide from right so element actual which I'm guessing is now broken so that's coming from you know our elements which is obviously now a user control and it's unloaded which is fine so what's happened as we've lost the elements actual width so you wouldn't get any other width as probably just because we haven't loaded it in yet whereas a page would have parents width so width is not a number now I do remember we did this for in fact I think I know what it is with now when I'll call in a different function because it's now not a page I think that's what we do an extension property here so we go to animations web page animation here or rather the page animations which was when it was a page and then we would get the window width so because we're now not a page our extension method is instead boiled down to framework element extension to the exact same name so we want to give the ability here to override the width I guess and we'll do the width of 0 and then we'll say of the width equals 0 I'll do the element width otherwise we'll pass in the width and we'll fix that for here and here in fact all four of those but once we've proven this 1 gets fixed so then we look at where this is now used you can see it's in the page so the animate in we now want to specify the width to be and this would have been the window width so we're going to now have to do application dots and this is presuming we're always going to load anything that's a base page into the window even though we could load it anywhere just for animations to work so application current dot main window dot with I think maybe will work it doesn't lie double to int fine in now let's see if that's fix the animate in and there we go that was really painless I thought that was going to be a lot harder than it was so now we've got and it looks like so far everything's working okay we've completely removed a page so it's now just a user control let's go ahead and fix the other four animations in case we use the others and add a comment so and the animation whip to animate out or animate - if not specifies the elements which is used so just copy that comments firstly into all of them so we want to copy a complete line like I'm doing here simply select but don't have anything I'll add you just click somewhere and press control C and that will copy your entire line plus the new line so when you come to paste it will just paste you know nicely on a new line then we want to pass in this width property at the end of each function there we go and now we want to pass in this logic here that's a plus f5 make sure nothing's broke so that all works now the reason I wanted to get rid of the page as I started to just sort of talk to myself originally was because we can't see in the main window and I'm thinking this issue here with the main window now is more of we just need to clean delete everything restart visual studio to get it to appear because there's no details page animation based page move next loaded in case it's the base page on the scroll loaded so apparently it's maybe listen out for loaded and do things let's completely comment that out and see if that fixes the issue and then let's put it back in and make sure that is the issue okay so it's seeing something in here and I know what that's going to be so the issue now is I'm guessing it's the way this animate in so if we just comment that out and it's going to be with that window width we just specified yep so we then boil down into this and I'm guessing if we didn't specify this yeah so the issue is probably with this statement here to get the width and this is to animate in well a quick fix that there's probably a way of getting the window width at design time here I'm not going to bother trying to think of that for now all's I'm going to do is on the base page loaded or in fact yeah for the animation let's just say don't bother animating in design time we're not going to lose much there you're just not going to see slide in in design time so I think it's called designer properties I think yep designer properties dot get it in design mode and the sender is this page that's fine I think not converting dependency yes you can well what a page anyway let's just pass in this that's fine so this will say if we're in design time then just return so now if we build and the animation still in in this animate M value still M so now we we don't get an issue here we're also still not getting the page but let's just check the application still works at this stage yep so we're getting closer now so the final thing we need to try and do is get the page to load in here to visually see the page so let's first check we can actually load the page again which I'm sure we can now so let's do say log in page it still doesn't want to show okay let's move out again I think we might need to clean Visual Studio restart and reopen because we did see it earlier when we were doing this for perhaps I think what it might be actually is does the base page hide itself by default did we add that to base page so user control oh here we go so it isn't if it isn't equal to none we actually hide the page so let's move this check don't bother animating in away from the load iation can put it into the constructor of the page here so don't bother animated InDesign time means it won't do any kind of logic in the constructor so now if we go back there we go now we can see the page so we can delete this login page we know now works or in fact we could leave with that and place it in grid column one to see so you can see that we can now see the page which we couldn't before to try and get some nice visual so the final step to this is to get this page host to load the current page so let's take a look now at the page host and I think it's all mostly code-behind but let's say we've got a frame here and that's probably why the frame is generally designed to show I confer a page so we probably want to change this to add another content control at work or in fact let's add one in addition for the moment to test this and I can't even think how we would add is it going to be maybe X that the login page nope add presentation and that's it binding I think we need to in order to do this I'll actually it Bay's constructors anyway so let's just change this to content control we don't need the no frame history anymore because we're not going to use a frame because we're not going to load a page let's first see about we'll build which it will we also know that we've lost the animation again there and we didn't so it's an amides in that still works and we've got rid of the frame but we're still not seeing a page there we're still not seeing a page there so let's see the code behind the constructor does this the current page property change so maybe just the the current page property isn't firing so let's just share throw new argument null exception test let's see if the designer will crush so the designer is not running that code because we were to move this into say here and build we should find that the UI designer complains like that so we know for a fact it's not running the current page property changed in design time which is kind of an issue well it isn't it isn't so what we can do is we know that a design time we just want to get the current page so they all page the new page what's over and should animate out and then basically the whole point is it does new frame content is the content passed in [Music] oh and then we use current page as we actually set the page so where do we set this and we're doing it in bind anomaly where did we set this page I can't even remember let's just run this and see where it is I know it's a mining somewhere we did this apparently we're not getting any hits so we start up the main window it initializes and then the current page property it's bound in the window obviously as a net where we bind the page host here so that's that's where we get set so we've got the current page and then we use a converter to convert it to the application page so the application page volume converter we want this logic for ourselves in the design time we want to run this exact code to you know get a page to set at design time so enjoy creating new instance of this if it's in design mode so let's go to back to the page host another seems like a lot of work but the benefit here then as we can get a nice visual you know complete visual of what the applications like is we're developing it which is really what we want so the same again here if designer properties dot get is in design mode with this page so we're in design time or over are in design mode show the current age as the dependency dependency property does not fire so when design mode then we want to get this page dot new page content so in fact we want to probably do this on potentially when it's loaded but let's try here and for now let's just do as new login page just to check us is working and build we don't need this and that we go through the login page now we'd say steadily been the login page we want it to be the application page value converter on this case a new instance of one and convert and we're going to get back at base page so cast up the base page and it's going to expect that we've pop into that a value of application page so we know that is going to be the IOC dot yeah application view model dot current page and then it wants a tie which we ignore anyway parameter we ignore and culture we ignore so one we're going to pass in defaults here without breaking the override looks like we can so now that we'll take the current page that we've specified in the view model convert it to a base page and set it to a new page content just for the designer I think so how's that worked maybe so now we need to check by changing the current page from login in fact that's kind of broken just notice that's still visible yeah that's decided to show all of a sudden when it wasn't before a lot to fix that so we change this to change this to say the shaft compiled we should see the chat page now which we still don't I think this I think this is actually just stock and isn't updating at the moment because there's no reason why that would show the login page so I'm just going to clean everything and build and if that doesn't work we're going to do a complete oh there we go that was a slow update and then it flickered and worked an agency it's hidden the side menu which is what we set and it's updated the chat page you know to page to chat so we can change that back to true and then rebuild and you'll find that with WPF sometimes I mention it a lot but sometimes the the UI is really slow to update you have to forcefully clean your solution and rebuild and even that sometimes doesn't work then you have to open your actual solution folder I've just changed back to the light theme for the moment that will go back in the other video and you'd have to go to say your source folder and you delete the bin an object close visual studio delete the bin an object folders reopen visual studio clean your solution and then rebuild again and then this update so you do get this in WPF sometimes they just don't always believe it's not showing here that the codes wrong so now we have a complete updated UI where we can see everything we're doing in the whole window nice and visually and then we started the application we should start at that point as well now yes it matches exactly what we should be seen so we'll finally now get down to the point of what we wanted to do in this video which was this head of all and that is going to be in the shaft page which is not actually a page anymore but it's fine because it's a page to us so you have a page in our application of URL and here is the current chat page right now we've just got a border and we want to add a stackpanel so the board is there for no real reason so let's just change that to a stackpanel now we want to have or do we want to stack but no one to grid sorry because we want this to expand the remainder of the size so it will do grid line grid row definitions row definition the first one height is going to be Auto which is going to be that bowl we're going to create the title bar and the other rail height is going to fill the remainder and then we're actually going to have one below that for the this right message thing when we get around to doing that so that's ready for that this control moves to the second row which is number one name these got list and title bar shut then textbox something like that we've got a chat list now we want to add the actual header here so that's just going to be a grid with two columns we'll have this one spanning both so it's central still have another grid that grid is in row 0 by default so that's fine then we want the text box text equals and we'll just fill it in with general information for now font or foreground will change to the white font size will change to trial extra-large the lips more bums oom doubt at the minute and horizontal alignment we want central this grid as we mentioned once two columns width of the first is just whatever need 12 the maximum amount and the other column is going to be just what it needs so this is going to be do auto that's in column one which is fine as soon as we have another column which we will make with a stack panel for stuck in the the bottom is the same as a side menu control so we pinch this design for the moment which is here for main buttons paste that in here move it to a grid column one delete a few of those a minute and see if this builds looks like we've got some kind of issue with I'm guessing it must be the button style because that's all we've done so far as the button style it looks like the designer broke I think we have an issue with the icon button style let me just remove that and try again and then we can look into that reload yeah so there's something up with the icon button style let's not put that back in for the moment I've got a feeling it's something to do with height because that's not square now so let's go and in fact I know what that will be actually if we look at the style to the buttons and the icon button we do a width of actual high and we are in a grid with let me get this right this grid is inside this grid so this grid is in row 0 and Rho zeroes height is whatever it wants to be and then this is within that so effectively what we have right now is there is no set height and we've got a style that tries to bind to the actual height which there is none at the moment so I think it's causing a kind of issue with an infinite height item so let's at least start with let's just make this grid a fixed height of say 54 now and we can zoom that in so we can get more of a perspective and let's put the style back on and that hasn't crashed this time so that's okay for the moment so let's get back to where we were firstly I stopped commenting this before it gets too messy to this first one here is title bar this is title text inside of that and this is main buttons is fine not the chat list we want Matt to be vertically aligned as well central there we go let's just get a general feel for this let's just run the application what we could have just looked at the main window designer actually but there's that Alex okay we have a text sticker I think let's also check out the close a load of these we should now be able to look at the design in here so there you go that's the benefit now we don't have to run the application we can just change the text here you'll have to just build but you don't have to run and this should update so you're getting the benefit now of all that work we did to be able to visually see the whole application so back to this part change that back to add a few more buttons and you can see this is actually this writing now is no longer central to the whole page you can see is like offset over here to want to span this oops mean to restart when to stop let's span this title bar across all the columns so columns bottom two then work we just need compiling okay why is that not working we specified the wrong product our bar is plus the entire thing as one it's the title text we wanted to spam there we go the other thing I've noticed these buttons are actually got a blue background so what I was going to do is use each chopping off part of the background here where we would have you know the items underneath things it really obvious there let's change this to transparent go to the go to open go to the bottom style icon button background right now is that we want to change it to transparent it's not an empty string or a nice complaining and that worked until we hovered and we've got a kind of white yeah works until we hovered and the first one seemed a bit white let's change the animation so it's animating to light blue change that to transparent and I think we're going to have to make a transparent blue so there you can see is transparent we hover I feel kind of messed up with yeah it does not like that door but you can see this why what it's doing is its fading transparent is actually you can have a transparent color you know you have so much transparency in a color and it's called a RGB so transparent color is actually a white transparent we want to make I guess this we were failing to light blue and we were originally blue so we want to change we want a transparent blue brush so let's call it transparent blue let's go to the brushes adjusting colors and then it's word background yeah blue brushwood blue brush so this copy and paste this one call it word transparent blue and then at the start is the transparency let's make it think it's zero zero for their invisible and then let's specify well that's now already specified transparent blue then we have when you leave it fades to transparent blue and it wasn't the brought it's just a transparent blue let's try that so it's transparent and there we go I was actually working nice now so what we've got now is it's transparent by default and let's check these to work yep transparent by default and now it's it works when we've got a background when you hover it'll then get filled with color I think we'll also let's try making this background transparent here so this background follows through a mild look nice like this top menu we've just seen this you know solid color but then a background here we can always change it but let's give that a quick though that will be the side menu control zamel this thing we want to change to inside the style background is blue let's just change that to what we just delete it'll be transparent or not the above is why so move the background from the main board away and style the content presenter so I'll have to wrap the content presenter and a border to give it a background and then we'll have to move the grid row specifying to the border itself so we can basically make this white but the the side menu title bar transparent so we should now see the background through no yes that looks quite cool Accor I like that you can change that if you don't write that and just add a background color or maybe even a partial background color but I quite like that so we'll leave it as that for now and then you get the whole background flowing right away through we're going to make this text bold worm let's do that chat page text block font family I think regulars like you know bold enough there we go and then these menus well we have on ours a search icon and an ellipsis icon so if we remember what we did with these you look at the content we specified font doors and chat icon strings so we need two more we want a search icon and a ellipsis icon ellipses and be felt that just vertical actually helps is vertical icon then if you go to I think it's fun to awesome cheat sheet it's called font awesome cheat sheet so font awesome to io4 it's like cheat sheet you'll see all of the icons we want to search icon which is here so you can see there's the icon we want we zoom in nice and big search in Z here search icon and it's fl2 so we go to here and change the search icon go to and then we want my cat and vertical ellipses which is should spot one of not all this to a search gasps no call it ellipses or dot Hoyle yes or ellipses we can want let's dot so it's 1 for 2 so change that to 1 for 2 now we want to use these icons the first one there is search and then the other one is ellipses and we press f5 and let's see what this looks like now and there we go that looks looks pretty much exactly the same as the original Photoshop so I'm pretty pleased with that I'd say that's pretty accurate that got is the title bar some buttons ready to do stuff with we also get a lot of clean up there so we just go back to the current page change that back to login change us back to false one of the major benefits we got was now if we compile the actual main window zamel will completely update and show us the real page whereas before we couldn't see the page so we turned everything into just a user control instead of a page we added that on startup we focus the tax box we added a default button when you press ENTER to log in we fixed an issue with the page host not removing this control you simply slid out and then when we're at this page and press ENTER it was calling the previous pages button so that sort of fits that issue as well then we made this transparent because that looks cool we did this tile bar here we fix the alignment of the text here we fix the light blue color here so just a lot of cleanup things things that you know a lot of people would just ignore and keep going but as you'll see as we go I like to make sure everything stays really clean so as much as you want to rush forward and do you know other things you really want to stay on top of anything that starts looking not quite right and make the time to fix it so this is now back to you know exactly as we want it to be the next video I was going to do the scroll bar but this video is taken along with unexpected so the next video will be short I think probably half an hour and will style scroll bars and make them look really nice and again blue and say didn't blend in with the application and then this will this will look really clean them so hopefully this video was enjoyable again any comments let me know and I'll see you soon [Music]

Channel: AngelSix

Views: 15,891

Keywords: wpf, animation, chat, bubble, message, custom control, user control, style, template, ui, view model, mvvm

Id: sSyCrAbe4IU

Length: 64min 12sec (3852 seconds)

Published: Fri May 12 2017