Modals / Popups - WPF MVVM NAVIGATION TUTORIAL #7

Подписаться 22 тыс.

Просмотров 16 тыс.

50% 1

Learn how to setup navigation to display content in a modal. This type of navigation is important for displaying dialog boxes, important information, or configuration screens. For the modal control, I use the custom modal control from the UI workshop series that I published as a NuGet package for us. I also demonstrate how to combine navigation operations via the composite design pattern.
Navigation is an essential piece of an application. In this series, I demonstrate how to implement various navigation scenarios in a WPF MVVM application.
TIMESTAMPS:
0:00 - Introduction
0:22 - Setting up the Modal
2:13 - Creating a ModalNavigationStore
3:37 - Using the ModalNavigationStore
6:20 - Creating a ModalNavigationService
7:04 - Removing INavigationService Generic
8:36 - Implementing the ModalNavigationService
9:30 - Using the ModalNavigationService
10:16 - Closing the Modal
11:42 - Combining Navigation Services (Composite)
14:45 - Conclusion
MODAL NUGET PACKAGE: www.nuget.org/packages/Simple...
SOURCE CODE: github.com/SingletonSean/wpf-...
OTHER LINKS:
Become a Member: / @singletonsean
Donations: www.paypal.com/biz/fund?id=UB...

Наука

Опубликовано:

30 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 36

@benedictpardo6366 2 года назад

Swoosh! Coming back to the series then found out that we now have nuget packages made from the series, makes it easier for new devs trying out WPF! Props to you Sean! Thanks!

@SingletonSean 2 года назад

Welcome back Benedict! Glad to hear you're excited about the NuGet package, I've also found it pretty useful in my own projects

@mcnets 3 года назад

Hi Sean, nice video again. Thanks for share it. I missed the video where you build the Modal nuget package. I'm looking forward to see it.

@SingletonSean 3 года назад

Thanks mcnets! Here's the modal video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE--mtIu5CImfg.html

@silviortiz15 Год назад

Great video Sean! Is there a way to make this modal into an actual window that can be dragged, minimized or closed independently. (Similar to a MessageBox) My wpf app could be running multiple long command asynchronously and I would like to use popup windows when exceptions are raised. So if multiple commands fail to complete I would get one modal pop up for each. I'm not sure this framework is adequate for my use case.

@PedroMartins-vj2zz Год назад

Hey Sean, I have been following your work for about a year now and they've helped me a lot! Thank you so much! In the case of this video I just have one question: What if I just want to use a Modal to display "warnings", like in cases I don't have a view model linked to the view?

@MrBa143 2 года назад

Hi Sean. Suppose i have a modal that functions as a Alert with a Continue command. This alert modal is displayed from two diffterent views when navigating, which also means that the modal should be able to close and redirect to two (or more) different viewmodels. View A -> Alert Modal -> Close -> View B View G -> Alert Modal -> Close -> View F Would this somehow be an easy extension to make? I cant seem to wrap my head around it. Pass the target viewmodel to somewhere, somehow? Or set CurrentViewModel & the CurrentModalViewModel at the same time, and then just close the modal on 'Continue'

@ShinyBorel 2 года назад

one possibility is you have a CreateAlertCommand with a ctor that takes a compositeNavService which it calls (or passes into the modal) to close the alert. Then from View A create the composite service as NavCloseModal -> Nav B and for G as NavCloseModal() -> NavF()

@wvvwwwvvw 2 года назад

Hi Sean. How do you modify the UI details of the modal? Eg I dont want the CornerRadius to be 5 and remove the shadows, but the customControl does not allow me to change those attributes? Thanks

@SingletonSean 2 года назад

Hey Aleksandr! My apologies, I probably didn't make the custom modal control very reusable and customizable. You may need to copy the modal control code into your own project, and then make the desired changes: github.com/SingletonSean/wpf-ui-workshops/tree/master/ModalControl

@InfiniteFreeTrial1 2 года назад

Hi Sean, Great work, If I've a "Cancel" button in the LoginView, I did the "CancelCommand" property in the LoginViewModel. How do I Close the current modal from that button?! I tried many times to close it but I don't get it. any help here ?

@InfiniteFreeTrial1 2 года назад

OK, I got it, just added a new CloseCommand class with private ModalNavStore and pass it to ctor. then in "Execute" method, get the Close method from ModalNavStore field. Many thanks to you♥ Keep sharing your experiences with us, it's very helpful.

@ShiLe97 8 месяцев назад

My modal got squeezed in my view and it stretches as i type username or password, any idea how to make it fixed size? I used your package.

@prereview28 Месяц назад

Could not install package 'SimpleModal.WPF 1.0.0'. You are trying to install this package into a project that targets '.NETFramework,Version=v4.7.2', but the package does not contain any assembly references or content files that are compatible with that framework. For more information, contact the package author. How to fix it?

@tanzib82 2 года назад

