Dropdown - WPF UI COMPONENT WORKSHOP
Вставка
- Опубліковано 23 лип 2024
- Learn how to create a custom dropdown menu control in WPF. Additional concepts covered include SVG icons, dependency properties, template bindings, and popups. I've also published this control as a NuGet package (link below)!
Leave a comment below if you'd like to see other custom UI components featured in this series.
In this series, I create advanced, custom WPF UI components. Not only are these components useful for applications, but they also demonstrate how to apply various fundamental WPF concepts. The skills and concepts covered in this tutorial will certainly help you overcome most WPF UI challenges!
TIMESTAMPS:
0:00 - Introduction
0:45 - Project Setup
1:42 - Adding an Icon
3:46 - Defining Dependency Properties
4:24 - Toggling IsOpen
6:50 - Adding the Dropdown Content Popup
10:07 - Styling the Dropdown Content
13:25 - Conclusion
ICONS: fonts.google.com/icons
ANIMATIONS: • Animation - WPF TUTORIAL
NUGET PACKAGE: www.nuget.org/packages/Dropdo...
FULL PLAYLIST: • WPF UI Component Works...
SOURCE CODE: github.com/SingletonSean/wpf-...
OTHER LINKS:
Become a Member: / @singletonsean
Donations: www.paypal.com/biz/fund?id=UB... - Наука та технологія
This tutorial is insane, Not only for that little drop down menu, But for the content and the hole guide of doing things, Thank you so much..
I've been waiting for this one for years :-)
Thank you very much!
Woohoo, thanks for waiting Serthy! Hope this turned out to be helpful too
Yeah... WPF need more love~
Please could you do a tutorial series on styling controls like buttons, progress bars, radio buttons, drop down lists, combo boxes, text boxes, etc
This tutorial is awesome, but i found one small unintended behavior and a fix for it:
When using the checkbox to open a popup window, if you click off of the popup window and want to reopen it, you have to click the dots twice to open it again. This is because you are effectively "unchecking" and "rechecking" the checkbox.
My fix for this is to change the checkbox tag to a toggle button:
and then change the Popup's IsOpen property to:
IsOpen="{Binding IsChecked, ElementName=tripleDots}"
this now functions the same way but without the double clicking bug as this doesnt depend on the state of a checkbox, but rather by opening the popup window if the dots were clicked at all. this also has the added side effect of making the togglebutton tag cleaner than the checkbox tag by getting rid of the WPF state control code :)
Awesome content as always
Thanks Luca!
amazing ;)
How would you do that kind styling etc. in a context menu? Btw ur timing couldn't be better currently working on a larger more advanced wpf app as my college/school project hyped because I used all your best practises since I learned it last year thanks for that, and one more thing as a video suggestion advanced wpf and singalR usage with sending attachments like files or images or audio would be quite interesting 👍
Hey I'm just seeing this channel and tutorial and it's awesome! I really appreciate it. Hopefully this video isn't too old for me to ask a question about.
I was wondering if you could tell me how to close the popup window once a button inside of it is selected? In your case, if you click "Edit" or "Delete", how do you get the popup window to close? Clicking outside of the window works just as you have in the video but my popup stays open if I click one of the buttons inside.
Hi Singleton Sean. I Keep follow your tutorials and I must say it really help me alot in my work place as well as my daily routine coding. I have a request Can you please make tutorial on Custom Control Combobox which contain items with respective headers. Like GridView Columns with Headers. Thanks in Advance
It's top -)
How can I change the color of the 3 dots? specifically I want to change them to color white for my dark theme background
Thanks for the great video! Where did you learn everything you know about WPF / Xaml?
Hey Meddler, good question! I mostly learned on the job and through experience. My first engineering job was WPF-focused, so I was writing WPF every single day. I'd constantly run into issues or knowledge gaps (as expected with WPF) and research through the Microsoft Documentation, Google, Stack Overflow, etc...
This has really been my method for learning anything! Build -> Run into something you don't know -> Learn it -> Use your new knowledge -> Repeat
Hi Sean, I love the custom drop down control. I have been playing around with it, and I have run into a question. This works great if the image you are using is the same for each line. How would you Bind to an attached property that passes a different image?
For example two list boxes in the same user control. One would use the three horizontal dots and the other would use, say a mahapps Icon from an iconpack?
You would have to create a dependency property in DropdownMenu.cs.
public static readonly DependencyProperty IconImageProperty =
DependencyProperty.Register("IconImage",
typeof(ImageSource),
typeof(DropdownMenu),
new PropertyMetadata(0));
public ImageSource IconImage
{
get => (ImageSource)GetValue(IconImageProperty);
set => SetValue(IconImageProperty, value);
}
Then in Generic.xaml you would change the control template to something like this.
Then in xaml you would use
xmlns:iconPacks="metro.mahapps.com/winfx/xaml/iconpacks"
xmlns:local="clr-namespace:DropdownMenuControl;assembly=DropdownMenu"
This will allow you to set any Image Source you like. Hopefully this helps.
Hi Sean, thanks for another excellent guide as per usual. This is exactly what I needed for a project I'm working on. I did however come across an issue that I'm unsure how to solve, might be that I've missed something in the code.
The IsOpen boolean is set to false when the popup is automatically closed.
However this is not replicated to the checkbox IsChecked boolean because as you stated in the video, TemplateBinding is a OneWay binding.
So if you click the checkbox to trigger the popup and then click somewhere else it automatically closes, which is great. But since the checkbox is still checked it now takes two clicks to display the popup menu again.
I tried replacing the TemplateBinding of the popup IsOpen property with the same TwoWay implementation as the checkbox which solves the above issue.
However now I can't untoggle the popup by clicking the checkbox directly. It vanishes and then gets displayed again directly afterwards.
Good catch MsQlan! That was difficult, but somehow I fixed it hahaha: github.com/SingletonSean/wpf-ui-workshops/commit/311e73d00a0a06d188a42977ece3502cec2c55ca
When the popup closes and the mouse IS NOT over the toggle check box, then we set IsOpen to false. This "unchecks" the checkbox, so next time we click it, the dropdown opens immediately.
When the popup closes and the mouse IS over the toggle check box, then we do nothing. The checkbox ends up "unchecking" itself since we're clicking it.
@@SingletonSean Awesome stuff! Works like a charm. Thank you so much.
Sean, I've watched several of your videos and would love to know what you use to have the properties auto align. For example @ timestamp 11:30 when you are setting the color animation, you complete setting the Storyboard.TargetProperty and then all of the ColorAnimation properties indent align automatically. How do you do that?
Hi Tim! That is done via the tool described here: ua-cam.com/users/shortsFVO5HhUotHE?feature=share
How use this Conrtrol to creat SplitButton?
Hi Sean, how can I create a dynamic dropdown menu where the content is bound to e.g. a variable? As an example from this video here, that the Edit becomes an Add or that another menu item is dynamically added to the dropdown menu. As an addition, of course, would be perfect if all this is also bound to controls (views). Greetings from Germany
Hey Freelancer RG, that's a good question! The contents of the DropDownMenu control can bind to whatever the view's DataContext is. For example, in this application, I bind to Commands on my view model:
github.com/SingletonSean/youtube-viewers/blob/master/UA-camViewers.WPF/Components/UA-camViewersListingItem.xaml#L118
Based on your description, I think you're looking for something more advanced. Let's suppose the DataContext for your DropDownMenu is "SomeItemViewModel".
SomeItemViewModel could have an ObservableCollection of... okay nvm, I should just demo this. Here's a changeset with this functionality!: github.com/SingletonSean/wpf-ui-workshops/commit/9e0230e5f0244ef6844495827ea662262c4a93c8
@@SingletonSean Thanks, I will try this and give you feedback.
5:30 TemplateBinding / TemplateParent
8:06 clicking between space in triple dots issue