WPF 6 i MVVM, Data-Binding : Tutorial i podstawy

[@nataliasikorka4825]

Trochę informacji uzupełniających/wskazówek: - ViewModel - zamiast myślenia o nim jako reprezentacji modelu, można opisać go też jako abstrakcyjną definicję widoku, która opisuje co widok zawiera, ale nie opisuje jak to wygląda. Klasyczny przykład - ekran logowania. Wiemy że musi zawierać pole do uzupełnienia loginu, pole do uzupełnienia hasła, przycisk logowania i przycisk rejestracji. Na tej podstawie możemy zdefiniować model widoku - string Login, string Password, komenda do logowania oraz komenda do rejestracji. Co do przetrzymywania stanu są różne szkoły, ale - bindingi nie muszą się odnosić bezpośrednio do modelu. Czasami trudno jest wymyślić taki widok aby reprezentował model domenowy 1:1. W modelu widoku możemy zrobić binding do niezależnych propertiesów, które podczas jakiegoś zdarzenia tworzą nową instancję modelu i przekazują do serwisu. Polecam też wyrzucać ViewModele do osobnego projektu, dzięki temu mamy pewność że nie będziemy w nim mieszali kod dotyczący samych widoków. ViewModele powinny być całkowicie niezależne od samych widoków i nie mieć o nich żadnej wiedzy. Można sobie wyobrazić że macie aplikację desktopową w MVVM, przychodzi szef i mówi "klient chce tą aplikację również na telefon w Xamarinie". Jeżeli wasze ViewModele są wydzielone i dobrze napisane, powinny być jak najbardziej reużywalne w waszej mobilnej aplikacji. - code-behind/kod zaplecza - nie chodzi o to żeby w code-behind nie było żadnego kodu, jest to błędne myślenie. Chodzi o to aby w code-behind nie operować na modelach/wykonywać jakąkolwiek logikę aplikacji. Kod zaplecza jak najbardziej może zawierać manipulację dotyczące samego wyglądu widoku, czy jego informacji - manipulacją tłem przycisku, pozycja kontrolek, itp. jak najbardziej nadają się do code-behing. Zaryzykowałbym nawet stwierdzeniem, że wrzucanie tego do ViewModelu jest łamaniem MVVM, ponieważ twój widok przestaje być uniwersalny/niezależny od widoku. Polecam artykuł na ten temat - www.reactiveui.net/docs/handbook/view-models/ - crossplatformowy WPF - jako crossplatformową aplternatywę WPF polecam AvaloniaUI. Pisze się bardzo podobnie do WPF, ale działa na Windowsa, Linuxa czy macOC. Nie wyszła jeszcze oficjalna wersja, ale jest na tyle dojrzałą bibliotekę że można spokojnie pisać sensowne rzeczy. avaloniaui.net/ - bibliotek do pisania MVVM - jako bibliotekę do wzorca MVVM polecam gorąco ReactiveUI www.reactiveui.net/ można za jej pomocą pisać w WPF/Avaloni/Xamarinie/UWP i wiele innych. Pomaga pozbyć się "boilerplate code" związanego z INotifyPropertyChanged za pomocą atrybutu, ma własną implementację komendy - ReactiveCommand, ułatwia pisanie bindingów w kodzie, umożliwia ich przypisanie do eventów i wiele innych. Jej drugą mocną stroną jest to, że bazuje na bibliotece ReactiveX dla .NET - frontendowcy mogą znać ją pod aliasem RxJS dla javascriptu, dzięki czemu możemy z łatością operować na strumieniach zmianach modelu za pomocą operatorów Linq (ich odpowiedników dla interfejsu IObservable), czy łatwo pracować na wątkach za pomocą Schedulerów. reactivex.io Pozdrawiam ciepło i życzę jak najwięcej subów 😁

[@barttux6436]

Hej, super komentarz :) Mega, że wspomniałaś o code-behind w kontekście słynnego "don't touch it!" :D Zaciekawiły mnie dwa ostatnie punkty w Twoim komentarzu, ponieważ nigdy nie miałem do czynienia z tymi frameworkami / libkami. W związku z tym, jeśli można zapytać: - po krótkim reaserchu Avalonia wydaje się być mega, ale czy obecnie używanie jej jako głównego frameworka ze względu na cross-platformowość ma sens? Zwłaszcza, że na dzień dzisiejszy jest dość duży hype na świeży .NET MAUI - czy w praktyce i w pracy .NET-owcy używają ReactiveUI? I jak wygląda kwestia stabilności i szybkości (o ile jest w ogóle jakaś różnica) końcowej aplikacji po zaimplementowaniu go? Pozdrawiam serdecznie :)

[@DonaldFranciszekTusk]

