Templates and Behavior - WPF CUSTOM CONTROLS #1

[@geektoolkit]

OMG after years of learning WPF or trying to, this is the first explanation that made sense, was practical, and to the point. THANKYOU! Also as a fellow youtuber and dev I want to say that this video is stunning to me.....you are able to think, present, and code and you weren't stumbling saying 'um'. Just a calm presentation while working on the fly...that is so much talent that I think most people will overlook how hard that can be to do. Great job!

[@SingletonSean]

Yes! Glad you enjoyed how I... ummm... um.... presented this GeekToolkit 😁

[@kylerbriskey372]

Awesome video. I think this is exactly what I need to create a custom reusable control to make a train dispatcher program. I’d need about 100 controls that all look exactly the same. Now I gotta figure out how to wire it when clicking.

[@nikhilans1608]

Thank you. Just an awesome video to learn how to get started with custom controls.

[@rodrGP]

Hey, Sean, I´m a huge fan! Thank you for your videos.

[@ПолинаШипневская]

OMG THANK YOU!!!! this is exactly what i was looking for a long time

[@SingletonSean]

Hey Полина, glad I could help! Thanks for watching.

[@sbasalan]

Epey ilgi cekmis bu video, tebrikler.. 👍🏻

[@victorhugovaldezsoto]

Thanks for this video. I have the feeling there is a lot going on within a few lines of code - this gives the feeling of playing with a black box...but nothing a little research can clarify :). For those having issues with the Style TargetType property (You're getting an error such as "The name AnalogClock does not exist in the namespace"), make sure the xmlns:local namespace property at ResourceDictionary element is set to the project name you are working on - mine was WpfApp1, so the xmlns property goes like this: xmlns:local="clr-namespace:WpfApp1.CustomControls" After this, TargetType will be able to autocomplete to "local:AnalogClock".

[@afterbunny257]

Thank you Sean, I thick I should really take a step toward animation after watching this

[@afterbunny257]

It's just not fun enough writing wpf without animations

[@SingletonSean]

Haha, I agree WPF animations are amazing! They're simple to setup and they look really nice. No worries, I think in the VisualStates episode I do some animations :) but now that you mention it the clock hands should definitely be animated to move smoother

[@parko1965]

This should do it: Update Timer: var timer1 = new DispatcherTimer(); timer1.Interval = new TimeSpan(0, 0, 0, 0, 1); //MilliSeconds timer1.Tick += (s, e) => UpdateClockHandAngles(); timer1.Start(); Update ClockHandAngles Method: private void UpdateClockHandAngles() { DateTime now = DateTime.Now; var totalMinutes = now.Minute + now.Second / 60.0 + now.Millisecond / 60000.0; var minuteAngle = totalMinutes * 6.0; minuteHand.RenderTransform = new RotateTransform { Angle = minuteAngle, CenterX = 0.5, CenterY = 0.5 }; var totalSeconds = now.Second + now.Millisecond / 1000.0; var secondAngle = totalSeconds * 6.0; secondHand.RenderTransform = new RotateTransform { Angle = secondAngle, CenterX = 0.5, CenterY = 0.5 }; var hourAngle = ((now.Hour % 12) * 30) + (totalMinutes / 2.0); hourHand.RenderTransform = new RotateTransform { Angle = hourAngle, CenterX = 0.5, CenterY = 0.5 }; } Also the minute and hour hands move in respect to the current time

[@olivier0003]

Thanks a lot! WPF isn't that easy, but you've made everything clear

[@zenobiusztasak8604]

Thank god you were born!

[@SingletonSean]

Haha thanks Zanobiusz! This is my new favorite compliment.

[@igorcheglakov333]

14:30 at this point I stopped the video, started to think about why did author stopp the timer, went to dispatchertimer documentation etc. Turns out it was a mistake.

[@faraz-online]

No doubt a valuable rich video for sure buddy! However, in context of the same, while I am using WPF window as a UserControl's only option available in one of my projects of using the same in a VSTO Excel AddIn sure am interested in knowing if one could somehow have a Resources Dictionary type of option be availed in such a case for creating a template to be availed on multiple / all windows, where there is found no option of inserting the same in a such a project where there exists no App.xaml? Thanks again!

[@josbexerr5166]

Excelente mIster Singleton....gracias

[@SingletonSean]

De nada, mi amigo :)

[@nohopestage]

Great one. Btw, I think you didn't have to use RenderTransform for the lines. Instead of setting X properties you could have just set Y ones

[@nihalbayoglu9560]

thanks😊, very useful 👏

[@islamfares1477]

Can we update the clock hands every single second using event triggers?. thanks for great tutorial and for all your help.

[@mdrahbarahmedkhan]

Hey Sean, Is there a way to create custom Datepicker which work with both Georgian and Hijri date format ?

[@hezkygcs7545]

Thanks for such a great tutorial! I think it would be better to mention that the generic.xaml MUST be exactly the same as you did (both file name and directories relative to the project)

[@sulmamr]

Such a good tutorial! And so few subscribers! In other words: I just subscribed! ;-)

[@SingletonSean]

Micha Sulman Thank you Micha! Glad you're enjoying it. I still have some videos planned for this series too :)

[@daizwap9454]

thank you amazing episode

[@quangthienbui3608]

I created a custom Window control with Windows 11 style. To re-use the custom control in different projects, I separate the custom control into a new class library project. But then I had an issue. The project where the custom control is used can be built successfully with no error, but the custom control does not display. Could someone please help me with this?

[@fellypsantos_]

amazing tutorial! right to the pont! the only problem using this code is that the custom controle are not showing up in Design Mode, only when running, any tips?

[@ramakrishnamishra8179]

What screen recording software are you using!? it is wicked smooth!

[@SingletonSean]

