How to Create Layout Components - EASY WPF (.NET CORE)

Learn how to create layout components in WPF in order to reduce XAML duplication. I demonstrate two different ways to create layout components.
The first example uses a styled ContentControl, which is quick and easy to setup. The second example uses a UserControl, which gives us more flexibility and customization with dependency properties and other C#/WPF configuration.
SOURCE CODE: github.com/SingletonSean/wpf-...

[@MXDMND_]

An another super useful video. Thank you so much!

[@thegermantomoeser]

You allways do a great job man!

[@ludovicwagner2656]

Thanks for the tutorials, it helps me revise some WPF stuffs. Unfortunately, I have an issue with Text="{Binding Header, ElementName=root}", I think I'll have to try with a RelativeSource and FindAncestor methods like you suggested. I can't find any typo in the code, but the only difference I can see it that I use a .NET Framework 4.8 (which I use for my target app, because I call COM objects) project instead of .Net Core 3.1. Could it be a reason of my issue?

[@VinuP2023]

Sean, I have a question. When I create collection inside user control loaded event, my combobox doesn't display any data. But if I call same method in viewmodel constructor, I get correct data in combo box. I observed that collection has data when I debug in loaded event, but is not displayed onto UI. Can you please help me or guide me in right direction 😇😊

[@simonpusateri3527]

Hey Sean, not sure if you are still monitoring this, but I am trying to replicate it and having a bit of trouble. In the user control that I am defining as the template, I am trying to import a resource (image) to use. Basically, it is a logo that I want on all forms. When I comment the image reference out, the method works, but as of now, the build breaks on that line when I try and import. Any suggestions?

[@erikfrits6553]

Thank you, Styles were exactly what I was looking for! Is there a way to have some events inside the Style? I have tried to make my window header as a Style element like you showed in your example and then reuse it across multiple plugins, but I got an issue when I tried to handle events. MouseDrag = 'header_drag' System.Windows.Markup.XamlParseException: Failed to create a 'MouseDown' from the text 'header_drag'. ---> System.ArgumentException: Cannot bind to the target method because its signature or security transparency is not compatible with that of the delegate type.

[@SingletonSean]

Thanks, and good question Erik! Unfortunately, this isn't possible with just styles. You'll have to implement a fully custom control and potentially use RoutedEvents. This old series of mine might help: kzbin.info/aero/PLA8ZIAm2I03gNGsQQYHmb7nK8VIt9EI9u I'm also releasing a video in about 30 minutes that might help with custom controls too.

[@erikfrits6553]

@@SingletonSean Thank you for your reply, it's kind of good to know that I was not the problem in this case :D I guess the time has come to learn Custom Controls in WPF, I was hoping I could avoid it for a little longer, thanks for direct link, Will watch it now :)

[@VinuP2023]

Thanks Sean. Just one question before I watch and reimplement this tutorial, components are .net core specific?

[@SingletonSean]

Good question Vinay, I've successfully applied this to .NET Framework as well. Should be good to implement.

[@VinuP2023]

Thanks Sean for the quick reply. Love your work you do in your channel. Whenever time permits, please continue custom controls videos.

[@yummysatay]

How do you declare Layout Component to inherit the DataContext from that in the ContentPresenter? GetType() shows the same but they have different instances. Thank you.

[@SingletonSean]

Hey bambam, I hope I'm interpreting your questions correctly. Are you using the style approach (first approach) that I demonstrate? If so, you should be able to just set the DataContext on the ContentControl, and then that DataContext should propagate down to the ContentPresenter.

[@yummysatay]

@@SingletonSean Sorry, forgot to clarify. UserControl, the second approach. Great videos btw. Usercontrol is where I declare the toolbar commands reused on all the workspaces (the content). The content is getting the expected source on DataContext. If I put a test button on the content, the commands execute. The commands on usercontrol is not. As mentioned, the types are the same; so it must be a different instance.

[@rotermichel]

@@yummysatay @SingletonSean Hi Sean, first of all. Thanks for the awesome tutorials! I ran into the same issue like bantam. I have a global filter view which should be shown on every page. I used the UserControl approach but I can't get the data for the filter view. Any suggestions?

[@mcnets]

Hi Sean, thanks for all your videos, I find them all really helpful. But let me say there is a drawback with this method. You cannot name another controls inside a user control content.

[@SingletonSean]

You're 100% correct mcnets, I actually ran into this issue last month. In that case, I just used the ContentControl + Style approach. I was still disappointed because the Style was much more difficult to use and understand. Instead, I ended up just making an empty class that inherited from ContentControl, putting the Style for that class in a separate resource dictionary, and then merging the resource dictionary in my App. Kind of a pain and not sure if it's the best solution, but pretty clean to use. Hopefully that sparks some ideas.

[@benedictpardo6366]

Hi Sean, can you make a video about creating/customizing a popup dialog(message box)?

[@SingletonSean]

Yep! That's on my todo list. Coming soon, thanks for the suggestion Benedict!

[@benedictpardo6366]

Awesome! I also suggests that you make a view with a table and crud buttons, where a user can select a button then it will displays a dialog with a form and then the table refresh with the new data.

[@mihaimyh]

How can you do this in a MVVM approach?

[@SingletonSean]

Hey Mihai, I consider this to be the V part of MVVM, so it applies to MVVM or MVP.

[@ivandrofly]

I this enough by just saying you don't need to specify the `templatebinding content`

[@FuzzyDPozzy]

can we do something like this? so for example having a grid and use it inside other grids like this -> hatebin.com/mvqiirwqqp?fbclid=IwAR3PEaJuGHGw2p7j-dPVOC1QylrQ3Iw8_NcdHTLg_ws7Vv-mR56yIJOwnUw and also if a grid has their own grid.definitions to override the default?

[@SingletonSean]

Hey Fuzzy, unfortunately structuring grids like this will not do what you might expect. The buttons inside the nested grids are not aware of the rows and columns on the root grid. To solve this issue, consider using Grid.IsSharedScope. It's a bit difficult to understand at first, but I use this attached property all the time to solve similar issues. Perhaps I will do a video on this. docs.microsoft.com/en-us/dotnet/api/system.windows.controls.grid.issharedsizescope?view=netcore-3.1