Hello Sean, me again. I had a question. is there way to open a modal on top of another modal. i.e. stack modals?

@SingletonSean 2 года назад

Good question Tanzib! There is a way, and here's a demo I put together for you: github.com/SingletonSean/wpf-tutorials/commit/9bbd733c3074ddd19c43e7e2266fe5f6961eaa75 The main idea is that now the ModalNavigationStore uses a Stack data structure. The CurrentViewModel (to display in the modal) is whatever view model is at the top of the stack. This would make a good video concept!

@tanzib82 2 года назад

@@SingletonSean Mate you are amazing!!! Thanks a lot.

@tanzib82 2 года назад

@@SingletonSean Hello Sean. I Have implemented the stacking Modal structure, thanks to your demo. I was wondering if there is a way to close all the stacks from one closeModalCommand? For instance if I have a saleVM that opens a returnSaleVM in modal, and ReturnSaleVM opens a CompleteReturnVM in modal-stack. Once the Return is completed I want to go back to SaleVM, hence closing CompleteReturnVM and ReturnSaleVM. Sorry for the long question. Thanks.

@SoloEnLaCasa Год назад

great that you share your knowledge with the community. Question: POPUP as a window and not as an UserControl. Is it possible to use a popup modal view as a WINDOW and not as an UserControl, I know that WPF + MVVM uses Views and they are mapped in the MainWindow, but is it possible to launch a second WINDOW without violating the concept of WPF + MVVM? Do you have any idea or a possible solution, how to do this challenge? Thank you very much for your response take care

@SingletonSean Год назад

Love the emoji usage MGA! I haven't tried launching a second window in an MVVM application, but I know it's possible. I've worked on projects in the past with this functionality, but I never looked at how it was implemented. Many people have asked about this, so I'll have to dig into it and find a solid solution!

@simonlester4316 10 месяцев назад

Hi, would you consider doing a series on ASP Net Core App, API ???

@SingletonSean 10 месяцев назад

Hi Simon, I will consider this! I enjoy API development so this would be fun 😁

@vladmartian 2 года назад

How about when I need to know the return action from the modal? How should I takle this?

@SingletonSean 2 года назад

Good question Vlad! This would essentially be view model communication, which I discuss here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-o62iFhXkWS4.html You could also pass a callback (Action) to the modal view model from the source view model. Then, the modal view model would execute the callback on submit, which would communicate back to the source view model. This is a pretty complex topic, so it might be worth its own video.

@vladmartian 2 года назад

@@SingletonSean thanks. I manage this topic with messaging. I am using the MVVM community toolkit for this.

@TheNimbleCoder 2 года назад

@@SingletonSean Hi Sean, Could the same approach be applied when I open a modal window, do some data manipulation in the modal and then need the opener to be notified/updated/refreshed with data when the modal is closed? Disclaimer: I've not tried the "communication approach" yet. My scenario is this. I have a parent window that displays user glyphs (clocked in users are green and others are gray) and a PIN entry. The user to enters their PIN and clicks the 'Clock In' button. The clock in modal opens where they enter their password. When 'Submit' is clicked (on the modal) I need the parent viewmodel's SelectedUser to be nulled. I'm providing the parent viewmodel (tightly coupling, which I will get away from) to the modal and have the modal calling back to a method on the parent but the PropertyChanged on the parent is null; therefore, nothing happens. Note: I am narrowing the parent viewmodel contract to a smaller one so as not to expose everything on it. Thanks, Mark

@TheNimbleCoder 2 года назад

@SingletonSean Hi Sean, I just implemented the communication approach and am seeing the same as before. The PropertyChanged on the parent is null; therefore, the parent view is not being updated. I guess I don't understand why the parent's OnPropertyChanged would be null in this case. My assumption is that it's not the "current view model"? Any thoughts would be greatly appreciated. Thanks, Mark

@TheNimbleCoder 2 года назад

Hi Sean, Sorry for the flurry of questions/comments. I got it figured out. I'm guessing the behavior was due to remnants of my tightly coupled providing of the parent view model and that alone was having ill effects on the OnPropertyChanged during the callback. I've properly implemented your "communication" approach and all is good. Thanks, Mark

@Speede04 2 года назад

Hey, great series and I really appreciate that you've made NuGet package to make our lives easier, but latest version of SimpleModel.WPF is for .NetCore 3.1 and does not work with newest, are you going to update it? :D

@SingletonSean 2 года назад

Thanks Świętopeł! What version of .NET are you using with SimpleModal.WPF? I just tested on .NET 6 and it worked successfully.

@Speede04 2 года назад

@@SingletonSean Yea you,re right. I already solve this problem. Just downloaded you git repository and copy/paste code to my project, but the real problem was that I am actually stupid and didn't notice that I was working on .NET Framework not .NET Core :D

@SingletonSean 2 года назад

Ah that would totally explain the problem hahaha. Glad you were able to solve that!!