C# WPF UI Tutorials: 05 - Creating Login Form Sign Up Screen

[Music] in the last video we made this custom window so we've got our own icon in a nice white style and we just press f5 to compile and check that we have this nice window we're now going to change it slightly so the first thing you want to do is your login page so I've gone ahead and done a Photoshop mock-up so we got like a nice blue background with some emoji icons I've made this little word icon and then we're going to do this sort of sign up page here we're just going to do the initial page first no back end code doing anything no animations just get this static page ready because that's a big enough job in itself so you can see I've remove the line because the background of this app is going to be this blue background all the time and I think the drop shadow just looks a bit overkill so we're first going to remove us so we just go to this window you can remove this drop shadow row definition in this grid the main window content red so just remove that row then if you go to your drop shadow just remove that completely and then we just want to move the page content now to Row 1 because there's no Row 2 and then just press f5 and make sure that's gone there we go we've never over to that line and the drop shadow then the next thing we want is this background here so you don't now work in directly in this window the window is the main container this is now a page this is a login page so we need to create a new page so we go to solution Explorer right-click on the project add new item and then in the search of the top just type page and run the page WPF pull us the login page keep it out a minute we'll make a new folder and call that pages res the application grows I think already got a folder called pages include I'm going to add the login page to the pages folder now the basic page let's just shove a button in so you can see something else in it so I've got a big test button so we know that's the page and then we need to load the page into this window so in the main window we need to go to the bottom here this grid and we want to add inside the grid a frame I'll give it a name of a main frame and then the content you want to bind to current page because that's going to be the page that loads and now we need to actually add back to our window view model so the current page we're going to have as an enumerator first so let's just create a new folder called data models and then we're going to start holding data for your existing things that aren't view models actual data like in this case a page so you'll see as it grows Wireless is needed sort of application Paige and then it's going to be an anon and you can have one page for now the login actually this is a page of the application so just got a any number which is the drop-down list of URL so you've got options it's going to be a login now in the window view model we want to create something called current page that we want to bind to here so in the public properties we will add application page problem page to get second one for now of the default it to login so will now be bound to this application page but the content needs to be a specific type like a page or a URI or a web address so we need to do a value converter and we've done value converters in previous videos we're just going to add I don't like the way that we used to do value converters which is to create the value converter first and then in a resources style so like in one of these files now through our converters and you have to add a key just like you do with fonts and things so you create the font and add a key whereas value converters you create a code file and then you end up adding a key as well so we're going to do it slightly differently so create a folder called volume converters and I've got one here and then in that value converters folder we want to add a new class and we'll call this base value converter and this is going to give us the ability to reference value converters directly instead of having to constantly define them in a resource file as well so onto abstract class base value converter it's going to be a generic time so we can fashion a specific tag and then in order to access it inside of sam'l directly instead of having to use this resource we're going to use what's called a Markov extension and that is the same as when you type like static resource or binding things that are their markup extensions or things inside that's the curly brackets like that so we'll override that in order to provide that ability and then it's a normal I value converter as before as well so nothing's changed there it's still just a value converter implement that interface let's give it some comments and then the P as in the generic tamp was passed in it needs to be a flash and it needs to be a newer bolotoff we need to be able to create it and then these don't need to be run one week I'm struck we want to leave this up to the actual plaster and how it's the base to override comment leave I'll do for now and then we just need to implement we need to have a reference to the type itself a static reference for the converter five years for personal so whenever we then use the value converter in sam'l will effectively be calling you know getting the static implementation of whatever converter we call then we just need to override the markup extensions provide value which is what happens when it tries to actually get the value in sam'l and for that we just want to return the converter and we Cody exists every doesn't then we want to return it what we want to make it a new version that's right now I want to be a new a new converter the tab is passed in so this is just like creating a new instance of whatever tab we pass in and setting it to the static value and then either way we return so this little one-liner is sort of saying basically if I'm converted equals null then it's a new T and return and converter so this is effectively the same as this this is just a a shorthand way of doing this statement so that's all what does that's all the first base view model needs to do in order to now be able to just create view models in code and not have to add them in a resource file so let's just finish cleaning up this class as a base value converter now we want to create the actual value converter and this wants to be to convert the application page enumerator into an actual application page so this caller application page value converter and then this time it's going to override base value converter and it's you're passing it down type so that the base knows how to create a new instance of this we then need to implement the abstract class and to do that was it simply switch the original value which is of a type application page by default if it's an unknown page we'll stop the debugger so that if you're debugging your code you'll you'll hit this breakpoint it will actually break for you because we know something is obviously wrong if we're not then it'll just return no page and if we have the login page will now just return a new login page and then this is the logic now whenever you switch pages so whenever the view model changes the current page and you could handle things like restoring pages from memory and keeping a you know a list of pages you can do whatever you once here but for now this is a nice quick and simple just a login page creates a new login page every time it changes to a login page and that's it we don't need to compare back so that's the application page of value converter so now in order to use it for this content here you just say converter and instead of doing your usual static resource and then having to you know find it from that way we can now just read a local and you can see that application page of value converter and it's found it that way it's just complaining does not your list let's just see if it's happy to compile but you should be yeah it's nearly compiling so now when we open this frame is the main content it should load the current page from the view model which is set to login and then the login should fire the value converter which will hit this and then I'll come into this convert and it should load this login page let's just press f5 to run that we get here press f10 every turns a new login page then you can see the test is now loaded so we've now got a page that's loaded inside the window so that's the value converted on we've got the framed on it'll also notice now because you want a blue background we don't want this border anymore the inner content border so let's just remove that from the new model in a Content padding we just want to change to nothing just remove the padding or in this case new fitness zero and then that will allow the effectively I will background the blue background to to fill everything right to the edge and then the final thing you'll notice are just a little bull I spotted the last time you maximize and you can try and drag from the very top we've got the resize border still so you can't drag from the very edge you have to come in by the six points so we just want to update the resize border to take into account the same as like this borderless so you simply want to say yeah and it's going to be returned borderless it because nothing otherwise it's six and that's it so now when we maximize or when we're bored less in any way you can now drag from the very edge just like a normal window would so that fixes that little issue so we've done the view model changes we've done the value converter for the loading the login page and now one more thing we want to do on the window is this welcome friend we've now changed to this little logo so and then this background we want to add as well map so let's do the logo first so just go to the tile now the other issue with this title is you can see here these two chains this is the actual tile the size of the title are the text it's not exactly centered because you've got a small icon here and then three buttons here so to get this perfectly Center instead of it being in column one in the center we're going to change it to column zero and then we're also going to have a column span them to basically span all three columns so now you can see the little change with the very edges so now it goes through past these buttons and completely expands so this is on perfectly Center so that's going to get that Center and now we want to change the actual text so we want to change this text block of header text here to our word logo so to do that we'll just do a stack panel and then inside that we're going to be test lock and because we want each letter of the text block to be different we'll do a run inside so we want to make the font family first to be bold which we don't my house what's going out back quickly go to the font copy and paste the regular call it bold quite bold here well we're in here we'll also add some font sizes so we wanted gobble and we want key and we'll call the font size regular and we'll start using standardized values them so on font size regular font size small absolutely 14 large security we can change these afterwards double need system add in so I'll just press ctrl + dot and that offered me this zamel namespace to get added for me and then it put it in from so let's just copy that between the three so we've got some font sizes now we can use and we're now going to leto bold font so we want the text to be late so bold and now inside text block you can do if you want to style different parts of the text you can do things for runs and run text the word w foreground color and again now we need some colored adding so before we can do this let's just jump to the colors now copy and paste this one we want another Greg for this gray here sort of the faded gray so we'll call that one foreground dark and that call it a thing for a number right leads Beedie Beedie Beedie foreground dark brush or round dark so I've got a dark color and now we want the four colours of this logo the orange blue green and red so the key is going to be call it word blue and blue is three oh nine ninety five I think and then we want the brush flat as well so that's the blue color orange green and red we won there are angels f f/a 8l the red is and was the red pepper for seven for seven just slightly off your red and then you want a green which is a oc5 for one we've got some colors layer to use now the W we want to be orange so that's just going to be word our ink things you there's a W on the Ord and doing the more capital you want blue red and green and obviously you could just import a logo from Photoshop as an image if you want I just figured do it this way to show you a new way of a you know making some custom text and then you'll see the spaces between that's because we've actually got spaces here so this that's white space here ends up being here so once you're happy with that simply delete the white space basically put these runs all in one big line so it doesn't look nice on the editor you get this big long string but it does good enough we now know it's there we should have bold font it just doesn't show up in this doesn't actually dynamically loaded that and then we just want this by Fassett Oh written underneath and that will just be another text block and text by successful and foregrounds want to be a dark brochure think and then we want to align it in the center and there's that we also know need to set this text size the font size for this so the word logo is a specific size instead of just going 50/50 and fitting into the view the font size will start in front 20 let's use the new font size font size regular and it looks a little bit small we'll see what that looks like and then we'll do just a little margin we want to bring this for Seto closer survive zoom in on that a minute you see this big space between the Fassett oh and the word let's just add a negative margin to the bottom of this word so for that you just add a margin left right soft and then bottom will do minus 5 and now we're going to brought the Fasano closer we're now right at the very edge as well I think we might want to add a little margin to the top and bottom but to be honest you can just go all around that's brought it in flood them with too bad let's see what that looks like press f5 so I Felix fact I've got a cool a logo now let's actually just cure saml just our font with the colors so we've now got this this title pretty accurate so I'd say that's that's as accurate as we need it there that's pretty cool and now we want to do this login page so we're going to put the background on the login page for now I mean we could put it on the the overall background which actually might do that my plate on the window is the background and yeah I think a royal so first let's add to the images folder create a new folder called backgrounds now go film that I do this yeah I created all the folders in advance and then include existing item and if we go to resources in the git repository from them backgrounds you'll see I've created this emoji background it's just a transparent PNG so we can style the color whatever we like and now we can use in this border let me use a border background background I'm going to then user I think it's an image brush it with tile mode set tile and the viewport units set the absolute to the size of the actual image that we want to tile and then set the viewport self and what we have a lot about I think it's basic zero zero five from this 500 yeah so that's like a 500 unique wide for the image so the original images one and a half thousand pixels but I'm a good size will be about five hundred units for all those icons and then they'll tile and repeat themselves over and over image source is images backgrounds I think it's called in those you background got PNG we need to set the or we need to wrap this in another border so we can do a background within a background let's put that border inside another border and the top borders background can then be the blue color which let's not work for some reason sir hello this so the content presenter end up flat round after maybe the content presenter is going to override it not going to be transparent let's just check it's open the pages login that's just horizontally aligned this so it doesn't take up the full width and then run and let's see if we can see the background behind this which I think we should I think the UI is just not going to show or not so maybe we have to set the background to some pound nope okay so that isn't going to work that way we've got a background on this content and again oh so now we'll just move this out so just get rid of that leave the content presenter and we'll figure out a way in future to put this inside the content presenter the main background so for now let's just chuck it in the login pages background so let's get us over here and then similar to before we want to now do a border of the top one the background wants to be the blue color on this bottom and then wanted grid for the rest like content you can put the background on anything so I'll put this image background letter repeating brush on the grid Megan see we got this a emoji background so if we press f5 you should just see that now is a nice blue background and there we go and you expand and it just carries on tiling that gives us just a nice looking form and I thought we'll have that as the main background to the whole application it's just that I'll figure out a way to put that in the the main window as opposed to the login screen but for now it's fine there so you can see where it is so we know about the background so next thing we want to do is the sign up we want to start putting all this content in so this is going to be a border first the main outside part but we also want to run actual the entire screen to be scrollable so if this was too large the content of this login was too large wouldn't be able to scroll so start with a scroll viewer to keep everything else inside of change the visibility freak toppings are also so they don't show all the time and now inside the scroll viewer we want the stat panel to start stacking things down we want the stat pal to be this though this the whole content we want to align horizontally Center and vertically Center so in the stack panels properties will have vertical alignment Center horizontal alignment Center we want all the text so every piece of text we put in we want to naturally Center so we can just do that with let's presume it's all text blocks which is for the most part all of them text alignment upper center so this property will pass down to any text box inside of the stack panel I think that's it for now and then inside that we now want to do this white box which will be a border with a corner radius similar to what we did with this window so I'll have a border for the background static and it's for Graham light brush corner radius will do about and then we want padding inside to give this padding to these don't come right to the edges you'll do some padding yeah we'll do what should we do we want the big one here at the top so matters I'll have that padding to the border so say about 50 and then put like 15 around the edges so left 15 tot 50 right and bottom 15 then we want one to set the width of this I don't know what it's going to be right now it's just surface a 400 at the minute and then we want to margin so it's away from the blue if he does get to the point where you drag this off to you know a small window we want to keep at least about a 50 point border around all of this so you see the background all the time so you want to do want it all around except the bottom because you want this text at the bottom so this will then Pat out afterwards we don't need a big you know margin below the white box because the text go in there I think I'll do for the border and now we can see the border now let's change this to something more realistic zoom out a little bit and they can see the white box there's nothing right now so you want this sign up tap next so we'll just do a text block okay sign up font size want to be large using our new font size that we created font family I will have a regular social slightly thick and then the foreground we want to be the blue color see what that looks like doesn't look too bad he looks about right and now we want this text below here we could always move these into styles like header styles and stuff but for for twit mess for this rule won't bother with that for now so another text block this kind of text it's about to get fun the last and addy instead of sex and so I was like complaining that childís at more than once we're going to border we can't be in a border for that we need to put a strap panel here zoom in on this a little bit so that needs to be a lot larger and the right color so that will be font size regular there we go I just need to fix the color and for that we'll use the new foreground brush we made and there we go there it's about to get fun sets which again looks pretty accurate we should probably comment this is the white box and then this is the signup header signup the subtext hey what do we need next we just need the two text boxes so the two text boxes now and then we'll do a style for this so that'll be their username and password the password will change to a password box booked we're going to leave the password box until the next video which I'm going to do about attach properties because it gets quite long-winded to do placeholder text so we're going to save the password box till another video but we'll style it as you know the same for now and then we need to be important so then this next button you press f5 let's take a look at this I know it's not styled fully epaulettes check all the elements are in there so we've got the signup page we've got the scrollbar when it gets to small which I think we can reduce that width it's a bit wide and then when you go off we can't get off because it's past the minimum size but you see we keep this top and bottom a slightly smaller at the bottom of the menu some more space at the top but when we add that text that's going to shove off let me just need to style these text boxes now and the button so let's just shorten this width slightly change up to about 3:30 there we go this is email password next button and then outside of the border we want to put the text below which is actually going to be a button so it's applicable so it says I already have an account it looks like text but that's going to be a clickable link so we'll make it a button and then we'll style that again I already have an account and we'll ask the style when we've made one so right now it's a button we don't want to go full width we want to well actually it doesn't matter to be honest you can well yeah we don't do forward let's do Center same for this next button you don't want that full width or style that because it's not full width it's just you know cut off there and so horizon's' alignment center that's about button well let's get down to styling this so I think that's the login page done we'll start with some simple ones so we'll edit the buttons so again we'll zoom in a bit we're going to edit this next button and so let's first click there's a way to if you're styling there control the buttons a specific one because the text inside of it has an issue like if we do font family and we try and make it bold and you'll see it looks bold there but when you run it's not really bold as it's done is put a faux bold on and then you see it's gone so you can't actually set the font of a button content directly so we're going to have to override the buttons template to allow that so instead of just creating a new template for a button and losing all of the current styling you first want to start with the the entire template of the regular button then twiki to suit so we want to make two styles we want one for this orange button which will then become the default for all buttons so just right click on this button it can be any button in the UI edit template editor copy let it add to this document - just click ok that's fine and then it's adding it to this document and we're just going to cut the whole control template out so this is the default button template I'm going to cut that away delete the resource go down to the button and delete the template for this sati does there and now we go to our bottom styles and we minimize these others I'm going to add our own style so style target size is a button based on the H style as always first our new style this will then become the default for all buttons yeah then we can do don't need anything else and now if we go to the setter make the property template set it up value and I'm paste in that control template it can remove the key and now there's the default button so we've got the whole default button template so all this is done now is created a new a new style that hasn't got a key so this will apply to every button that's effectively like a copy of the original button in WPF and just to prove that we've got that let's just do set a property background value red and there you can see every button has now got this default style which is the original style as well we haven't lost anything so now with that original style we want to change just the things we want so the background we want to be the orange color we've got let's do this orange the foreground wants to be the white going get rid of the border so the the border that allowing the buttons just change the thickness to zero that will get rid of that see how we're looking I think starting from piles let's try and build because it's usually updates pretty there we go so you see we've got the white text the orange background we now need a radius around the bottom we need this nice curved radius to do that we need to look into the actual control template here's the border around the bottom so bring that down and then let's just add to this corner radius of say 10 there's a little corner radius set the back up to here we want the font size it's going to be used a large one I think it is build yep so the font-family for good measure and we're going to have the regular the slightly bolder font now we need some padding in these buttons it keeps going back to the original style to separate you should I close that text was to the edge so let's just plug that out we want quite a lot of padding left and right it looks nice on the buttons to have a bit of space so we'll do 50 on the left and right 10 on the inner and then we'll also add a margin around the button top and bottom by default so that when we place these buttons in they're not going to be all squashed up you know to everything else it will add that to the actual button I think that should almost style just like the button in the photo shop so go to press f5 and take a look at this that's not bad we don't want this blue cool this is the windows default blue you'll notice the font I was mentioning also hasn't gone bold even though we set it to regular which is like CEQA so let's fix the text and let's change this hover effect to be our blue this blue background so let's do the where are we see the text first so right now those content presenter well because the buttons content could be anything you don't have to set text in here there were always it does upset text here but we are going to our button style is going to be text just for this example so we're going to completely remove the content presenter just change it to a text block for now so we don't need the content presenter name which is also reference here let's remove some of these additional my toggle check to don't care about is pressed we don't care about mouse over sure I don't care about that and we don't care about a border anymore so just remove all that content template we don't care about but we do want the content in this case text wants to be the content don't care about the format we don't want the focusable well horizontal alignment matches margin matches remove vertical matches so now we want to set the actual font family that wasn't been set before and that wants to follow the template bindings font family so it picked this one up and I should fix the boldness of the the font so let's check that and there we go now we got the bold foam that we wanted let's fix this half a color so we've got these triggers here onmouseover sets the background so it's pretty much already set up sets the border which is this one here this is the background color of that border and we just replace this with our and now it just there's an issue with visual studio the intelligence gets lost inside of triggers for some reason so we just copy this word one here from orange and on however we want it to be our blue let's see if that works so there we go there's our blues there's the button pretty much done now you got remember about the button style as well there's a hint here is enabled false so we also want to handle when the button is disabled so we totally got the trigger ready for us which want to change that background color to another state for Seto I don't know not for certain foreground dark I'll see what I can also disable the button to check it out let's go to this button just set is enabled for false and there we have the nice-looking disabled button and I think the hover them won't work on there okay there's no color call but I think that sir oops I think visual studios got a bit confused just need to clean and rebuild seems to think there's a some style that wasn't there now why is it finding this one there's nothing there okay visual studio is a little bit messed up so let's let's anything do it that okay so there's actually an issue with enabled but that's I'm guessing pulling in this which is aa my issue foreground brush you don't want just the color he need the actual brush and now we go stairs the disable button so the buttons done let's do this button now which is almost there we basically just want to change the the hover from being you know white text to being orange text I'd say instead I'm obviously not having this button border so this one is P and pull it regular button like that you know the button that's now going to be used all the way through the app we will we can style this you know over overlay the style and replace these templates but for how small it is to be honest we're just going to just going to copy this template for once it's not that big of a style so I'm not too worried about it being you know a new a new style of you will will call this text button based on button will give it a key of text button so all you want to do for that is the background now wants to be transparent the foreground wants to be the line brush which it is and the font size want to be regular we don't take a bit of huge from border fitness we've already got a font family is right the padding we leave the padding the same the margin the same and I just want to change on hover this wants to be foreground we want it to be the orange color and the disabled the foreground and it's not the border anymore it's the foreground of the whole thing so we change it to orange on father style this button with that style text button let's run and see what that looks like so there we go we've got that got like a little hover text I can turn off the disabled Phyllis button man and there's that that's all the button done that wasn't too bad and now we can you know we use that style we've already the colors the fonts so the only thing left now is the textile so we want to go to the text saml and then in here we want the new style and we also want you can see this email and password this is like they're the placeholder text the watermark if you will before you tag an email you've seen them on most websites so at the same time this styling this we're also going to add a placeholder text so we'll create a new style do the placeholder first and we'll call this textbox placeholder so we're not going to add any custom style to this this style we're literally going to add the ability to have a a placeholder text then we'll go override this style and add the styling to it so that we can you know keep those two things separate like override the base style as always and now the first thing we want to do a property the border brush the color of the border you can see we want this underline want our blue color so that value is going to be the blue color in fact I said I wasn't gonna statically I'm actually going to style it so ignore members going to style the whole button and add the placeholder text and then what we're going to do is add finishing torture so we want this we have this on the line we want this call we want this place all the text things like that is standard then what we're going to do by default is just a black the padding the margin little little extra bits but we're going to add some style or now that's in fact let's just style the whole button like this so what we want to do anything with that now okay so let's just remove that let's make this the default style my style the whole thing so we could always change this after if not but let's just go for it so the font size we want to use we'll go with large nice big chunky text on some padding inside to separate the text let's just give up so you can on some margin around similar to B button so if it isn't squashed right against this and again we want just the top and bottom so it's just out of five pixels out of five points top and bottom padding we've done the border brush in blue and now we only want the bottom border so let's change the border thickness you on the bottom so it's left start right and on the bottom one still want so as the border font size going on font family we want the text that we type to be bold so the placeholder text is going to be light and the text with tab is going to be like this bold text so this is the actually text for typing this wants to be and say bold is we don't want actual bold regular our kind of semi bold of you will set the font family as all your styles I don't know how that'll look let's just run that and see then we're actually going to have to override the template now so we'll do the same trick with the text box template that doesn't look too bad actually so in fact that's almost spot-on there's very little to do whether than of the placeholder there so go to here click one of the text boxes right click Edit template editor copy place it in this page cut the control template you loot the resources that is added delete the template it put on your text box and then go into the style setter property template and the value paste the control template delete the key and now this is the default text box style so in order to add a placeholder we'll get a place we're going to wrap this whole thing in a grid because then you can place two things in the exact same you know one on top of the other I'm going to place the placeholder text directly over this text and then Harry from the actual the Styles of the original so this is the original template or in fact move those Styles out this is the only thing that's the original text box the border and then the scroll viewer with this special key that gets replaced so all we need to do is wrap that and a grid sadly original and now as well as the original we want to add a text block we don't want it to be clickable because that obviously stop us clicking into the actual text box we just want it to be a visual so hips as visible is false the text we want to now we could do like attached properties and things but for now I'm just going to use a tag which is nice and simple so on this text box we can use a tag which is like a universal property used for end we're going to just use this value for the placeholder text that we want it to be and we're going to bind this text box to that value over tag we need to give it a name so we can access it with these triggers later so call it place all the text or call it placeholder rather set the font family and let's can we want to set explicitly to thin because you want the main text as we spoke about being thick and the placeholder text to be thin like that one the padding to match the actual padding of you know the text box so if we set padding ourselves it mimics so that the text stays in the same position and overlays the vertical alignment will want the force sensor because by default the text box does this but it doesn't actually do it in the binding here so basically force its center because we know that so it always is whereas the horizontal alignment we want to keep the same as a template so that whether you align the text left center will write the the placeholder text will follow that alignment as well and we just want to set the foreground color to the very job brush and then we now need to set the visibility I'm going to miss so the visibility to visible by default which are actually good ideas so we don't need to specify them and then we just need a style and we need to style for doing triggers yeah we're gonna have to do the style on the triggers so we've got Sonic type text block yep that's right so we've got style do style dot triggers and we want to do a data trigger and we're going to bind it to the text of this box and we need to find that because we're now inside this is a template we need to find the templated property you can't just use this template binding inside of a style because we've gone from being inside of a template to now be inside of a template of a template so you're going to have to use binding text with the relative source such a template binding so the same thing is template binding but you have to specify it this way we want the text in the data trigger set the default value to nothing to effectively so it's you know by default it's not knowledge nothing and the data trigger will work by stating if there's effectively data then if the value is this rather the value is nothing then we want it to be visible in fact yeah so we want to set it to the visibility to collapse by default and then this data trigger will fire when the text is equal to nothing and when it's texts equals nothing we then set the visibility to visible nothing that's right so effectively this text box here and we've got rid of then we've got rid of collapsed and the whole style and we just run this now we should actually see this text block with the values in there there you go email and password but they're always there so we've now styled it and it's in the right position you know it's like if we type email it's basically directly over we just want to hide this now when there's any text in there so that's what this does we hide it by default and then we trigger when the text value is blank so there's nothing in then it becomes visible again otherwise it goes back to this which is collapsed so this should now allow us to see it by default also we can't set the it can't be set before yeah so you can double its visibility here you can but if you set it in a trigger here you've got to set the value first so it's a little fork so we need to set the visibility to collapsed in the style and then we need to override the style oh yeah so I've done this from here this relative source is has to be relative source and then come places tournament so on and I think that should work now so there's the email and now yes it just appears when you type and after the password will become a flash word box in the next video so almost there now let's take a look at this and compare it to this so as the screen the actual one above and there's the Photoshop so you can see we've got this is close enough with your slightly larger but it's close enough what we want I'm getting confused which one's the posture Photoshop now so really we want a slight margin between these two I think a little bit more and we need to do some one here between the bottom I think I yes I think it's going to be the same then so let's go back to here go to pages log in I just want to make a little bit more of a margin between this text block so just other margin to the bottom margin and then same with this text box after the text box and 30 say let's run that and you can go out and move these styles into actual styles of your lack there's the Photoshop and there's this one that's pretty accurate so overlay that and you can barely tell the difference between the two so I'd say that's a nice form now and then we can if we drag up we've got the scroll bar as well and we go maximized we've still got the window here all nice and looking cool so I said sir you also see you get this nice little effect we've got due to the curve we actually have like a nice curved scroll bar like a little radius on the scroll bar due to that wrapping that we did in the custom window and this moves around so I'm pleased with dialing Alex nice so I think that's where we'll wrap this video up then the next video we're going to do this password box convert it to a true password box now we'll probably bind it to a view model then and do the animation as well to animate the effect of you know a peer in and fading and going to the next page and probably do the signup page as well so the sign-in page so I hope this was a useful video and the next one won't be too long [Music]

Channel: AngelSix

Views: 165,563

Keywords: c#, wpf, mvvm, login, screen, sign up, modern, metro, flat, ui, tutorial, guide, button, style, textbox, form

Id: JU9Ai0hpBUI

Length: 64min 32sec (3872 seconds)

Published: Sat Feb 11 2017