C# WPF UI Tutorials: 10 - ItemsControl Chat List & Design Time Data

[Music] in the last video we made this top title bar the buttons to go between I chat users picture settings I made that here so we just press that five to run you'll see we made this nice little bar so in this video we're going to make this chat listed beside so it's going to be a way of making another custom control in fact I'm not sure whether we've made a custom control yet yeah we made a side menu control so we've made a custom control in the last video we're going to make another one for a chat list item here and then another one for the list that holds all of those as well so again it's nice and simple we'll just right click on the controls folder make a new one inside called shut and then we'll just make a new user control and we'll call this shot list item control and based on some feedback from you guys have turned on to dark mode so it's not all bright white I've also made this font larger still so might be still want even bigger font so let me know what you think about the size hopefully this is a got the right size now we're just going to change the name space that visual studio does by default which is to include all the folder names which we don't want so we just remove those get rid of all the unused stuff and there's a chat list item control so this is going to be for an individual item like this one so first you want the eye let's set their size up to something realistic so the height will be about I don't know 66 that's about right zoom in a little bit so the background have the grit we'll start with the foreground white color if you'd like and then we want as always we want to figure out whether we want stack panels or grids so in this case we've got a little red line which will indicate a new message then we've got the profile picture and we got some text so initially the overall container we're going to do a grid with this being whatever size it needs to be this being whatever size it needs to be and then this to fill the rest so that we go this way across so it's a single column so a single row or three columns so we want to do grid column definitions column definition first one is auto next one's Auto and third one is fill the remainder also commonly so this is new message indicator bar something like that this one is profile picture and this one is main content I know the first thing nice and easy let's do the message new message indicator bar so background for now we'll just do red whip we'll do five it's already in column zero and there you go there's the the red indicator bar comment that again and we'll do the profile picture next so profile picture is going to be a boarder with a corner radius and then a border around the outside of that to give me the padding so on the outer border first it's going to be in column one which is the second column and we're on the padding which will do say eight and then inside that will sort of mean the thing that's going to be the background color so we'll have the background will be for now we'll just use the blue color will change this as we go the corner radius wants to be basically you need to be fifty percent of the width or the height so in fact my personal deal will make the width equal to the height again so that will be the binding actual high relative sources relative source self and that'll force it to be a permanent square and then can see we know what a square that's colored and all we need to do with that is corner radius you could do we know this is going to be sixty could reset it there so basically you need a corner radius of 30 and it will go all the way around doesn't hurt to go bigger like sixty so all's we'll do to make it always round is find this again basically bind it to the actual height again so that you're going to get a corner radius that's twice as large as it needs to be or WPF by default the officer doesn't go any further so it stays perfectly round and in fact inside that border then we now need the text block with some text let's say L M as the are lamp it will make it vertically Center horizontally Center will make the foreground the white color and the front sighs wants to be I think large is going to be too big yet so we need a new font size let's press that twelve on font size large to jump to the fonts zamel we've got small large regular so them in order of size I think well I've run in between small and regular call it average resting on the best of names but it'll do change that to original see that looks about right LS that's a nice size I think what fun wants to be a bit secular try and regular there we go sup sir it's pretty similar so profile picture padding background unless is initials and then will override Destry once we get the actual data from the web server on we've got profile pictures which is a long way away we'll then come back to this and make this like lazy load the picture and overlay this so by default until the picture loads you'll see this but for now that's all we'll see anyway and that's the circle thing you done profile picture and now we want to do the main content so this is now this text so what we want to do is I guess we'll of a stack panel for the two texts and we'll just float that vertically Center so that whatever size we make it I'll just stay central so I think we want to start with a stack panel vertical align Center get some text in there make sure it's in the right column yep that's the back on so this font family needs to be thicker I think we both want to be that this is the name this as message this new track app is all awesome so I can see I'll finish this one first possibly the first Asato opposite oh yeah set the blue no word blue whatever we called it would blue oh yeah and this wants to be slightly lighter we need to come up with a better name for these colors as well because they're not really very descriptive at the moment so that's okay just a faded gray now you see the issue here when it gets to the end it's not finishing it just like the woods going away and cut enough to do that nicer you can add text wrapping it exfolia text wrapping no not text wrapping text rude rule what we call it creamy so on character ellipsis and you'll see that it finishes with the dot dot we'll put that on both I really also want a better parting at the edge here we've got the padding from the board the thing they're already of eight so we'll put eight this side as well so let's just add adding a mate there Gil wrap this a stop panel and a border to get the padding move the column to the right place we don't want padding all around we just want it on the right so left top right bottom oh yeah that looks not far often to be honest that was easy so there's our chat list item control will tweak things and finish this off in a minute but now we want to make a list control that can see that or we want to just quickly take a look at that let's go to the main window in the side menu control let's just build the project first make sure it's all okay that we haven't screwed anything up yeah that's fine so in here the locals shut left item control is just going to grow inside the mouse just force that the height of 60 for the moment Oh so something like that plus f5 let's see what it looks like and now that looks really nice compare that to what we had so this is larger but that's pretty close in fact it's almost pixel perfect so summarize that now we need to put this in our list and we also will do the hover effect and that afterwards so we get rid of the chat list item control now what we're going to do is make another control as is taken nowhere near as long as ability or I thought it was going to be a really long video cut less control now for lists generally of any kind you've got a lot of options well young got a lot of options you've got a items control which is your lowest level virtualizing collection so basically anything way but you know a list of things your lowest levels your items control which doesn't add scrolling technically both teachers wrap it in a scroll viewer and you've got scrolling you go one up from that and you've got something called a list box and our list boxes inherited from an items control and as the ability to I believe select items and then up from that's a list view which has a few more things so we're going to stick at the lowest level because we're going to add all our own selection mechanisms and styling and everything else so we just want to pure fundamental basic collection to host these chat items so just clean up the name space again as usual that's that and we will have in here start the on the background there's big white background really zoomed in as well and then in here as we mentioned we'll need it to be inside a scrollview er otherwise it won't scroll with it being a basic items control well the scroll bars to only appear when we need them and then there we want an items control and the items are screen full item template so the things that are going to be inside of it which is a data template is going to be the chat list item controls so it's basically a just an items control that has a load of chat list items now in order to see that here visually we're going to use data binding when you use view models so we need to actually start making some view models for this so the new folder called shaft then let's add a new class we'll call this chat we'll start with a chat list item view model so the model for each of these and again you can change this as you go so you don't need to overthink it just add what we need right now so we've got a view model for each chat list item in the over view chat list it's going to be a base view model and it's public and we're going to have a we need a name for this we need the initials for here we need the message here start with that and message initialize initials we'll need we'll need this color as well because we're going to make this color up we're going to make it random so the other thing to bear in mind is while I mentioned before these view models are going to be moved out to the WPF project as it grows so these are going to be like a universal class so even though these are going to be bound to views you can't put anything in here that's relevant to WPF so like this is going to turn into a brush for call this background but we can go ahead and put a solid brush I think this solid follow brush or something so you don't want to do this you don't want to start including WPF namespaces or objects like this because this is not going to just work for WPF this can be moved on to Android and iOS and all your other platforms so in order to get a color we're going to keep it as a basic color so profile picture red green blue and just a string and then what we're going to do in WPF is convert that with a value converter to then the WPF brush so never put anything in your view models that relate to an actual UI like you know WPF and I mentioned before as well we actually did it here where we passed in the window which is not usually what you do is it but like we mentioned this view model is actually specific for WPF so that was the exception there but in general you view models should have no link to WPF and that's why when we move into another project which I think we'll probably do in the next video into a core project it doesn't even know about WPF then you won't be able to make that mistake anyway and so profile picture this is the RGB values in hex for the background color on the profile picture example FF OFS for red and blue mixed and I'll do for now again don't overthink these just you know make them and go from there then we'll jump back one we'll go back to this so you can see here I've just typed this obviously this is no good because we need to data bind so each of these items is going to be data bound to a chat list item view model so we need to then say change this content now so this a line would have to be fine in two initials which is the name we've just given the this view model so it's this and then you can see here now it's disappeared so it's okay doing it visually and then binding but then you've lost your value and then as a little trick you could do here do fallback value and you can put a line back in so you could then visually see what the issue with fallback value as it's there in case this fails or there's no value I think is if this fails and then there's a no target no value as well when there is no value or the issue I don't want with fallback value is that if whatever reason this did fail the users going to end up seeing what you write here in the live application so you want to do that so the way we get around this is we're going to get this bound so there the list is going to bind these controls so these are going to get the data they need but in the design and now what we'll get out here we can explicitly we could actually set a data context here and we want to make what we'll call a design model which is basically just the this view model just pre-populated with this you know design time data summit for us to look at when we're designing they'll call us design models I'll just call it design for now and then we'll go check list item view model so we'll add another class cut list items design models clear up the namespaces how much visual studio wouldn't do that this is a public class the design time data for a list item view model and this is actually going to inherit from a chat list item new model and all we're going to do is create a constructor so ctor double tab so press the tab key twice lota matically create this wrap this in a region comment so then when we create a new version of this we want to fill in the initials equals LM and name equals loop message equals let's just is awesome profile as it called profile picture RGB equals and then we want the this college is basically for Seto blue so we'll we'll use that as an example for now which is in in Styles colors and while we're here actually we've got the blue brush we want a in fact if we've got a light blue brush as well which was for this but then this is even lighter so we've got a very light blue and the very light blue I've written down from Photoshop somewhere is DC f6f B that's a very light blue so we're going to knit this blue color for our RGB value here and that's it so now we want to be able to make use of this design model at design time so in here visually to get you know this information back so the same as the text here is going to be binding to name and the text here is going to bind to a message so you can see this all disappeared we will data bind but we need to date the bind to an instance so if we just do on that this is a basic singleton so what a singleton is is when you get a single instance of an object so literally means a single you know a single version and this is a kind of a singleton so it will just be a public static because we want a single absolute statics a single instance in itself a single instance of this called instance and for that we'll just return and I'll go back and show you that this is a property so just a getter that we've I think we've covered properties amount to a video specifically on properties actually and but we've used properties we obviously use them in there hopefully all the view models it's just a getter to get the property counts at it and it's going to return a new chat list item design model so basically it's only ever going to return or complain about our oh yeah this is my up I've added a new things as well but complains at me if I don't use the style that I expect to use so this is virtual error this is my I've got an additive config file that again I'll probably explain that gives me warnings like this because I don't want to do this style of properties anymore so we'll cover that anyway now so this is a perfectly valid now this basically gets you know a new chat list item which is actually wrong in this way because it's not singleton but it does the job basically going to get a new design model it's good enough what we want but instead of doing a getter like this things exactly the same thing but there's a new way of doing it in c-sharp seven I think it is now and basically you replace the outer brackets and the would get every to get only you just get rid of all that and you do equals greater than same as we do for most and I would get rid of those of the back as well and get rid the return statement and then this now is the exact same thing just a shortened version of a property so if you hover over you can see you've got a getter you've got to get a property so if you wanted to do a getter this is like it you know quick way of doing it as to just do greater than equals and then what you want it to be you don't have to write the angle brackets and get so I a single instance of the design model and like I say I'm I'm not really thinking it through too much I think every time you call this you might get a new instance bought for this is only used for design time so if you wanted a true singleton then you would make well I'm not going to bother going and I'll do Singleton's in a separate video but basically just think of this as you can see what it's doing you gain a new a new design model it might not be guineans you know a single instance but good enough what we want so if we bind to this instance now we'll basically just get a new a new copy of this class which is what we want that's the point of what we want at the moment so chat list item design model instance is what we want to bind to so I think you do X traffic chat list item design model dot instance maybe not child maybe just each building yeah just nearly building so you can see we've got all the properties back but the issue here is we've bound the data context like cards this is actually bound in runtime as well so we ran this application with this containing the item it's still there this is actual data in the application then if we run the application that data is there which is not what we want this is purely for us visually to design so this shouldn't show here this is you know our design time data so all you do for making it into showing purely for us designing is that's what this D is if you've ever wondered what this deep namespace here expression blend as a tool that Microsoft made for designing zamel and so the names basically naturally just give the letter D and then they've got some code in the background that basically tells runtime to ignore anything that starts with D so like this design height even though we tell it to be this size here as you saw when we adding it to this list if we don't explicitly tell it the height then it just ignores as a design time so when you use D colon as a prefix it's only ever for this visual appearance here and when you run the application it's no longer there so the same for this data context it's here right now for us visually but we don't want it at runtime so we just prefix it with the letter D : and now it still shows here and it'll still show here so we build just to get rid of that but then the difference is now well actually it doesn't show that because this is more room timing so if we run now you'll see that it's gone you know it's not there which is what we want so we can now visually design here with some content that we add in a design model which we can tell just don't change to say a a nothing just have to build to get that to updates it's a code file and then you'll see it updates here so we can now you know style and mess with this UI without worrying about the user seen you know our dummy data if you will that we're using just for visual design so we call this design model we kindly made an instance here I've called it single things I'm used to doing that I'll do a video on properties and probably do Singleton's as well at the same video but just think of this right now as you just get a single and just a copy of this class so it's got to be static as well so that we can bind directly to it here so that's all what's doing we're allowing us to this is a create and copy of itself but in the static you know a single version of it and then here's where we fill it with the data we want and then we're going to do the same thing now for so we're quite happy with that for the moment back and that can be done for now we'll move on to this chat list which is now going to host a list of those items so again we want a view model for that so we'll just copy and paste the chat list item view model a new feature in c-sharp as well I've copied the class you can see down here it's got just a name as copy and up here it's just a copy a quick way now instead of renaming the file then we name in the class we just rename the class and then you see this lightbulb here click there and you can see now we've got the option to rename file to the same name as the class so it says copy right now there and it's the wrong name chat list item new model we click this and it goes ahead and renamed it to chat let's view model for ourselves like a nice feature you can copy and paste a class rename the class in code and having renamed the file for you nice and easy so a few model for the chat list the well the overview shot list [Music] and then this is just going to have one thing right now which is just a list of chat list items new models I've got items and that's it then this chat list again will be bound by the parent whenever we come to do that so it will be bound to this view model but again we want to design here visually and see this list so let's copy and paste the design model of the previous one do the same again rename the class click the lightbulb rename the file this is now a Chuck list view model the design time data for a chart view model single Turner's same class know this class and then in the constructor which is now called this and again i'm not sure what i'm doing here i'm holding ctrl and clicking and that pre-selects a name ctrl C to copy hold keep control pressed again click somewhere else ctrl V to paste so it's like a really quick way if you want to copy and paste a class to somewhere hold ctrl click class control C click say here control V and I've still got control pressed anyway I just leave your finger on control press control B and then click here control V here control V so that's like a when you see me copying and pasting things faster I'm doing it so now in this design time data for the chat list design model so on the items to be a new oh hell on two big names face a new list and the list wants to contain a new chat list item view model yep and then in here we want to now set the name - Luke initials - alum message to let Tyler writing the same message just go to it done I've done this it would have an easier time I don't mind in fact put it copy and pasted whole things and the reason you see me using : @ commas here instead of columns is because we created a new class but then directly at the same time as creating a new class we open my curly brackets and this is like a way of setting the properties on the class in one big line so if we were to do say create the new new + this way and then you do a dot name equals some name that'd be a semicolon but you can see again the style I've made now this code editors saying you can simplify it so it's actually telling us we can change the way this is instant ated to instead of creating the class called a and then doing a dot name as this a dot message is this a dot profiles and repeating yourself for this a dot you can just basically get rid of the n3 open up curly brackets move that inside and then you have to change these two colum comments and set of columns and you get rid of the a dot and then you put your Col on at the end there so again a different syntax that you'll get used to the more you see it but facilitation wondered why I'm putting commas here not colons it's because if you look closely I'm creating a new but then I'm actually opening it up like a function without the parentheses so we have a lot of parentheses you can have them we don't need them and then instead of basically creating a class like I'm finishing I'm directly opening it up and then creating stuff inside so this is like it an in-line way of making the the items so there's that's how I made them if you struggling to understand what's going on there it's exactly the same as doing items equals a new list of items items don't add new chat list item of your model and then enough to break that out as well so far item equals new chat list item and then you have to do copy and paste all this and then again I want to put item in front of all these click here hold the Alt key and drag down and this is where you can select you know an area so hold the alt there and drag down and now you can paste into there and put a duster than everything gets that text so created a new item and then in the items itself you ask the item so and again ignore the studies as my editor telling me I can do it better so this is exactly the same as this but you can see here we've had to create new items then create a new item for each item one about then we're going to set that item off then we're going to add it where is this way with the items is created here just the same as it is here but then we've wrapped this item inside and then as well as that we've wrapped that in the properties of the item inside itself again so this creates a new list and then the side that'll sdcard this item and inside the item it sets up these properties so it's like a cascading way of doing exactly this so this is more likely what you'll see on maybe books and other videos and things it's kind of again gained a bit old now so this is how you used to do it and you can still do it this way but it's kind of there's no need this is like a cleaner way so this item was called I don't know some really long boring name and then you're sat in this property interview a second 50 properties you can see what's happening you end up with this and then of your setting which we will be we're going to be doing one two three four five six like seven of these times up by seven you can see what you're going to start getting yeah really horrible you know repeating code so might not look much doing it this way at the moment but obviously the more you add like now we've made one going to make two three or do three four now we're already you can see that stays nice and clean it's really easy to see and you can just get straight to your data so hopefully that made sense kind of went off on a tangent a bit there so you're going to fill on a bit more of this dummy day to this design time data so a do is healing your outcomes and then this is like a yellowy I don't know well just come up with some random call us for now no idea what call that's going to be but doesn't matter for now for now [Music] and then you serve as well so I'm going to have to do for now again this color was just of a and of a kind of green color say don't know oh five better blue in it that will do for the moment that's three design time data so you've made an instance of it there again so now in the chat less control we can do the same design time only data context that's going to be static and it's going to be Cutlass design models or instance and I think again if we build that should be all we need and we should see three items hopefully helps if you buying the items control to the items so I think is I can sauce roughly got a bat with bound to the instance of this chat list design model but that instance obviously has its this Cutlass V model we're going to bind to the items of this so the items control is going to have them we bind to items where there we go how doesn't quietly right yeah let's run it and see something's not quite looking at but actually we're not going to see that it's designed time only see if we change this to shut less control run this I'm saying it doesn't only what I think they is both we haven't set the size and I'm thinking we've set the color that all the text is there we can see it but the hi it's wrong so as we mentioned the catalyst item control this is design time height only so we want to actually set the height so we want to define the control as a set height of 60 in runtime and that should we compile this you should see there we go that's the height right so that looks better now so there's that so now we just want to change these colors to match the color we've got so to do that we need a new value converter and we need to go to the control again let's control zoom the same and rather we put the color somewhere around here where are there this background color wants to now be bound let's to the profile lower your profile picture RGB but that's just a string so we need to now convinced that shown any converter and that's going to be local and without boolean to visibility converter so let's just go and copy that and creating your converter copy/paste open up string RGB to brush converter click the little light bulb rename the file copy that name paste it into this type convertor that takes in an RGB string such as ffff and convert it to a guest rush so don't come up parameter value analyst is really easy so return a solid color brush which is what we want and there it's going to be a new thing is called a brush converter yep making new brush converter and convert it from and this will need to be string and let's string starts for the hash because all RGB colors start with a hash or a pound as you Americans watching called and then the value we passed in so that will convert to you know hash and then basically all look like that which is like a standard for RGB colors but we don't want to bother keep passing in the the hash all the time and that's all the rest of converting a string of RGB to a brush thankfully because Microsoft made this brush converter for us so now we just make the configure to this and again dot instant players or something just need building out I can't remember what we did with this I let see the instance or you just maybe do that I answer nearly building again so then we got the blue so let's just check that worked let's edit the design time data so ffo also just bright red build and there you go so that's now converting our string to the color so that should mean oh there you go so that's now using the blue the ready color and the green that I made up off the top of my head and the run this I think I left it as a permanent data context so we can see it yep that's looking nice now I think the last thing here let's copy and paste a few more so you can check the scroll works so we go to the design data for it and let's just copy and paste this and let's run that and see what that looks like now you see we know just about start to gain the scrollbar and obviously now let's scroll bar will style I'll make that another video though this doesn't look very nice we'll make it like a nice faded just a blue bar that only shows when you're scrolling or when you hover and we need these to have hover effect as well so let's just do that now so I don't have to change it pop the valve we have to change this up a little bit that's number one because we need a hover effect and right now it's a user control we're just a grid in and we want to hover effect on the grid so even though you can do that I think the simpler thing is instead of having this grid here let's have a just a Content controls to basic you know some content and we'll move the design time binding on for that then we are that will do for that and then we're going to move this into a style of that's just inside this control there is still user control dot styles not style dot resources and then we want a new style so the key I'll just call it content style because it's only available inside this control anyway the target type what the I'll do not with the stacked on top of the typed style target tie is we're going to be styling this content control now which purely holds the content and then inside that style we want property is can wait and then set the value on to control templates at the star we've type as again content control so all that boils down to just being able to paste that grid back in it's messed up our tabs there we go that's all the grid pasted in and then we need to add this content style to now the content itself here so style statically service content style oh yeah that worked so that should have updated maybe buddhic need to build there we go so now we've got asthma zoomed off now we got this exactly the same of you will so it still just looks the same but what we've done now is move the grid into a style and then made the single content control as part of the control and styled it with that and then the binding here but what we've gained now because we're inside a control template which is what we needed we can now add we hide the grid after this we can now copy and paste the same styles and say buttons for mouse over style triggers or wasn't mouse enter and leave now we go so these type of control template triggers so when the mouse goes over change it to this color and you can run a storyboard now straight from the control template so basically just copy this trigger that we did before for a hover effect on one of the buttons paste it here your very description and when you hover over this we want this is what I want to use that very light blue we made and when you've done you want to go back to the foreground light color which is there you don't get in Tallaght sense for static resources inside of control templates for some reason so it doesn't pop up with the name so I'll just copy and paste it yep so have a blue go light target name border I'll add something we need to name it same with your target name border so it's not border in our case it's going to be this entire grid so flawless container copy that and then make sure we're style in the container I think we just run that now we should have hover effects over the color animation blah-dee-blah is not valid for property - oh I know what I've done got the love copy and paste I pasted the brush and an animation as a colon up brush so just get rid of the word brush and there we go a nice little hover effect on hover in between them so that's mostly done will quickly bind this red thing to another property just so we can make it look visually more appealing I like our visual studio keep swapping me windows around every time I close so we have I'm not used to the text being this huge it's really hard to navigate so background red I said background words fine width is their visibility collapsed or ah now that I think we want this bar to come over it we don't want us to push out because then these will be out of line so if we add this you know collapsed or visible then you can see this moves over so we actually want to get rid of this bar and this is going to combine into two but now we're just going to shift this to the first column this to this second column of your well yeah it should have worked oh yeah it has worked we just now need to make sure this is horizontally to the left so this is basically the profile picture in the bar stacked on top of each other if you will and then this looks a bit six make up three so now if we hadn't showed this red bar it basically just cuts into the padding so it's on the same lining we won't sort of offset this they'll keep it central and in fact we can probably he'll examine thin willing to go with four or a four looks too thin still now let's just write actually so four looks good so now we want to basically just hide that when we have a boolean property so we need to go to the chat list item view model allows another property here public boolean new content available through if there are unread messages in this chat so we want to bind to new content available as the visibility so then we binding that converts it is fully into visibility converter so now by default they should all disappear because a boolean by default is false and we haven't set any up know oh I know why because our boolean to visibility converter is by default back to front so we added the converse of parameter option to flip it around just basically state anything you want in there we should probably change us as well to be a bit more obvious the boolean to visibility by defaulted and make it visible so go to all hidden and now if we go to the design mode young model my brains a bit slow as you can see it's 5:58 in the morning so how about three hours sleep hence why I'm a little bit slower this morning new content available is through so we're going to flag this first message as new there we go so I always like how we can do a Photoshop file and then make it practically identical really easily with WPF so we've got the red bar that's now bound to a property as well we've got the hover effects now let's go one step further this is a selected chap so this is like you know the aptitude chat let's make a selected chat stay that color so it looks again just right and then I think that menus done by the scroll bar so that's looking quite good and then we can actually bind to click events and things as we need and so let's add one more property to this item whoops were pressed I feel Evan told you is too early and you probably forgot that set now what we're doing oh yeah it's selected if selectively gets true of this item is currently selected and we'll make the parnell one selected and now we'll bind this to it somehow [Music] you can do it in here copy and place the trigger property trigger data trigger - maybe I can't remember search the data trigger and I will done this and we're finding template append text maybe that'll work [Music] give that go so buying into is selected I don't know those are where they've been the view model it's not actually on the templated parent I don't think that's a work but let's see a property targeting container dealer he cannot be known a Babar I wonder ed it's just that funky background targets that harmless is very light blue okay I don't think that's a work so I think I've done the binding wrong but let's see background needs to be a brush and it works oh yeah well I still owe again it worked but yeah my mouse keeps appearing over the exact same spot let me leave the mouse up here so you see what's happening is it's set there now so the panel is highlighted but as soon as go over then this event trigger here is is overriding this one so let's see if we can just move that above as like kind of a priority maybe or whether we need to do something to prevent as Mouse leave from overriding that property yeah so we need to do something to prevent this when it done to prevent this event trigger overriding this value so we could either do two colors which we don't really want you know overlay another color on hover actually it's not bad idea because we might want the background to be different than the selected color let's do that so we've got the container right now which we're covering here and then this background will change to for calling background because then we can have a background highlighted one color but when you're Harvey you still get a hover effect so we have this is a container which is going to get the background of whatever color will wrap this and that will wrap the entire thing in a border with the name container which will get the color of the mouse hover which way around we want it want the mouse hover to go over the top don't we so now all the way around this will be the background which will get the color of selected and then there we go so now the background which is here that you can see if we set the background color to red notice you can't see because the containers got a color so we got rid of the container color you can see there so by default and move the background color off here to there I'll leave the container empty and then what we need to do is just tweak the tainer when you let go instead of being light to basically go to transparent so that it disappears so I think that should work now it's one way again around the issue anyway there's poor now Oh cannot resolve all references and background color we haven't set the color so because there is no color backgrounds nothing is no it can't set the background color so we just need to explicitly set the background here to transparent so that it's got a color so that it can change the color of the container otherwise there's no color to set there we go finally so now we've got selected and you've also got a hover so we could change those to calls around every wanted in fact doing you just see it slightly you do get a visual effect even though it's technically the same thing so I think that's a that's a good way of doing the chat so far we've now bound the selected the new message all the details will fix the scroll bar in another video and then as we go as we progress and we get data coming into here we'll have maybe like three ellipses appearing here that you can click in a menu slides out over the message with options to like you know delete or reply or ill did the message options whatever we want to do with the message and then I think we've got this will do next as well the you know the main chat bubble screen and about this will be a huge thing here that's nice on a human little tax box here I can tell you from past experience there's going to be so much involved in this one control you wouldn't believe how much is going to go into this so this is what we going to be like three videos long to get this right message box so probably do these bubbles first cuz that'll be easier and this box up here but hopefully this video has been useful again and hopefully the text has been big enough this time let me know what you think about the size of the font and I hope you enjoyed [Music]

Channel: AngelSix

Views: 48,219

Keywords: wpf, user control, itemscontrol, custom control, list, chat, mvvm, tutorial, example, ui, style

Id: iFL4XoS627I

Length: 66min 2sec (3962 seconds)

Published: Sat Apr 01 2017