Cześć, dzięki za rady. Planuję stworzyć pracę inżynierską w formie aplikacji produktywnościowej w WPF (jakieś notatki, planowanie w kalendarzu, tryb skupienia itp.). Powinienem zrobić to w MVVM? Pytam, bo np. taki RelayCommand jest dla mnie trochę skomplikowany. Jakbyś jeszcze miała jakieś rady, np. jak zabrać się za logikę biznesową, za konkretne funkcjonalności, w konkretnych ViewModelach, to bardzo bym był rad.

[@VarranComodoo]

super, rozdrąż temat jak najbardziej, kibicuje! i Czekam na kolejne materiały! Budowa własnych kontrolek osadzanych w XAML jak kazda defoultowa, przekazywanie danych miedzy ViewModelami różnych okien czy widoków, dynamicznie tworzone menu czy zakładki TabControl i wszystko zgodne z MVVM ;) Oraz najbardziej popularne schematy architektoniczne aplikacji biznesowych w WPF MVVM ;)

[@michalaraszczuk]

WPF 🥰

[@EcuTester]

Dziękuję za poradnik i twoją pracę ! 👍

[@rafalwel4990]

Świetna promocja Białej. Dziękuję.

[@arkadiuszbialeck325]

Strasznie niedoceniony kanał na polskim YT, oglądam wszystko na bieżąco, zasługujesz na większą widownie :D !

[@xMrTEDx]

[@piotrkrolewski3634]

Super , czekałem na materiał o tym

[@kamilgasiorek8548]

Bardzo ciekawy film, pozdro 😉

[@tomek_kot]

Taktyczny 👍

[@andrijs1521]

dzieki

[@marekk1748ptp]

Bardzo ułatwiają pracę z bindingem takie biblioteki jak propertychanged fody oraz caliburn micro

[@CezaryWalenciuk]

Kod do projektu : github.com/PanNiebieski/WPF-MVVM-SimpeExample

[@andrijs1521]

Ciekawe jak stan cross platform UI sporo na ten temat szukam ale nic nie ogarniam :D

[@DonaldFranciszekTusk]

Cześć. Planuję stworzyć pracę inżynierską w formie aplikacji produktywnościowej w WPF (jakieś notatki, planowanie w kalendarzu, tryb skupienia itp.). Powinienem zrobić to w MVVM? Pytam, bo np. taki RelayCommand jest dla mnie trochę skomplikowany. Jakbyś jeszcze miał jakieś rady, np. jak zabrać się za logikę biznesową, za konkretne funkcjonalności, w konkretnych ViewModelach, to bardzo bym był rad.

[@pawes9611]

Witam. Mam pytanie jak najlepiej bindować rysunki w WPF. Do tej pory użytwam , ale przy przełączeniach pomiędzy oknami rośnie mi użycie pamięci i podejrzewam właśnie że taki sposób bindowania jest tego powodem. Pliki mam w formacie PNG i są rozmiaru kilku kB, ale rysunków mam kilkanaście na stronie.

[@CezaryWalenciuk]

Po stronie kodu musisz mieć większą kontrolę nad odświeżaniem obrazka bo z tego co przeczytałem za każdym razem gdy zmieniasz coś nawet wielkość kontenera do obrazka to tworzysz nowy obrazek w pamięci

[@Gorenhir]

Trochę rozjaśniłeś tą kwestię, na uczelni tak się im śpieszyło że pokazali to tylko na zdarzeniach XDDD

[@bartomiejciurla8472]

Mam nadzieje że dane tego Customera, którego pokazujesz, są randomowe ;)

[@Fghhhg8883]

Microsoft kocha komplikować na potęgę

[@norbertjaworowski6314]

Nie zrozumiałem nic... Jednak pozostanę przy tym co jest mi wygodne.

[@CezaryWalenciuk]

a co jest wygodne ? Jeśli ASP.NET to rozumiem i dlatego w nim programuje ponad 10 lat

[@norbertjaworowski6314]

@@CezaryWalenciuk po prostu w głównym pliku mam niemal same funkcje obsługujące onClick i inne eventy. Każda taka funkcja odpala już konkretną funkcje w klasie statycznej, a każdy element, każda część programu jest w osobnej klasie. Może przez to mam trochę więcej plików i może mam pomieszany model z widokiem, ale tak się przyzwyczaiłem i tak jest mi wygodnie. Chce poprawić coś w panelu bocznym to wchodzę do pliku "panel boczny" i mam w nim wszystko. Ale ja nie pracuje zawodowo w tym fachu, dlatego mogę sobie pozwolić na nie trzymanie standardów ;) właściwie to wszystko jest kwestią przyzwyczajenia.