C# WPF UI Tutorials: 19 - Creating Popup Menus

[Music] so now we're going to create the pop-up menus for exactly attachment button and the emoji icon so when you click this attachment we want like a lot of menu similar to this bubble so we'll start with just this bubble I think for now one last sort of popping up here when we click this a touch button same for when we do the emoji we want sort of a big menu popping up with all emojis to select and this will be like a drop down menu so we'll just get started with the attachment one first and work away through that I guess the first thing we want is a command to this attach button so right now there's no command press f7 and here it looks like we haven't even got the view model set up here so I think we've got a view model view models charts it's the Chuck page so this is kind of we can buy in the chat page take a look so this chat page is more like a chat message list it's all the overview of the an entire chat message so I'm going to use this view model and then hide that away sir in this room where we've got the this is all just designed data at the moment that's why so now we're bound to a chat message or less view model we need to add a command so I need some region here first to clean this up so public properties what was that shortcut they used to use for the region's control K s that was a good remembering K s and then region pattern like that cell area and it's a big public commands and it will do a public eye command and we'll call this attach the bottle command then we'll need a constructor then here we'll create the new command will also need a command methods for when the or attachment button is run just rename that one public properties file attachment button dawn and now we make the attachment button command and you relate command and it can be the attachment button so now we have a touch command to do something so we've got when you're now another property for when the attachment menu will be visible so the boolean I'll call it attachment menu visible and then also need to do in the command is now simply toggle that value so we do attachment menu visibility duckface equals true it's basically toggles a boolean between true and false I just call that dogface that's not actually what it is just a boolean XOR I believe that one but I always call that duck face it's easy to remember so we've got the command method were bound here to that view model so now we should be able to bind this buttons command to just touch meant and you usually get intellisense here I'll notice sometimes you do sometimes you don't attachment oh I know why actually you get if you bind it in in the saml side but because we've found it in the code behind you don't get the intellisense this is touch menu visible and then we can run that I guess and just check the chat menu now chat message list view model where we were we could just break point into here run this and click to make sure we hit this function we also got to change the view model type here because we change the code-behind here we also need to change it here so now we click this and think it's the pro point behind and not shown this no chat message a list view model okay so we are not getting this let's take a look at why first make sure we type the right things attachment button command and we're we're we shut page attachment menu visible now bind it to the button command not the visibility property so we click this and there we go we now get was false so now crew click it again was true now false so we've now got a property that we're toggling now's need to do is make a menu pop up here and then bind the visibility and animate it in and out so we're going to create a new control so we'll go to controls really chat we'll just make a new control here user control just called this bubble content we're just going to make it content control starve like a bubble and then in here we can just we could just copy and paste the bubble style from wherever that was which i think is a BH up message list item controls animal I think so we could copy this which is basically a border and a grid with three rows and the bubble anchor let's start by just copy in this chat message container and paste it into our control here one other thing let's just get rid of this controls namespace because we're inside the controls folder and now the main grid we don't care about all this margin stuff here now to get rid of that just the grids fine triggers for time we don't care about that row definitions will stayed the same apart and we won't have the third row for the time so remove the one row move that right over the speech bubble rectangle will keep we'll have everything there the background we will need to change after so for now let's just set it by default so this program right then you've got the text block inside with message text this is going to change so for now just so we can visualize it just put the word test but this'll change to content set of it being text inside the bubble I'll go into this bubble control is so that we can put any kind of content inside and this bubble or simply act as the pop-up container around it then we've got this horizontal alignment again will bind to another property after so for now let's just do the left the feel is again for now let's just do static resource two for gram white time containers are gone so they can simply be deleted and there we have we make this design a height a bit more realistic zoom this out to 100 we can see there now we've got a bubble with some tests in for now that will do we just got the general shape we'll come back and finish this control off but what we're going to do is next we're going to animate this in now so we've got bubble contents we won't worry about finishing that for now we just got the control ready for use so back in the chat page there's multiple ways we can do a pop up so the thing called the context menu which will pop up exactly where the mouse is so if we open like notepad and we were to type something here in right-click this is a context menu wherever you're right-clicking and we could sort of adapt that and and twiki to put the problem with context menus as soon as you move or click outside things close so you might not want that and plus we want this sort of layout to flow inside of our actual UI we don't want ajust a randomly pop up and not look in place so instead of like a conventional pop-up menu that you might think you'd make a menu that physically does draw just from where your mouse clicks or from a set point and just simply expand we're not going to do that because WPF is so easy what we're going to do is simply place this control inside the actual UI that's visible and hide it when it's not visible so you'll see what I mean in a moment so when we were clicking this anchor anchor this attachment button we want the menu to appear here so a pop-up above the button so we want to inside this grid which is grid Row 1 so here we'll just add and attachment menu pop up there will be a local bubble content and it's in the grid Row 1 and that'll now fill it with that so the next thing we want to do is vertically align it to the bottom and we'll move this into styling and things afterwards I'm just getting it visual designing it woman's first and then more optimize after and horizontal alignment to the left and let's just run that and see what it looks like you can see that's now where it would pop up which looks ok there's a few issues one would clearly need a border because that's just white on white and then we want to bump it away from this edge slightly so let's just fix those two things so back to the bubble content as add a drop shadow around this border in this path so in the border we want and we should be able to make the standard effects work hopefully on a border effect a drop shadow after I blew a radius say for a shadow depth to can't see much here a minute let's just make us background white so it can visually see okay that was the wrong thing okay so that gives us a little bit of visual as we can sort of see that's how it's appearing that's a bit harsh let's change the color of that so we want I don't know maybe try the blue or light blue it's okay I'm too bad leave it at that for now and then we want the same thing for the path so we want to change the end of a path to open and close and then inside the effects we've got and you can do actually got a slight overlay there let's zoom in so you can see that I think so you get the this needs to be behind so we want the border in this case to be that index of one I didn't do much - okay so in fact we don't want that to be one because then this overrides what we want to do is simply tweak the shadow effect so that and let's actually make sure this is set to pump out this is already set to be in front that's fine so let's just play with this value to try and get rid of that issue there so let's just lower that down slightly that's almost gone let's bump this out into three as well so that's like gone and get a good view that's got rid of the noticeable shadow there and it just means you've got a slightly thicker shadow here but I think when we look at that 100% it's going to look okay I don't know it looks bad we could potentially the issue is the depth is what moves it away we need to keep that away like that so that we don't get the drop shadow above so the depth has always got to be above the radius I guess so we could reduce the radius but then that's going to make it a harsher shadow you can't think we see because once you increase then you start seeing the blur above so we could actually layer something on top of this again just to draw over but I think to be honest just for how easy it is now close that is I think three is fine there so I think that will work for just a bit of a border to visually break up the appearance we're going to remove the temporary white background and margin I added to the whole thing so there's a nice just border which I think it's just enough so now we just want to Pat it out slightly so again we will bind this to a property after let me just see if margin left and do so we did just a margin left it shift it over would five would oops that was not what I meant to Pressman's person number five not f5 let's just see what this margin looks like at five so that looks okay that's that's a wrap for like a small bump without moving the we haven't moved there the outer oil because we want that to stay in line with that ideally we just want to sort of get a bit closer just a mini tweak for the UI just to look nice and then another suggestion I had in the previous video as well we might as well share this now there's a thing called Eddy can continue that one of the people in the video noticed I wasn't using so as I'm stopping and starting and tweaking this value there's an easier way to do that so first make sure in your tools options here it's gonna be fun where is it you can just type do hammer text editor zamel nope debugging general yes it's in the debugging section so it'll be debugging general and then in this big list you'll see half way down here I always turn this off enable UI debugging turn this back on and then I simply get rid of this show runtime tools and application this is what's on by default anyway so if I leave that on for a moment spin up the application this is what some of you'll get that's black thing here and it's just a bunch of tools so you hover over and it tells you go to live visual tree so you click that and it's going to the actual basically switch over to here to edit things and then you've got an able selection and then you can select you can see you can visually select if you're wondering what that is or where there's bubble content is you can click things you've got displayed outlined as in visual you know padding margin or things all things aimed mainly at you I designed so I don't use this and I also don't like it getting in the way of the application both you need the tools on if you will in order to be able to edit things on the fly so what I do you can leave it on like that but I just simply turn off that one and leave this edit and continue checked so so long as that's on you should never be able to run the application and then you see this margin here we added as five we should just be able to go back here type 50 and save the comeback McKinsey's moved so if I were to change that to zero I'm not rebuilding it's still running you can see the orange bar at the bottom and you can these live updating the UI so it's just that quicker for if you really want to mess with appearance on the fly I don't personally use I don't know it's just more of a I find it a bit more it's not really longer it clearly is quicker but something I've just not done I don't use so it's just not something that I'm you know used to using so you'll probably not see me using that as much as you might know some people but it's not trim for you to use you know as you see first interview like it's just that I don't generally use that feature but it would be really useful in situations like this so that's that I'm already can continue feature basically so back to what we were doing we've got this menu now there's pop-up menu that's here ready we haven't sort of bound it or created any way to to fill it with content yet but we just got the UI there next thing we want to do then is really animate this just like we animate everything else we want to animate this up and down I guess so when you click this it animates up and down so we'll start with we have properties attached properties for the animation I think animation framework animus is a huge class name framework element animation attached properties and then here we have animate slide in from left which is what we used on the side menu so we can just attach a attach property to an element like the side menu we simply attach this to whatever we want to animate and we bind it to a boolean that hides or shows and that's what hides and shows this side menu so we want to do the same thing it's really useful we're going to make a new one for animating up and down so we copy and place this animates a element sliding in from the left on show so it sliding off from the bottom on show and sliding out to the bottom on hide so animate slide up slide in from I guess actually we keep the names of thing it's sliding in from bottom isn't it so it's sliding up basically and then we want to make sure that is also the same class name there inside the property and then on the animate we need now slide and feed in from bottom acing so in fact let's just f12 into the first one and then just collapse all this so we've got slide and fade in from left slide and fade in from right slide and fade out to left so really these are sort of we should route these better there should be a region with a slide in from left sort of a pair have you LD you've gotta have a matching pair so slide them fade in from rioters obviously another one move that the women that will go below so that's the slide in and out for the left and then we've got the right that's a better organization so now we can just copy one of these let's take the left as an example paste it down here slide them from bottom which means slide up slide moment in from the bottom I'll also notice that's the wrong comment there slides in elements in from the right from the left slide them out to the left that's right so this is sliding from bottom slide mark in from the bottom the same high in this case and then the width needs to change to height because we're going to often down this time the animation height to animate the elements height is used then we have slide and fade in from bottom and that changes to height we got a storyboard and then we need to go another level deeper now we need a new storyboard helper add slide from left we need to change to press f12 and then in here we want to I guess group these again and do a slide from bottom so we have a slide from left slide from right slide to left to right so these are really two and from left and right so let's group these again sliding two from left from left to left and then this will be from and to write or to from right and then we've got the fade ins this is just tidying up the code these regions just simply keep things organized or copy and paste the slides in from left taste it below here slide to from bottom and then we just need to rename everything again I've slide from bottom attend the animation will take the distance to the left to start from the distance to the bottom to start from it's the thing right here in animation add slide from bottom so this means basically you know sliding off it's sliding from the bottom and the way it's going to go is obviously off because it's it's going away from the bottom everything else in there looks ok so we make an animation and here we originally moved from the left and if we wanted to keep the same height we offset the right to the opposite so this time the left stays the same the top will be whether we keep the margin or not the right to the row and the bottom is the margin so we simply flip that around to be you know adjust the bottom margin and if you want to keep the height then you know animate the top margin at the same time and that's all that is there that's the whole function and then add slide to bottom so sliding out add the slide to bottom on the animation a distance to the bottom to end up whether or not they keep the elements high and then again same here left of zero sokka's kept right at the bottom Islah left top right bottom yeah that's it so that's now the slide to bottom we go ahead and add the top as well to and from the top I won't do it in this video yeah I think we've done enough mundane copy/paste off here so now back to the framework element animation plus slide them fade them from bottom we can now add instead of slide from left with an add slide from bottom add slide four and that's the wrong comment in here again I'd slide and I didn't let slide from right we just kind of once we had slide to left really makes more sense and I've slide from lefty under comments are not quite right from the copy and paste previously so add slide from bottom which means slide in which is right and the it's either the height you specify if not then it's the actual fact not the actual width and then we fade and there's normal we begin and we show so that's all the same so that's the slide in from bottom and now we need the slide out to bottom so let's just sliding away this is all the same as the last one just updating all the comments and renaming a little bits so we have add slide to the bottom now change the comment add slide to bottom the height otherwise it's the actual height and then fade out something like this that's now the slide out to bottom slide in from bottom animations done so we step up back to where we were here and we finally get back to the slide in from bottom attached property so now you want to animate in you want to slide in from the bottom because you want to come up it turns us to slide in from bottom and when you're sliding away slide out to bottom and that should be it so now we've done an attack property that we can attach to this so we do local hold on animate slide them from bottom profit up value equals true we can't do much there we need to buying this really to see it happening but what we've already done that so we already have the binding set up and ready to work and it was the attachment menu visible property and we just need to convert that actually we don't need to convert it because it's a boolean in this case so I think that's I don't from about property SS teachers needs building so now when we click this it should hey there we go animate so animates down so there's our nice little attached animation of like a you know an attachment button that pops up and then nothing you know it doesn't close when you click away which is is what we want really you can always tweak that you wanted this to close when you click away you can just bind to do an import binding to like left Mouse on this entire grid and then attach that to a new command and in that command you could simply constantly set you know all pop-up menu boolean's to false but we don't want to do that for hours I think this is how we wanted to act for now obviously when we click something in here we'd hide ourselves so we might have that function so now we've got the basic menu hiding and showing the pop-up which i think is really nice let's go ahead and make this a usable control now so right now we've got the bubble content which is fairly hard coded so we have the background pod set to a live brush we have all the sizes that we have the text just hard set this is not really usable as a control so when you extend a user control and you want to say provide the ability to change this bubble color you'd have to use dependency properties which I really dislike so we have to use a dependency property once so far I can't even remember where it was just a search I know we have to make one somewhere um Paige host so we did it for the current page and you can see this is all just for making one property just called quorum page and all we should really have to do is do public base page current property gets at but instead we have to do all this extra which I just really dislike and that's just the way that WPF usually works so instead what I'm going to do is I think will it have one what do we even need that let me think us through and I'm going to use the data context which is already something we can set it's kind of the point of it is that and I'm going to sort of use a view model for styling of the entire control so even though it's a view model and typically you wouldn't use a view model like this that is the point of software development you don't just stick to a specific workflow and never deviate from it just because that's a workflow so you might get people say no well this is this isn't what you use mvvm for or you know you don't use a view model for that but that's that's where you get bad development because then you're limiting you your knowledge in your capabilities because you're trying to you know develop something in a certain way instead of developing the product how you want to make it in the most efficient way so all the view model is really as we've described before is if we step down into it it just implements I property notify change and that's it that's really all for the most part what a view model is it's about notifying its listeners of changes so that's ideal for us because we want to say create a view model and we'll bind the whole thing to this view model including like the background color and everything and then when we come to create a specific bubble content like an you know an attachment bubble content also we've got to do is make a view model an attachment menu model that we bind to the bubble content and that then also fits in with our background view models where say that menu popup menu comes from I don't know the internet or something say you were pulled in some information from an outside source all you need to do is make a single class an attachment menu view model class and bind it to this bubble content and your whole menu is constructed for you so instead of doing dependency properties we're going to make a view model and let's just see how this goes we've not done it yet but I'm sure that'll work so because this is UI dependent view models typically aren't again that's where I'm saying people all say well this isn't a view model because it's bound to a view it doesn't matter it's calling what you like you can call it something different than a view model we go to user control model I really don't care it's basically the principle is we're going to get some easy binding to our control so we're going to make it in the facetted awkward application similar to this window view model again kind of breaks view model procedure because we're passing in a hard-coded UI element here the window so that's that's you know if you're will an issue it's not a true view model but that really doesn't matter for our purposes so we're going to go ahead and just make another view model in the WIPP peseta word application project and we'll call this one bubble content so let's make a new class bubble content view model and we will make that find their to be able to enough well now let's make on bubble contents because we're going to have a design model as well so we can basically design this will be a public class get rid of all your new stuff implement the base view model comment this class then we want I guess we'll start with we need a background color for the bubble so we can change the background color so let's make a region this will be a brush now that is a media brush or is it a media brushes any option so make a brush and we'll call this and then a bubble background and that's now a bindable view model property the background color of the bubble we then also want this is going to be a Content control so we can actually have a control that we can then you know filling with any control that we like a must be called content content of the bubble and we'll want because I can already see a need for aligning this arrow to the rag for when the popups on the other side and potentially in future top and bottom so we want for now our horizontal alignment and this will be arrow alignment I think that'll do does the public properties we probably want to well we do want to set things up by default so let's just do keep can't remember to use this in your region command constructor and comment so we will certainly fall values on the background colors to be and the application current up find resource and we set it to foreground white brush and that needs to be as brush so that will then become what will do the binding after so got that color the contents is I guess for we're going to want any default content now we don't and the alignment we want to be left so a low alignment equals left by default so that would be our bubble content view model so we can now bind in here we could bind it to anew bubble content review model but we don't have that yet anyway we haven't created that so we could create that in a gas eagle place would be in this view model because this wants to then bind to it so with our public property probably bubble now then no that's the only place we're going to get issues here is we want to we want to set this menu based on another view model so we need a row well do we actually construct the content no so let's tweak this slightly because the issue we're going to have is the window that this is bound to has a view model that's in core it's a proper view model that needs to be able to set the commands for the attach and everything else the menu still needs to be in a view model both we're styling the UI based on another view model so we need we need one dependency property for the whole controller in that case let's justify in fact yeah fancy I know what's going to happen in my head I know it's going to be an issue in you know coming forward so it's just add this now and I'll explain as I'm done why so in the bubble content view model which is in the UI you know the peseta word application we need one dependency property and we'll call this basically the UI so I can call it UI view model you know why not and this is going to be the bubble content view model and this is going to be purely for the UI and then literally full of style in this bubble and nothing else so we could take that from the base view model see the reason we couldn't as a control there although we could convert that using a converter to a control a brush is going to be sure UI an alignment is also going to be left or right I don't know whether we even need to keep this outside of I think we'd actually convert this to convert this to a you a proper view model and simply do value converters to get your control and things I think we'll do that so scrap that idea let's delete that let's move this into the actual view model folder so in the core project let's make yeah there's a thing yeah because at the point of the view model I guess is the attachment mean if this is going to be a there's going to be very specific to attachment menu it's like a pop-up menu need a basic view model for any kind of popup menu after all we need so top of menus towards call it pop-up menu then we'll have drag this in for now you look at that one popup menu we need a base popup menu so this will be base popup menu view model this is going to be for anything that's going to have pop-up menu there wants to be styled so this is a view model for any of menus you can see now we can't use those to inflate and go so what we need is the background in this case can be a string and it can just be you know an RGB value I think it actually use a color in core know so we've done RGB before and the profile picture and we're just literally specified in an alpha RGB so let's go ahead and just do the same thing there so let's just do a string the bubble background in RGB value in fact we call on a RGB value just so it might work both ways book now that is capable of being in core and we can use a value converter to convert it to a brush the content is not really going to happen yet that's going to be in the specific view model types so in the UI we detective it was the type of attachment menu a view model and in that case we'd then create a new UI element so basically just delete that content for a moment and then alignment is a UI specific thing again so I don't think we've got anything alignment of left or right our way so we're going to need a no we haven't so now we want somewhere to put this I guess data model hmm data model is a good place so in the data model that's making you one for don't know why would it be left right center so because we can't use horizontal alignment without having namespace issues we will call ours elements horizontal alignment this is really just a clone of the WPF alignment so it's going to be an enum and this is going to be and numerator for double the Waggoner horizontal alignment values for M elements and we just pop back to anywhere in the set a word application I just see I was on to Lyman's death in and let's just clone it so paste ours in and that's actually comment this line to the left center line to the right go for it another beauty of that is we can use this in core and we can also just directly convert that to the WPF horizontal alignment value so we've now got the alignment of the bubble in here we now have the default and this is somewhere else that we want to improve so right now just for quickness I don't want this video to drag on too much in terms of moving things around a lot as opposed to doing the work we have styles and colors here in the top-level application we really want to move this down to the core so that these are inside the core application and then we want to bind them you know bring them up to here so for now just for again quickness we'll come back and tweak this after let's just take the foreground light brush which is ffff it's just basically white and for now we'll just set it here which is just RGB in this case and so we're warning I think he's just thinking I'm doing something that shouldn't be so the backgrounds going to be white and we'll even put a note here to do move colors and to call and make useful here and then the alignment will now be element alignment left so now we have a true view modeling core and it's called a bubble content view map with a minute lessons going to be changed to a base popup menu view model and rename a construct to the same and now with that we want to create the first additional one so that's the base so copy and paste that and let's rename this to page pop-up menu so this is going to be chaffed attachment menu popup menu I don't need popup menu just attachments popup menu view model and I mean in that constructor the same implements base pop view model so we don't need the constructor but we probably do afterwards but for now we don't and we've got no additional properties right now which we will have again we'll end up having like their actual pop-up menu items so now we just got this view model that's in core that we can now bind to so all the way back up to bubble contents and in the bubble content itself we wanted a dependency property so let's just yes I can never remember the original dependency property we did here copy this paste it here and we'll call this a UI view model I think that what we're going to do we're going to bind or are we going to have this pop up handle specific types and just simply bind to it yeah I think we've simply bind to it another s handling the specific instances that's what we'll do so we will bind this data context of the whole thing which we won't do it here we do it here let's disappear down there it's animated so at this level we bind and there we go so now we're back to the chat message list view model and there we go so now what we need is and what we can now get is a base in fact we don't even need the base we know this one out it can be in a chat attachment pop up view model so this can be attachment menu view model for the attachment mailing and for the most part this is going to be just the one popup menu it's almost hard-coded in core but it gives us that flexibility so now we're going to attachment menu I'm guessing we don't create it anywhere so let's make a default just make a default many of which is fine attachment menu there's a new menu and that's now got all the properties we need we can now bind to attachment menu so in the chat page we can now make the data context of the bubble content the attachment menu so now that's going to be bound finally to our attachment pop up view model and then to get the same appearance in here visually let's make a design time data context of and then in that case we also need now to make a chef application pop up my new view model so chat application popup menu design model and make this subfolder called design and let's just nip one of the chat application design so inherits from the fact we can just copy that entire thing for now yeah having that half wrong place to leave that the top Rangers for coffee and paste in a moment this we don't need to do anything with delete that such as a design model and copy for the Amato and as a singleton instance of so with the probably base class this little design model thing just to have it an instance automatically and make a generic class but again I'll do that in another video so we just created a design model that is just a right now to the copy of the view model so now we can do a design time binding of think just local call or not instance is that right just chef holes than before yes that's what we do we just do it all right so it's a static not a binding obviously and what you complaining about now yes it does exist and get this need a building or no it doesn't exist it's in call isn't it X um namespace for equals core there we go yes it does just build and see how that goes away why this is complaining they doesn't exist to any dos because I copy and pasted from that's a point we have the wrong name space on one of these somewhere and I just didn't copy and paste a namespace oh yeah so make sure that namespace is right and I'm just going to share we might need to clear rebuild and run there we go so we now have a chat attachment popup menu design model which is an instance of this which is an instance of this view model which has basically just these base properties now so let's first try and get this herbal background to bind so for that we combined this part now to bubble background and use a converter of string RGB to brush now that's gone white but that's not very promising because it was really wide so let's change it to red that's rebuild and this should change to red there we go so we know that's now working with now what a solid bind in there so let's find that - the same whereas the viewlet here the fill of the arrow just rebuild make sure that goes back to white and now the alignment which is somewhere there this needs to be found - the arrow alignment and then we need to I don't know that will actually work by default it might automatically because the enormous an integer that might already work without a converter let's try changing that to right and then build nope okay so we don't need to convert that which is quite annoying because it is just an imam of the right value but never mind so let's make it convert us in that case Valley converters application-based time red convert a copy and paste any one and we'll have this and just pull a horizontal alignment converter a converter that takes in lead core playing on two alignments enum and convert it to a to the P at alignment all this go and just quite simply return and we should be able to just do a hard cast that maybe I don't know I've run the thing i but i just broken in let's see we've broken something else at the minute so at break points I'm guessing all of the hits on Tanya let's roll and see what we get and if this fails or whether we just not bound at all okay we're not even bound at the minutes that's the issue there oh yeah we didn't add the convertor that we um convert Italy Falls horizontal alignment converter oh I go and it's working because we can see it so all we need to do is return the value and the reason this works is because we copied the exact numbers from the horizontal alignment enum in Windows and they aren't going to change that they're rock solid if they were to change we'd have to do something in here sort of first we get the value like raw real value equals elements Howie is on for alignment value and then you'd say like a switch on the real Val and in your case if the real value is left we turn horizontal alignment are left and you do that for every value and sort of switch against it but because our value is exactly the same we can literally just cast one enum to a different one because all the stores just take the value which is by default an integer not an enum it comes in as a number we can just cast that straight up to that value so that's all this converter does and that gives us that left that right appearance there if we change that back to the left and build that should move to the left so we've now bound that to a core view model which is right and then let's see if it all runs now can we get the animation okay so we still broke the animation somewhere so let's try and figure out why that's stopped working order some attachment menu visible okay let's just remove the data context for a moment see if that was a cause of the issue we might not see anything now though oh there's a point oh that kind of did break it but I think I know why so or do I data content is attachment menu and behind the scenes we have attachment menu which is nude up as an attachment menu so we have the attachment menu which is a default which has all those values let's just remove the visibility okay so shown that fine and then as soon as we offering animation n seem to be losing that so something to do with this let's see change up to true for a minute okay so we've lost something here case is the actual value so some reason that's attachment menu visible is no longer correct into that attachment menu visible and we toggle it there and I go from false to true to false rather and we're just not being animated in okay oh I know why staring me in the face so what we've done is change the data context of the bubble content and then obviously then trying to bind to what what I'm thinking is because we're now trying to bind here I think somehow this data context is over than this value even though you know in this scope technically right here we're in the scope of this control I think this is sort of overridden the value so what we need to do is set the source of this to algs and bubble up to the base page yeah let's go up to the base page because that's where the data context is all in this Court - when we just go up to the grid itself let's just try and go up to the grid I don't mind going up to a generic class so relative source as a relative source Unser's the tie is bread no okay don't mother there's nothing I'm fine done sister mode oh you're going to set the mode as well I don't want this previous data is under the laps rolling into Atlas stick to find ancestor wealthy source is nothing find unsystematic come on what did we do here relative source okay that's all we did before answers the tight bread and do anything else so we've done this or is that where we are right now wealthy source self mode is find ancestor type is red okay we haven't done a step up before but we'd already done this in order to find or is it not relative sources at the source maybe new um okay it's relative source they just not but that may be fine ancestor great and we might need to go over both the grid because it's actually on the page yes let's go up to the page so local base page chat page but I would have thought this a tab and I'm pretty sure this is the issue though this is overriding this animation binding change this to shot page I'm pretty sure that should find the view model on this page and get the value no really so something that's messing up this you remove the data context let's see if that still works oh that's finding and then I think we might have a slight bug in the binding okay so that actually doesn't work that's not found it we'll figure this out in a minute so just to make sure this still works yeah so that still works with that binding so we need to change this back off to finding the binding of this page so this should have worked this relative source find ancestor yeah should've worked and that local chat page should have gone up and that goes away when you build mmm double check we're going to hear get a base page and the constructor we set the VM ow we saw the view model hood inside the data context we actually have a practical view model after the issue so what we'd want this should all work what we don't want just that we want you model dot that I'm thinking not have to put one of these in brackets depending but let's see finally there we go so now we know we bounced back up to our container chat page and rebind to this so now when we put the data context in it's all okay and then that's something to note in future there we go finally that was a good bug hunt so the issue we had here was it seems that when you bind the data context to a property or to anything here if you then add another binding on to this actual control itself like a binding here it's now going to be relative to the data context not to you know the container that would normally be the value so what we've had to do in this case then bind to the original attach menu visible is to do this relative sauce which basically now will steps backwards of this tree so it starts here and it goes up to its parent which is the grid and then basically keep stepping off until it finds what you passed in here chat page so let's step up to the grid and it's not a chat page or step up to that grid it's not a chat page if steps up to here and it is a chat page so then it finds this and this is now the source of where we start to try it to bind and then based on the chat page we look for view model now we go to the code behind the chat page as a base page and then we go into the base page oops wrong button again there we go Rapids gone now so we go into the base page you can see the base page has a public property of view model so we then bind to the view model on a view model is the type that we pass into the base page which is chat message list view model and then from inside that we then get back to the attachment menu visible so long-winded way of doing that is just required because we've changed the data context of the bubble content and when you get around that again by a dependency property called maybe something different but to be honest for the sake of warned binding to animate I'm okay doing that so we've now bound a bubble content control just a generic pop-up control to an attached menu view model which we can now tweak we can change the color of wicked so if you want just the attachment menu pop up chat attachment pop up view model you want just the attachments menu to be read and all of us to be something else then in the constructor you could change the over background to a red and now the pop up for just this attachment menu will be red and then obviously what we're going to do past this now is going to be to finish it off and make the actual attachment menu for the content inside and we're going to do things like attach a file from a computer or potentially take a picture or something like that so I'll have a menu in here and we need to keep with the view model binding so this message text is going to be changed to a Content control that's going to be bound to a property probably inside this bubble content were probably going to make this control itself capable of handling specific view models so we might make it capable of handling either the attachment view model directly and then spinning up an attachment view model showing the attachment menu user control but specific for you know that control which i think is what we'll do and then inside you know instead of putting it inside this control will have many UI elements that are going to appear inside so again it's hard harder to explain than it is to do so we'll do that next I think we might jump on - I'm just thinking ahead for the emoji that's going to be a really really really big girl mainly because of getting the emojis inside a font or inside here and you can paste an emoji in but in order to understand fully what's going on I want to really delve into binary code and file formats and ASCII and utf-8 utf-16 Unicode all those types of file formats I want you to fully understand what's going on there before we move into strings that because these are effectively emojis are just basically Unicode characters in text that's why you can paste them and they can appear in emails and they can appear in here and things so I want you to understand that before we do the emoji so I might do a few videos on file format otherwise we'll carry on with this popup menu and we will fill it with an actual popup menu and then we could move on to say this drop-down which will be a bit easier as well and then we'll jump onto this popup I'm guessing again any thought or any anything that's a stand or anything you want to see in the next video just let me know we can always change what we're doing next but that does my thought is that will either do file formats or will carry on with this popup menu content you [Music]

Channel: AngelSix

Views: 27,487

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

Id: LwQft_4sEqc

Length: 76min 19sec (4579 seconds)

Published: Sun Jun 04 2017