C#, WPF, and MahApps - Material Design in XAML

okay and there we are so hey guys welcome back again we are going to do more material design in zamel tonight my goal tonight is to start in on the ma apps updates because it's been very apparent that us lagging behind in support for that is causing some grief so my hope is that that won't take the whole time but we'll see how it goes I do apologize for my tardiness and not necessarily getting to everything I've been trying to be as active as possible but I've been teaching at a local university and so it's been consuming more time this quarter than it otherwise might have so with that said we are going to struggle through my apps because I I do not know my apps very well despite the fact that this library integrates with it and despite the fact that I use it on several projects where I work so with that said I cannot claim to know it very well and I'm sort of anxious to dive in and look at the two Oh changes that are coming and hopefully get our integration library updated to it so with that said let's flip over here [Music] okay so I have just blindly downloaded the the latest mah apps source code from their development branch so I just pulled it down grabbed the latest stuff and we're gonna start kind of poking through this as far as I understand it most of the changes that are breaking us have come from the fact that they've standardized on their brush names which is great I actually kind of like the way they've organized it with a dot structure and just to try to get everything in in a semblance to where you can kind of guess what the the names are going to be I don't know if something like that would necessarily work as well in this library since we're sort of somewhat coupled to the way material design names things but I'm not I'm not opposed to that so if people have strong opinions I'd love to see an issue open and discuss it so theme like dark accent colors the demo app works just fine so the real question then is given all of this stuff we've got all of this the dialog stuff the window stuff cool window with glow so you can kind of see this little glowy effect around the edge cool cool cool Interop ooh hot reload available need to play with that and see what that's all about and cool so this seems to be up and working so I think the next step is I'm just going to pull in the updated package on our library and go to town on it and just see what breaks so for those no no Visual Studio down so for those of you unfamiliar with it inside of the material design demos folder we've got a couple demo apps the basic material design demo app which gets set up and bundled and zipped up every time we do a release and then we've got this ma apps dragonballs demo this is sort of multiple libraries buckled into one so it's showing the MA apps integration as well as the dragonballs library integration I if anybody is interested I would love to pull into show me the sam'l stuff that we have in the other demo so that you can have nice little clickable links to see the corresponding stuff okay so this isn't not a whole lot here buttons switches sliders numeric up-down data grid stuff plus/minus is that's broken that's the wrong style okay we'll have to look at that but I'm actually not entirely sure what this thing is running under so it's important to note that for this this is going to end up being all of the preview packaged stuff so this new spec that we're going to update here is going to be preview stuff and so this MA apps one sixth version is going to end up being - OH preview stuff so just be aware of that so let's go back over here packet dependencies so you get my apps Metro I think what we need to do here is just update you to the latest stuff you know let's just do that and I don't recall the exact version so let's just go out and we will explore new get and find out what the version number is so nougat org you'll see what is going on out here so my apps did you do so 207 days ago okey well now I believe if I simply to do let's see here let's see not that one that one and I believe it's Hackett the restorer installed because we grabbed the latest one I always forget these commands I believe a build would have actually kicked it off as well but I just want to make sure that I actually see the the MA app stuff pull end apologize that cold that I was fighting last week is not quite gone and I am still fighting a bit of a cough so to do mops metro great hold in the latest suite okay so now with that well in hand let's fire this up and see what happens because my goal is to be able to have preview packages for this guy kicked out the door so that people who are using the my app stuff can start trying it and tell me what it is this will obviously be a preview release because it's going to be dependent upon their preview releases so we'll just see see how that goes we'll fire up this demo and then we will start hopefully figuring out where all of the problems are so we know there's at least the combobox on the dot or data grid that we need to address so that that unfortunately looks like it's working that's too easy that's too easy this might be a lot easier than I thought okay then this might be really really easy alternate style light dark cool okay so let's go let's change primary to pink accent to teal just so that it's really really obvious well let's pick something that's very different than what we were before how about orange and if I go back over here I should see some number of changes and these guys appear to have updated correctly sweet this is gonna be really easy if this is all it takes still have this guy to deal with and still have that guy to deal with so none of these guys are actually being styled out correctly so we just got to deal with the data grid and I think a new spec and we'll see if it works it would be nice to be able to have the MA app stuff back in and going so let's take a look to do it to do it today okay data grid and tab item data grid here date a grid checkbox column okay so this is probably problem one so what is the namespace so inside of the material design library we have our own data grid combo box column so I'm expecting something you know mdi-x data grid combo box column let's see here that one so specifically add-in that and that will probably address that it is interesting that I don't don't know why this guy didn't automatically pick up the theme for the checkbox column or the data grid text column let's check the app dot sam'l and see how this guy is set up so this is the my apps integration stuff and in the mah Apps integration library let's see themes do to do where's the controls what no not that one defaults that's what I'm looking for defaults defaults defaults so this guy just references all of those it brings those in none of those should be over writing do you have let's see material design theme defaults and then ours and my apps bundle theme so what is going on here because this guy here derives from the base bundle theme which is our new resource dictionary guy great great great okay so that builds it up grabs the theme manager theme changing stuff moorthi me stuff great great great now the question is where I'm less concerned with this at the moment because that's just the drag holes library so the question is why let's fire this guy up and grab snoop and elope because I do not understand why it did not pick up the automatic theme from this so the material design themes defaults dictionary just to walk people through this real quick this guy here so if we go into themes and grab the defaults so you notice this guy brings in a whole bunch of stuff but more importantly he sets up an implicit style on things like data grid data grid cell combo row etc etc etc and these implicit styles are what should be giving the the theme the material design theme to the data grid but clearly something is not working so now now we're now we're working so the as soon as you pull in the theme for the or I should say once you use the material design combo box column at that point then you pick up the nice material design theme combo box which works as you would expect which is great okay so from there let's figure out this checkbox column what what is going on there and let's just take a just to make sure I'm not crazy because in our normal demo app underneath grids I believe we have a data grid very similar to this data grade checkbox column ooh element style Oh interesting I wonder if this is the this is the kicker of what's needed ah maybe this is just a matter of making sure that we copy code correctly okay let's go down here did to do something like that and close quote save and if you do really love it if that just magically worked but let's pick this guy up I'm also not a hundred percent confident I think this is probably failing to resolve because I think we have to bring in the resource dictionary similar to how this guy brings it in here so I think this is also going to be required so user control so I can just grab this whole block here we're gonna give this one more try and just make sure that it's not something weird from edit and continues because some of these styles to do there we go now the check box is working great let's take a look at the text box to do material design text column ooh we should actually probably switch it over to this one material why do we have why do we have this and not because part one of the braking changes was this data grid combo box column material data grid I'm wondering maybe we just introduced a breaking change real quick data grid because there's all like the the word material is not adding much to this here so let's see here a system windows controls let's just derive system windows controls oh you're unhappy because I'm debugging fine be unhappy for a minute and spelling counts at least most of the time okay so derive from the datagrid the the WPF one and then I think we're gonna drop the word material off of this because this will be at least consistent with what we did for the combobox column so let's fix this guy here do jump me up here datagrid comma Bock column there so that that's gonna cause only a couple breaks clean up that trailing whitespace clean up this white space here might as well clean it up while we're in here general Boy Scout rule always leave the code cleaner than you found it okay so back over to here then because this is going to change this up so that goes away that goes away that goes away because right now we have the opportunity with this thrill release to introduce breaking changes and so I kind of like being able to bring in the breaking changes now while I can it seems to make the most sense but we're gonna get this guy cleaned up as well also if people have questions I'm going to just carry on my merry way and keep working through the bugs and this myapp stuff but I am also always happy to deviate and change stuff up so for anybody who's jumping in late right now we are working on the material design in zamel library and getting the MA Apps integration working actually well I'm while I'm thinking about it so there is a for anybody who's who wants to get an Xbox Live gift card and has some time between now and Wednesday there is a xamarin forms challenge so they do these every so often and the xamarin team is largely just looking to get feedback from people so in this case it's a xamarin forms app and an your function so it does assume that you have a free Azure account or an MSDN subscription or somewhere where you can publish an azure function but it rather than the other challenges where in the past it's been hey work through this feature and give us feedback it's really just walk through this tutorial deploy the stuff out so that you understand how to build a mobile app and have it call out to Azure to do some work and so it's really just walk through all of it and and get it deployed so links in the chat if anybody wants to do it there I think they said it's like the first thousand people get an Xbox Live gift card and then they're gonna draw some names I forget how many for some surface earbuds so if you've got I don't know I'd probably say give yourself 45 minutes to an hour depending on the state of your machine if you have to install the the Sam or toolchain he'll take a little longer but then it really is a pretty simple thing to just work through and do so that you can see how all that stuff plugs together datagrid checks column I'm not distracted at all okay let's see here so this now means that let's see data grid text column now we just prefix it with the material design namespace and this guy should magically start working I believe do-do-do-do-do do-do-do-do-do and actually so this one I'm noticing there's a particular there's some editing element Styles being applied to this and I'm kind of hoping I'm kind of hoping that there that there's a default style being applied to this data great x-column already I'd really like it if I didn't have to explicitly declare this but if I remember right yeah decompile please the the text columns I don't believe derived from framework elements so I don't think you can set implicit styles on them but I could be wrong so let's just double check that real quick date a grade column yep yep yep yep keep going they do have I mean they're bindable so they derive from did Oh yep derived right directly from dependency objects so no framework elements at play at all which is very disappointing very very disappointing okay well let's take a look and see how this goes because if this do you give me a nice text box no you don't darn it well well well well we'll walk walk walk okay well bring it over so this comes across like this and this should just magically work hmm solution to every call more mountain dew do let's see where this goes if we get this guy done I'm gonna push out the the nougat package and we'll have a brief look at pipelines to see how that is set up because I haven't actually pushed out this MA apps library there we go so it's got the the pop-up text box style with the little underline and whatnot so that that looks like it's working rather nicely the vertical alignment on these is annoying me but I'm trying to decide if I if I adjust it now or not doesn't theory I don't really want to have to dive all the way in don't really want to have to dive all the way into the cell editing styles now we'll leave it for now okay this seems a little too easy I was expecting more breakages but I do want to get this get this going so let's let's just double check a couple things really quick so this guy here to this extension method this set ma apps this is where all of the magic happens and I'm wondering this can't be right I think we're falling into the accidental case here because these guys should be failing due to their brushes okay so let's jump back over here I could have sworn that all of these brushes were swapped out and done differently now and now I have a hard time believing that my stuff is working as well as I think it is so let's just take a quick look at this ya see I'm expecting things like this my apps brushes flat button background why why are you able to work you are confusing me you are confusing me I like that my app is working I don't know why it's working let me double check my dependencies that's why it's working aha you cheater despite the fact that I directly told you this okay packet restore come on because I saw you downloading my apps - oh you should have should have brought this in place let's see WPF packets my apps Metro so what is so what is different about why am i why am i confused on this because this guy here should have picked up the same package reference yeah cuz you you should be you should be working which one are you squawking about and you just lied to me though that reference is also wrong okay so what's doo doo doo doo well before we get too carried away and do something aggressive like get clean let's go through and and get this stuff at least committed for the moment and then see where that takes us okay so let's see great branch fix mops so we'll get something there take current changes we could just stash but I don't I don't trust myself that much and that changed there see what the packet lock file did to do so that pulled that in okay I don't see any problems here let's see that's fine that's just dependencies on file system data contracts handles loader photography bunch of Microsoft stuff updated great-great-great-great-great okay so I see my apps integration okay so it changes great so there's that and let's just when in doubt not a hundred percent confident that that the problem isn't Visual Studio not letting go of the letting go of the references so get clean dfx again for those people who watch my stream back on the they get stuff this is an abusive command this will blow away everything in your directory that's not under source control so be careful and make sure you've got your stuff committed before you run it because it is it is very very abusive go okay back to material design library and then we just need to figure out what happened and why my brushes work as it is bothering me that they work I sort of would prefer failure but it was good that we got the the datagrid stuff cleaned up and working again if anybody wants to go through and add this show me the sam'l stuff the same way that's in the other demo app I would appreciate it I don't know if I'm going to have time to go through and do it okay so key thing here all of these dependencies need to be resolved let's let's recompile and see what comes of this so I figure if we get the the MA app stuff published where people can play with it the 300 release is getting down to where the there's just some of the harder more problematic bugs and so I think getting those fixed we'll see how many of those I get a chance to snipe off I've got a reasonable backlog of stuff that I'm supposed to be working on to go visual studio go you can restore all the things I promise I promise you can find them all you can download them and install them because I know there's only a couple so let's go find all of the stuff pack it Ron go pack it go let's see you source control build do yeah and I fully expect this to fail at a minimum to show me the sam'l stuff should fail it out but that one is just a rebuild and away you go a package that's a file missing you get packaged your store blah blah blah come on there we go mops Metro that's what we're looking for - oh baby and I'm sort of trying to decide how to release this nougat package do I set a minimum version - a preview release hmmm not entirely sure I like that but if I leave it at 1 6 5 or 1 6 star whatever is the minimum release it means people who install it in dotnet framework by default with the old packages config it defaults to lowest and so they're gonna be broken I suppose if you were instead of like how likely is it that somebody's gonna install a preview version of my nougat package and not update to the preview version of my apps I wonder how likely we use case that is okay demo app my apps let's see here let's make you the start of project because we need that double check my dependencies because I want to see my ops - oh great launch now we should see some breath some brushes fail oh hey Megan so just curious is this projects supposed to be a huge library of different WPF controls and style examples to use in external projects so the answer is yes and let me for anybody who's just sort of curious at it let me just give a kind of a brief overview so there's there's two apps at play that we're working with so I run a library called material design and zamel so I am not the original author I am just the the current maintainer because the original author didn't have a lot of time to work on it and I thought it was fun and so I said sure why not so the the whole idea here is it's supposed to bring Google's material design so you can think of like the the Android look and feel and let you write WPF apps with that look and feel and it's designed to be fairly simple the getting started guide under the wiki will show you what's necessary its install a nougat package and then a few changes to your app dot sam'l to get up and running so that is that is this one so there's depend on what version you have the two six zero you can technically do this bundled theme stuff in the two 600 but it will give you a design time warning your app will still work it's just the way this was set up it doesn't play nice but then you can have nice theming so a couple lines of code in your app dot sam'l and away you go and you get all of the pretty styles and themes so that's the material design and zamel toolkit there's another library called ma apps metro or my apps as most people will reference it it was initially set up the metro is I believe an old holdover name from Windows 8 apps when they first launched it was called Metro theme but my apps was designed to give WPF apps a lot more control over your window and was also another theming library the thing is there there's a lot of overlap between these two libraries in that they both offer you styles and extra controls that you can use in WPF apps but whereas the material design and zamel library is very opinionated about this needs to adhere to Google's material design my apps takes a different route and goes more with the Metro look and feel but they also go to the effort of adding a bunch of windowing controls and extra functionality that I don't think it's ever gonna make it into the material design library so sometimes people are want to mix and match because they want all of the the fancy stuff that my apps offers but then they also want the material design theme for stuff and so there's an integration library that goes kind of between those so that you can mix and match and use whichever one makes sense so let me copy I know how to copy and paste so there's the material design theme repository and here's the MA apps theme one so if you check my my videos on YouTube you'll notice that there's actually quite a few of them that that go over the material design library largely because I really like WPF I really like zamel and I think it's awesome and so I spend a non insignificant amount of time working on this library because I think it is cool and fun so yeah there's that oh let's see so did you I think we just rebuild here because those are not quite the heirs I expected but I also didn't expect the initial bill to work so we're gonna kick this off one more time and just see cuz I think that's just a clean rebill yeah and if you plan on playing with it you may see a WPF assignment in the future that leverages one and/or both of these so preview head start because there will be so the the class that I'm teaching at the University there is a portion of it that will be covering WPF because as part of the class we have to teach event and driven programming so the easiest way to do that is with a GUI framework and because I love WPF WPF it is come on Visual Studio go go go go go I know I told you to rebuild everything but I I trust you can figure it out I trust you can figure it out so now that we actually have the two Oh stuff pulled in I'm fully anticipating that that we should have binding fails okay so this guy is still breaking event trigger does not exist in the zamel namespace one why are we using event triggers in the first place then triggers are bad oh that's why because I updated the interactions library whew okay so what do we got going on here so command close command Wow okay so let's let's nest some of this a little bit more because this is hard to look at so that named clique were using wait what event trigger close flyout action so we've oh I see because this is leveraging the close flyer I got you I got you I was trying to figure out why the heck this was using the action rather than just a straight-up command on a button and there's the explanation right there because of this guy great that's not quite what we wanted basically the short version is the interactivity library no play nice with event triggers verify that you are not why so I'm maybe I'm I must be stupid but there a reason I can't just do that let's see trigger action collection then name I believe its button dot click then trigger oh this is routed event isn't it but click I guess I'm just curious where this guy gets used let's go back over to the my ops library I'm sure they've got an example in here somewhere do oh that's turns out if you only search in the current project you only get results from the current project so let's go entire solution real quick cuz I'm curious how they use this so basically this is a copy and paste from there's interesting so then the question becomes how or what are you using for [Music] let's go look real quick because I don't understand what this guy is using for his version which must not be latest so we might have to roll that library back doo-doo-doo-doo let's go back maps Metro okay so this is actually one of the the few things that's really great about packet is when I want to understand what somebody's what version they're using I don't have to go hunting all over their repository to define the references or figure out which projects are referencing it it's just I can go look at their packet dependencies and be done which is wonderful wonderful wonderful yeah close close go away so they aren't hmm so hold on here wait am i seriously oh no no this isn't my coat okay who I was like what the heck why am i targeting so many frameworks right back to here dotnet core app packages one of you guys is not like the others and somebody is bringing in no where's the interactivity one somebody is bringing in this reference and I don't know where it's not there okay so let's check it up at a higher level not there [Music] not there there so there is a new interactivity nougat package just a little baffled as to ah there's the there's the guy we're looking for I bet you that's the difference I bet you it's changed namespace yeah there's the subtle difference okay so back to get crackin and this guy here discard all changes let's go back let's go back so I believe the issue is that namespace include there less unhappiness more happiness let's see that guy they're a little less concerned with that a little less concerned with that so now bill okay that should hopefully address that so I updated the library I just didn't update the usages of it so lesson learned when you update your library your namespace includes should be updated to match otherwise you end up scratching your head for a little while being confused to do okay are we good to go now you're done yelling at me for stuff I think it's happy I think it's happy I'm happier okay that's more like it that's more like it cannot locate theme so we've got a reference to styles accents based light and that is no longer the case identity to do so let's jump over real quick and look at their demo app what is the new way of configuring so they've got controls and fonts underneath the styles which I believe matches controls and fonts underneath styles we pulled in colors they do not styles themes light blue okay let's grab it so this guy here styles themes light blue apparently that guy doesn't need to exist I'm somewhat curious if we actually need this to exist only because in theory once we get this bundled theme working appropriately with their style keys this guy should probably be adding everything that's here don't know that for a fact but we'll find out shortly so this one may become optional which should make this a little bit nicer to work with because having to remember all of these and copy all these is up pain in the neck for reference I can't remember them all so I end up coming back and just grabbing them so let's see due to bundled themes secondary color uh so this is actually coming from here now or I guess it was coming from here the whole time and I was just too stupid to notice so where is this well let's just grab it I guess and hijack it here because I believe this is where it's breaking because it applies the theme so the theme that comes in so this item object is new and version 2 6 so it basically is just a poco with all of the material design brushes in them so nothing fancy and this guy comes in here call set theme this guy comes in here grabs it and basically just does a whole bunch of brush letters because reasons there's a fancy new thing in Visual Studio 2017 this so this little green arrow if you hover near the edge of your code click run to point done let's see so it adds the theme manager grabs the old theme pops an event which in this case doesn't do much here goes through here base theme it's set to inherit great fine set my apps this is where it's going to break because this is where it was hunting for the existing ma apps resource theme library didn't find it goes hunting because before you used to set base light or base dark it goes to create this goes to create a resource dictionary and goes boom okay so that at least makes sense White's crashing so we have a problem here in that before we had light and dark theme stuff and made assumptions on it and those are no longer true so let's go here we've got a theme template which this is actually probably going to be gold because this is this is basically all of their brushes yeah so these guys because you can see each of these that come through this generates up the theme great so this is oh interesting so they'd no longer have a light and a dark or I should say they no longer had a light theme and a dark theme they've separated them out based upon these guys interesting okay interesting interesting interesting interesting interesting well well then that is less than convenient because that means that at least for this purpose this is this is completely worthless so set ma apps base theme there is no concept of base theme anymore so this becomes one easy method to port I do have my delete key okay so that that goes away because that's no longer meaningful because there is a bit of a an assumption that if you're using the material this material design library with my apps you're accepting the material design theming and basically you're just looking to theme my apps to look like material design you're taking them for functionality not for theming sure step step step step over look at that should launch now should at least launch and I'm guessing things are not going to look right well actually that's a lie because [Music] cannot find resource named yeah so it's missing some themes and it loaded some themes okay okay so they don't have the concept of accent anymore or at least they've they've bundled it all together so yeah so they they have bundled this is interesting so they have bundled the accent colors and the primary colors all into a single theme dictionary itself that they Auto generate from a given template and some generator parameters [Music] these are all the colors that go in and then they generate the appropriate brushes so let's see so there's light dark and then this basically just does light amber dark amber generate all of the things out okay well that makes it at least easy I know where to look makes it a little more of a pain in the neck for figuring out how to implement this because now we don't really have this concept as much well I guess we kind of do we kind of do so each of these things let's just pick on one mops black so it generates the colors okay so this is this is just gonna be sure yeah yeah yeah yeah this feels like a regex problem wondering if I can use this I'm wondering if I can use this to auto-generate my code that's a lot of lines of code to have to type and I'm incredibly lazy but the laziest developer always finds the easiest way to do things mostly due to being lazy so I'm trying to decide if it's worth coding all these in or at minimum just extracting all these these values out because ultimately we're going to end up having to duplicate what this generator does and I'm wondering if if it makes sense to try and leverage leverage this specifically leverage this theme template hmmm wandering wandering wandering wandering wandering because if we can embed these guys in here [Music] to do this guy just then magically starts working I'm wondering if we can repurpose this because it'd be really great to just download this and have it run and generate all of the code that we that we need for this do-do-do-do-do-do-do because packet has a wonderful feature where it can pull down arbitrary files from in another git repo so that we can then use it in ours that's ultimately how someone like the control e^x stuff like the Papa px are getting included in the library is they're just being file linked in via packet pulling them down rather than having to reference an entire new get package and I'm wondering if that makes the most sense here because I have to kind of duplicate a little bit I'm a little less concerned with doing this I'm mostly concerned with pulling in these parameters and getting these values right because this is where I see see changes occurring I'm thinking this might become a PowerShell script here pretty quick default values base color scheme because the difference is is rather than wanting to generate zamel I want to take in this file as an input and generate out code for this but does it really make sense I don't actually need these brush colors because what's going to happen is I'm going to take the material design colors and put them in their place and potentially reuse some of these yeah let's just hard code let's just hard code because I don't see us making a lot of use so I'm going to just dock these guys to the side for the moment and we're just gonna start start plowing through this so let's undo undo undo undo undo so this guy here is going to become very different so let's see switch on base theme which is just an enum for basically light-dark case base theme light okay face dark okay and I think what we need is to do would set color this is very similar to this set brush that we have here where is this class living to okay so I think I'm just gonna plow through this and go so I think we're just going to regex this in once we figure out so the for example the very first line in here underneath light looks like this right so I'm pretty sure what we want to do is to do something like set color give it a key and then color let's see from argb where this is going to be 0 X F F a0 X 0 0 X 0 0 0 X 0 0 alright so we want something like that we want this thing to take a string key and a color color and then this does resource dictionary key color right this isn't buying us a lot aside from what we're about to do next okay so this is this is basically what we want are you squawking about that's basically what we want so let's now let's have some fun so I'm gonna go over here do this so this is all the white stuff put a couple blank lines in this is all the dark stuff right okay so usually when I'm faced with something like this my first instinct is to regex the problem away let's make this where is my zoom you don't have zoom in Wow that is Oh control equals my mistake I was not using the right command okay so control F to get this guy up and enable awesome mode so we're gonna go from start of line whitespace any number of characters replace it with empty string replace all okay so we've got everything indented so again remember we're looking to call set color with key so let's let's go ahead and do that so then the next thing we need to do is match on quotes and actually we could probably do is let's do a color we'll just do number to capture group so this will be the set of all characters that are not equal to : so we're just going to grab it all up there set one or more right will then match on the : we will then white space any number of repetitions mix-ups that will grab the the quote and the pound and why did I lose this one down here quote pound oh because this drops here we'll come back to you in a minute let's see and then we're going to do name capture group and this is going to match zero through nine a through F exactly two repetitions all right so that's gonna and then we're gonna duplicate this over let's see a our G B right and then just for completeness sake we're gonna grab quote boom just so we can clear out the line okay we're then going to replace this hold up something's something's amiss I expected these ones to match and they didn't let's see here so oh the Alpha is optional so let's go back to the beginning so this capture group is optional okay I've got a regex that looks like it's matching most of these did you do one two three four five six seven eight oh the comma at the end we'll also make optional boom so just doing a quick scan to make sure we've got these couple disabled ones that I'm just gonna do by hand it's not worth it's not worth getting anything fancy for so we're gonna replace it with set color replacement group one so captured group zero is the entire match dollar sign number gives you the capture group inside of the first set of parentheses so this guy here where we grab the name that will include the quotation marks because it was everything up to until we hit the colon so we'll do that and then let's jump back here what was the code that we needed color from a RGB right so we're gonna do this color from a RGB this is going to be dollar sign to let's see it's gonna actually going to be 0 X dollar sign to this one will be 0 X dollar sign three 0x dollar sign for 0x dollar sign five right replace all okay so this gets us not quite what I expected so the set color did not pick up everything so here's the wonderful part undo still works let's see so this guy here hey what's going on with your studio code did you lose your mind hello what's going on I I think I may have killed V s code is it is apparently going crazy and doesn't quite know what to do about this the window is no longer responding oh please don't make me well points awarded for it rigged for it at least trying to recover extra points if you remember all my stuff nope this is not a WSL file Oh Oh sad day ok here we go again so set of all characters that do not include a coland any number of repetitions or at least one repetition right then we're gonna pick up : then we're gonna pick up whitespace any number of repetitions wanna pick up the quote we're going to pick up the pound and then we're gonna do let's see we said this was the set of all things that were see zero through nine a through F exactly two repetitions and then we were going to do this let's see the Alpha Channel we said was optional and then RGB this becomes set color see dollar sign one color from a RGB let me just grab this again copy paste this becomes dollar sign two dollar sign three dollar sign for and dollar sign five and this guy here we had picking up closing quote and optional comma and replace so that gets us pretty close let's go undo one more time because I'm noticing I missed a closing parentis mi colon the place and that gets it pretty darn close see that regex for the win okay so this guy here I believe light was on top if I remember correctly because yeah dark is yeah this is light on top and we get something like this haste auto format okay now we just have to deal with this one so let's see here this guy here is the same as great too so I think what we're gonna do is I'm just gonna copy this guy duh I think I may just duplicate this guy over with the different key and this is the thing the regex doesn't need to be perfect it just needs to save me enough time to be worth it and I think that it did because having to type all these individually and make sure I didn't make a mistake regex is worthwhile learning especially for some of these fancy ones now there are people who know tools like VI and I've seen some absolutely amazing finger contraptions that do ridiculous things that should never work but yet they do so to those of you who know VI hats off to you you are better than myself I have never learned it I probably should because it looks really really cool or I should say it looks really cool when you can pull off those amazing edits okay so that handles basting great okay so that handles all of that that was a lot of theming library stuff let's take a look at the other ones so this is that was just all of these base ones and now what we need is a list of the brushes because this just embeds the colors from both of these and you'll notice it's got the for each of these colors it looks like they've basically got what is that one two three four five six brushes so an accent bass accent two three four and a highlight and then you know rinse repeat across all of these so I'm guessing when we look at their template to this guy here so these are all of the brushes and colors that need to go in so first of all I can say for certain that these are the accent colors we should probably break up each of these into into each of these so some of these we're not going to need to do because the the other ones already handled it for us so it's we've already taken care of all of the base colors we've taken care of these guys these guys we will need to add those ones aren't bad oh let's see so let's let's just start bringing these guys over so I'm gonna take this template guy and once again dock them to the side I'm sorry for hiding it where people can't see it okay so let's do this guy so back over wrong project this guy so that's set the base theme just collapse this for the moment let's see private static void set metadata you source dictionary source dictionary to do trying to decide I don't know what we're gonna pass yet so the the key things that we need to pass in are these guys and I don't think the showcase brush is gonna be something I think that's gonna have to move because that's gonna need to live somewhere slightly different but for some of these it should be simple so source dictionary let's see here so we need theme name for now empty string work source dictionary we need display name again for now empty string will work source dictionary let's see theme base color scheme it's also string I'm guessing that's light dark so I'm thinking with some of these we're probably gonna break them up and set them in the appropriate other ones like this base color scheme I think I'm gonna be setting down here let's see theme color scheme okay so let's figure out where these themes come from so theme name comes from these so that will come back to because both of those are both of those I believe are gonna have to come when we set up the the color brushes ah let's see base color scheme so base color scheme so I'm assuming this is light dark so let's come over here and base color scheme we're gonna move you out so you come over here and I think what we're going to do so we're gonna abuse the fact that I'm pretty sure this works because light dark or inherit and if we pass through the inherit that's probably okay I've got apparently a mismatch on my naming here so let's just fix these haste haste because this myth is probably going away so come back to it come back to it and this one's gonna get said elsewhere okay next set of stuff seems showcase brush that's gonna have to come with the color theme means stuff so let's let's look at these but uh so this is gonna be resource dictionary set brush and we've got the showcase brush so this this is really where we're gonna have to make some decisions about how how we want to map this stuff so they're using their colors accent base because again remember they've basically got just these brushes right these are the these are the key ones so I should say these are the key colors so we need to set those up accordingly haste ok so those are the those are the colors and so they are they're using accent base and let's actually do this let's break out this set color into a to do pull you out migrate you up and we're just gonna do this private static this resource dictionary something more akin to that I'm not sure how much value this adds but we'll see and then we can just block it at all of this to do to be resource dictionary dot here sirs part of me wants to regex this out of an extension method but we'll get to that in a minute don't know there's not an auto code for inline method is there now we can certainly use expression bodied members okay so that gets us into there with the color view okay back to where we started so we have to basically map something in our theme into each of these and this is where it's going to get a little weird because they've got four levels of accents we don't we've got three levels of primary and they don't so this is where there's there's gonna be a little bit of a mismatch here and I'm not I'm not entirely sure the appropriate mapping so if people have a strong opinion about what this should be please tell me kind of wondering if this if this should be a Severus I'm kind of wondering if these set brushes should be good to do there's any reason why these can't be a because this is the sets color I did to do because this actually theoretically changes it to right so setcolor let's do accent bass I think is probably pretty easy because this becomes themed sorry secondary mid color right and that also means that the showcase brush which was the accent base gets set the same so this becomes resource dictionary set brush and let's grab that showcase brush down here bring him up I guess I had it right below me let's see new solid color brush let's see the secondary mid color okay so there's that so that handles the showcase brush so it's good let's get rid of you base color scheme you're done just got those three to deal with okay so accent base is fine we need to deal with the other ones now so I'm actually wondering if this should be secondary dark because this documentation here that shows 80% 60% 40% and 20% we're not we don't have those levels so I'm wondering if base should be dark and then work our way down so this would then become dark I think I would still leave the showcase brush as the mid I think let's do accent as mid because they get again we're not going to have direct correlations here and so I think this is probably and then do three and four is light maybe so this becomes three and this becomes four and then so this becomes light like that maybe I guess and then we've got the highlight color so we've got to set that and to do and so the highlight gets let's see here primary mid all right so that that handles all the basic colors okay we've already done so here I'll bring this guy back over here for a moment so this is then all of the base colors which we've already done those are already populated these guys the common core colors we're going to need to do I think we did colors fly out let's just double-check that down below yep that one's handled okay so this guy here paste okay so copy paste and let's see here so these ones I think we're just hard coding I guess because they're hard-coded in my ops so no point no point in thinking too hard on it again I'm open to suggestions if people have strong opinions on what these should be C 0 X 7 X 8 7 see here boom-boom-boom let's see sister comes two three and four see if this becomes nine five nine five and nine five and this becomes zero zero let's let's double up two zeros just to make things line up nicely vertically no other reason zero zero zero and this is interesting these are these are identical okay so that handles those guys clear that out clear that out okay so that handles that starting here let's come back in and so now we get into the more interesting use case and now that we've got all of those other colors that are set there's all of these brushes and I'm kind of thinking this is a great regex opportunity I guess I don't want to think too hard on this those ones are hard-coded yeah I'm kind of thinking I don't want to cause all of these guys in here and again Rex doesn't have to be perfect it just needs to be close enough and then we can hand edit the rest of them okay so copy back into our vs code paste we're just gonna start at the top we might we might edit these apparently I didn't grab it all you might do these things in blocks so start with the first thing so let's see start of line whitespace any number of repetitions replace with empty string alright so we'll just unand n the universe real quick okay and so then what do we want so given all of these like let's just pick on the first one right so we've got this guy what we really want to do is something like there's the line but it's gonna end up being resource dictionary set brush we're gonna need the key because that's important right boom grab the key and then for the color because set brush we've got two overloads one that takes a color I think what we can do is just this right so we can do color and then we can actually pull it out of the resource dictionary using this key right because we keyed it in previously poof done so I think that's that's the key thing that we want to do is we basically just want to extract out we want to turn this solid color brush thing into something that looks more akin to this right okay I'm gonna dock this to the side again so I can just keep it where I can see it and here we go so let's see we're going to match on actually we can probably cheat we can probably do X key equals quote and then we'll do capture set so oh grab me any character that's not a quote at least one repetition something that looks like that close the quote right so now everything inside of this parenthesis is gonna be everything inside of these quotes which is what we're looking for and then what I need is this over here so we're gonna just do any character any number of repetitions but then we're gonna go until we hit color equals quote oh we got a we got to escape the curly brace static resource whitespace any number and I mean we so we don't have to do that we could just do space these things are formatted well we'll just do space let's see static resource and then let's see any character at least one repetition well no we need a caps group because we want to do the set of all characters that are not closing curly brace right and we want lots right and then we'll do actually we can just do to the end of the line right at the beginning we can do boom like that okay so now the question comes so this will work for some of these it won't pick up all of them but that's okay that gets us that gets us close so we're gonna do resource dictionary set brush and we're gonna do dollar sign one to do we didn't pick up the quotes before so we got to do this because the quotes are outside of our capture group because they're outside the parens so we'll put that in quotes we need to cast the thing to a color and we do resource dictionary extract out the thing by key once again we didn't pick up the quotes because the static resource won't have them but capture group two and then closed paren semicolon just double check to make sure that that's right yeah so replace and let's see does that look right you source dictionary set brush grab the thing color dictionary great okay so that handles some of them let's see here so let's do another one so this guy here rather than color gets static resource we're gonna have let's just get rid of all this stuff here so this is going to be calm color equals pound and then to do oh I'm realizing I made a mistake on my other one because I allowed the Alpha channel to be optional go back and look at the code real quick I think that bit me on alpha channel stuff because that would have meant that to do we might have to go through and spot-check some of these because I'm thinking that means that I matched on the wrong wrong capture group we'll come back and double-check it I think that that that probably bit me okay but we'll come back so let's see so color pound capture group and it looks like so we're gonna do these in two sets [Music] so once again we're going to do the same set of zero through nine a through f so hex exactly two and we're going to repeat this set three times one two three four did that not work so how many sets of these do I have I've got one two three I've already got four in there so I'm already matching on four okay so that picks up all of those so let's now replace these so these now are going to be resource dictionary set brush dollar sign and this is going to be color from a RGB and then this will be let's see 0x dollar sign to 0x dollar sign 3 0 X dollars I'm 4 + 0 X dollar sign 5 place spot-check it looks fine and then I think since we just did this set of all items that contain four we should be able to now say do all the ones that contain three and this becomes from RGB and then we just drop this set and I think this is what I should have done on the last one that I messed up on so we'll just have to spot check those other ones and find all the ones that only have three so let's see here so that makes those okay let's see here I think I might just end up manually doing these we might we might make it we might pretty these up so this guy here or some of these other ones so let's see here so why did this one well this one's double double curly brace did the original not have two curly braces let's see so these ones were so these are static resources ah these are variable replacements my apps colors slider value disabled so the question then comes where do these double curly brace values come from is this buried in here somewhere so this is so these ones are also still embedded as colors so that's fine okay so we can go should save my other regex but whatever okay so let's see we've got the the key again I've got color and then I'm going to just clear that back off again so I'm looking for ding ding or I'm sorry we've got to escape both of these so pick up both of those curly braces let's see find the set of all items that are not closing ticks I think that gets it pretty close and this ends up being very similar again let's see here because it's color it's going to be resource dictionary let's see quote quote dollar sign to place nope undo the let's see dollar sign too but this needs to capture see where's the captured group end there just be the set of all characters not just one okay did today see what did we what did we end up matching so this needs to get rid of that for the moment Oh plus is on the wrong side of the print Jew there we go so we get something more akin to that that picks up all of those great we've got some gradient stops and linear gradient brushes might do those ones by hand this one here might just convert that by hand I think this is probably pretty good yeah it's close enough we'll do the rest of it by hand okay so again the regex doesn't need to be perfect it just needs to not suck and make my life a little bit easier okay so back up here we are going to place all of these guys out I'm gonna leave that top just for the moment paste okay so that gets pretty close yes control background this guy should match great that guy's done format see how close it gets so let's start just working our way down making out these guys oh is this right MA HAP's Oh brushes versus colors okay good okay good good good good good good good good good okay so the linear gradient brush so resource dictionary set brush this one we're gonna just we're just gonna do this one by hand boom and so this gets new linear gradient brush okay trying to remember the overloads start color and color I think we just go with this to do to do to do new gradients stop or actually let's see here start point gets new point 0.5 zero and let's do let's do this in the interest of my sanity let's just comment out that bit of code same with here we're just going to comment this out just so that the rest of the code formatting works and I'm gonna come back and address those individually same thing here we're just gonna comment it out that's probably worth keeping unused these are unused are they worth having don't know don't know and so we're just gonna keep some of these again I'm just trying to get the code formatting to work correctly so that I can then just come back through each of these comments and deal with them one at a time there we go let's go here to see here come down here another comment I think this gets really really close again I part of me wants to script this so that if and when there are changes to this it doesn't cause me to have to redo all these Reg X's but for now I'm just interested in getting it working okay so start point let's see here we need end point gets new point 0.5 to 1 great and then let's see gradient stops gets you know and I think I can just do this now right all right you're okay with that see gradient stops you're probably just unhappy because I'm guessing a gradient stop requires let's see so what's gonna need a color which will just pull out from here color resource dictionary with that key and then from that color it also needs an offset which is zero okay what are you squawking about stop collection okay and let's see new gradient stop and this is going to be very similar to this copy-paste when in doubt just a little bit of editor inheritance copy we want this key here and we want the offset to be one okay one linear gradient brush down let's do another one it's this one do this mobs brushes progress boom it is worth noting that the material design spec really abhors linear gradient brushes so there's a reasonable argument to be made that these should be swapped out for solid color brushes and there's a bit of a I guess contentious point where one point zero zero two to five it's an interesting number where I can see an argument to be made for having these things be linear gradient brushes so that they better match my apps or having them be solid color brushes so that they better match the material design spec so if anyone has strong opinions as to which one they should be I am open to an attending pull requests and issues and discussion on it because I don't know the right answer I don't know if there's going to be one right answer but I would like to hear people's opinions on them let's see here something like that okay so let's see here so this is just a resource dictionary set brush and this one here is just hard coded to white that's that's fine so colors white boom okay let's see we'll just leave these comments in place for now and a minimum they give me a nice anchor point for going back through the template at a later point let's see here so this is a resource dictionary set brush and this guy here looks that colors white do clean this up because we don't need the XML comment style in here see there there and see clean you up I'm not sure that comment adds any value let's see so this is going to be your source dictionary set color I'm wondering if this set color really adds much sea wait so this is setting a key my apps colors menu shadow my apps colors menu shadow we don't need this we've already added to the resource dictionary same with this one ideal foreground okay those are added done no thinking involved see datagrid ones let's see resource dictionary brush it is worth noting that even though that these brushes are hard-coded at the applications amel layer it doesn't mean that something lower down doesn't override them because I'm guessing most of these brushes are probably resolved with dynamic resource which means if you declare something in your resource dictionary at a closer level to the element your color will get resolved so even though some of these things look hard-coded it is you you can think of them like virtual members where you can override them and you can do the same thing okay so then there's all this all this all this all this and yeah that's a lot of resources a lot a lot of resources let's see if it works because if all of this just works that would be that would be awesome Oh invalid number Oh hahaha see I thought these were gonna bite me but fortunately that makes it very easy for us to track down because now we've got compiler errors so these are just RGB not a RGB let's see so GB that worked out rather nicely now I don't have to hunt all of them the compiler will just find them for me perfect we've been better if I had converted them appropriately the first time but oh well live and learn again the regex is just there to speed you up not to be a coding tool so don't code with regex there's a old saying that the programmer solves the problem with regex and now he has two problems I think that yeah and then we can whack this method too I guess because we never did do those metadata values mmm love to deal with that because I'm not entirely sure how to object reference not set to the instance of an object okay stop yeah yeah I got you yeah yeah yeah I get it I get it so let's deal with those metadata ones where did that file go so we've got these string values up here name display name color scheme those guys we got to set those to something well some of these are probably easy so let's just do this again well now that we have the theme I think we can do a resource dictionary to do theme name gets Eve dot I thought there was a there a name clearly not these are all just color properties I mean the so we're just gonna empty string it is because I'd hate for something to rely on these and then it's I'm somewhat tempted to hard-code these in to to just be something like material design or something but I would hate for I'd hate to do that and then have somebody actually build something based upon that string at least empty string is just useful enough to not blow up let's see so f9 f5 we're gonna check and see make sure we get all the way through this without blowing up as again I do like this this naming style for brushes I don't know I don't know if it would work for the material design stuff as well but I do very much like this having the separation like this it almost namespacing them okay so we're just gonna kind of step fast I'm not actually interested in seeing this I'm mostly just interested in seeing if this thing throws because it just threw in no reference last time which means I've probably done something stupid in here somewhere but the most part I'm just looking to see the last executed line it's not a lot of opportunities for this to break given all the setup in here to do to do to do to do that whoa so one of these guys probably they're broke which means I'm guessing I'm guessing something I thought was set is not set because it means we went to pull something out and it wasn't there we'll see what's going on here because I would have thought to do that that would have been part of the generator parameters but it could have not been see colors I deal [Music] so ideal for ground oh we missed it so default values ideal for ground so let's let's just hunt this guy around so different ones in here have different ideal for grounds so most of the time it's white and given that we don't necessarily know yeah I'm thinking what we do here is we don't use this so I think rather than leveraging this I think we're gonna just ditch this so resource dictionary set color because we weren't setting it before and just in case something is actually using a reference to this color which seems plausible we're gonna set this here and we're gonna do theme primary mid foreground alright and then we'll do the same thing here see theme oh not so we want to get foreground color so the the key thing here is foreground color may not be set and if it's not explicitly set it'll look up whether it should be white or black based upon the HSV brightness level of the the background color let's try that that's the only one from this thing that looks like it so we're just gonna run again we might get past it this way rather than having hard-coded ones for white and dark given that it's already 11 p.m. for me I don't know if this is actually going to get going but I think what will probably happen is that at minimum I'm gonna at least get a pull request going just just so I have something in progress and if anybody wants to pick it up and run with it feel free to branch off of mine and go crazy I think this is probably close maybe oh we got more problems so this one's not set okay so we we got it we got a deal with we got to deal with some stuff so I'm gonna get this checked in fix my apps and stage all changes more work setting my app brushes okay commit changes and see what is the upstream of this set upstream sure origin work submit and great let's go and we're gonna open up at least a draft PR again if somebody wants to pick this up and run with it I would encourage you to do so let's see new poll requests well surprised it didn't prompt to me but apparently it has a finished pushing it claims it pushed let's try that again or successfully Lukey you claim to have pushed there we go parent pull request integration starting work on getting my apps functioning with the Rios stuff let's see renamed text or let's see data grid text column match the renaming of the combo box column anything else we did was anything else was that it let's see here to do yeah everything else was related to the theme stuff I guess we can technically say updated my apps demo application with data grid styles so let's see this guy's going to end up in three oh I create a draft pull request this is a work in progress anyone is free to continue with it so if anybody wants to see my apps and where's did I get rid of my up for grabs to do or no up for grabs starts with with you so draft pull request okay so there is that and we are well on our way to having my apps integration and so if anybody would like to pick that up go ahead and comment on here and you are free to do so if not I will I will hopefully get to it I am booked up the next several days I I know with I've got a bunch of stuff going on that I need to do but my plan is to try to push art on this three o'the release and get stuff out the door this is the I think the last big feature that's blocking and then after that a lot of its just bug fixes and working through those so hopefully those will not take too long and then we will get going on that so I'm going to sign off for the night once again till everyone happy coding

Channel: Kevin Bost

Views: 1,004

Keywords: programming, material desgin, C#, WPF, MahApps, XAML

Id: u2jK6vk6nsI

Length: 122min 19sec (7339 seconds)

Published: Tue Oct 22 2019