OBS! I've never had any issues with it (other than accidentally recording hours of content with my mic muted...)

[@ramakrishnamishra8179]

@@SingletonSean Ok .. OBS sometimes messes with my Nvidia card and doesn't record.. but its ok!

[@kyleg6790]

Why do I keep getting control does not exist in the namespace?

[@SingletonSean]

Hey Kyle, does the namespace auto complete when you type it in? Does IntelliSense detect the control? I have noticed WPF XAML namespaces and IntelliSense can get whacky sometimes. If you provided source code, I could investigate the issue a bit deeper. Always looking to help!

[@nathanwiles2719]

Huge help, thanks for the tutorial. Subbed.

[@SingletonSean]

No problem Nathan, you the man!

[@FuzzyDPozzy]

i dont understand why we use this? can you explain? where can we use this and what is helpful for us? and some ideas in what we can do with it like we can create a clock,,,

[@jonas9]

What?

[@МаксимХавро-ч4ы]

Hi! Thank you so much for your video. It was very helpful. But still, I have one question. Following your guide, I wanted to create a Custom control "Block". Basically, it`s a rectangle which I can output on Grid. The problem is, when everything is set up, I get this message "Cannot locate resource 'customcontrols/blockstyle.xaml" in XAML designer. Can you help me please?

[@МаксимХавро-ч4ы]

Finally figured that out. The problem of displaying was caused not by this message but rather by Visual Studio failing to bind my folders (with Generic.xaml) to my project. Just recreated that folder and Generic.xaml and everything worked out

[@theboyofthemilenium9006]

Just be more specific when you write de location /nameOfProyect;component/customcontrols/blockstyle.xaml

[@ivandrofly]

5:48 - DefaultStyleKeyProperty 13:46 - DispatcherTimer

[@solvedplus858]

very awesome tutorial many thanks but why the custom control not showing in the design time on the window?

[@solvedplus858]

if i make some thing like progress bar, how to use dispatcher inside it (not timerdispatcher) thanks in advance

[@cughudson8695]

When I Rename Themes folder and Generic.xaml file, And the clock could not display, Is AnyOne know what happen?

[@gajarubanjeyakumar7226]

Hi Sean, I wonder if you could show me how to update the time on an event outside of the custom control.Thankyou.

[@SingletonSean]

Hey Gajaruban, I could show this off. Do you specifically mean with a binding, or just with a property on the control?

[@gajarubanjeyakumar7226]

@@SingletonSean Hi Sean,Thanyou. At the moment i'm developing an analog gauge for a HMI solution, wich should listen for value changed event outside of the control and update acording to the new value. I think a property is what i want.

[@shahjahan12003]

Excellent. How can I put Hour no. 1 to 12 inside the circle?

[@SingletonSean]

Hey Mohammad, I'm sure it's possible to hack some labels around to add numbers, but I think you would be better off adding a background image to the control that has the numbers and looks like a clock. I might explore this in the future.

[@fayazkolar]

Pease Increase the font size, bcoz we are unable to see what are you typing

[@gajarubanjeyakumar7226]

Hi, how can i add a popup dialog to this Analog Clock, so i can dynamically show and hide hands? I'm developing a Scada System where i want to create a custom control for a Valve, when the user click on the valve symbol, there should be a popup with Open / Close buttons. Thankyou.

[@SingletonSean]

Hello Gajaruban, first I would put the pop up dialog into a hidden grid. Then when a user clicks the valve, the pop up dialog becomes visible. You could bind the show/hide hands properties to checkboxes in the pop up. That's just a quick idea. I really appreciate the suggestion. I'm gonna start a series where I add features based on suggestions/ideas. This will be episode one.

[@gajarubanjeyakumar7226]

@@SingletonSean Thanks Sean, looking forward to the Episode.

[@kdowd161]

Good content.... better quality audio would be nice though .

[@wafabenyahia1903]

This tutorial was really useful for me ,Thanks a lot ,but i nees to add this analogclock and display it from main.cs and not from main.xaml

[@SingletonSean]

Hello Wafa, is your UI implemented in code and not XAML? It should be as simple as instantiating the new clock control and then adding it to the children of a panel control, such as a Grid, on your window.

[@maikborchardt5692]

Thank you so much!

[@Moosa_Says]

I've just found your channel ! from MVVM video and I've subscribed ..most probably ill watch each wpf video of yours. Please it will be great if you can make some video-s on MVVM implementation start to finish . Basic way and using some library like Prism (soon) and please keep speed a lil slow to explain things. Thanks from Pakistan ❤

[@SingletonSean]

Hey RAO, I do have a start-to-finish MVVM tutorial on my channel ("Full Stack MVVM"). However, I will admit the series has gotten pretty long. I'm planning a much more straightforward MVVM series in the future.

[@Moosa_Says]

@@SingletonSean I have watched that. I was asking about an updated series and also based on some framework .. a comparison or maybe do's and don'ts . that would be awesome :)

[@JaymzBond]

Why don't you just use user control ? What's the advantage here?

[@SingletonSean]

Hey Mert, good question! The main benefit to these custom controls is that they are "lookless". In other words, the behavior lives inside of the C# file and is independent of the XAML. This allows consumers to override the default Generic.xaml template and implement their own UI. On the other hand, the C# behavior and XAML UI are tied together when using a UserControl. This is usually okay. In fact, I almost always use a UserControl! The only time I prefer this custom control approach is if I am building some reusable UI component that had complex behavior, or if I am doing something hacky that wouldn't work with a UserControl (lol).

[@Po_Manfred]

Awesome!

[@SingletonSean]

Thanks GuruPrasadh!

[@ivandrofly]

Thanks

[@Hiigarawolf]

Thanx!

[@anatoliytkachenko7081]

Like for the video!