advertisement

One of the problems I've had in the past with Lumi projects is the manageable UI. The project will start simple enough, but soon I'll be switching between device types, checking if the hardware is ready, and routing callbacks based on the selected device. It quickly turns into spaghetti code. On Lumi4, I decided to bite the bullet and implement MVVM. After about 20 hours struggling with setting up Lumi4 as an MVVM project, I came to two conclusions: - It is possible - Apple spoils developers with MVC integrated into Xcode MVVM in C# and UWP is not easy. It seems like a lot more boilerplate coding is needed for MVVM than for MVC in Xcode. Finally, I broke out and downloaded the NuGet Prism package, as an MVVM helper. This helped alleviate some of the code needed for Commanding (which I still don't understand well enough to implement without Prism). Next I'll take a look at a couple of controls I wrote MVVM in. Finding documentation for MVVM on the Universal Windows Plateform (UWP) is difficult. It is similar to XamarinForms and WPF, but in general there are syntax differences that make the documentation difficult to generalize. First, this is how I structured my project: *MainPage.xaml = View *MainViewViewModel = ViewModel *[Not yet written] = Model Below is some code for a couple of UI controls. First, look at the four text boxes that will contain the network IDs and host IDs that the user must type: Homepage.xaml .... .... This configures the binding to the HostIDOne, HostIDTwo, NetworkIDOne, NetworkIDTwo variables. However, there is a lot more boilerplate code before everything starts working. To configure a ViewModel, it is best to configure an abstract class that can be inherited. This saves on creating repetitive text. Below is the abstract class that the Internet asked me to make: MainViewModelBase.cs public abstract class MainViewModelBase: INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; protected virtual void OnPropertyChanged(string property name) { this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } } This code handles property change notification for all properties declared in classes that inherit from MainViewModelBase. Like the MainViewViewModel used in Lumi4 MainViewViewModel.cs .... public class MainViewViewModel: MainViewModelBase { .... Moving on to the actual implementation of bound text boxes. Each text box will have a property associated with the string value in the Text attribute. However, before this works, the DataContext for MainPage.xaml must be set. This is done in the MainPage.xaml.cs file. Homepage.xaml.cs public homepage() { this.InitializeComponent(); DataContext = new Lumi4App.ViewModels.MainViewViewModel(); (I told you it was a lot of work to set up. Well, compared to Xcode's MVC.) Ok, everything should be in place, time to implement the bound properties. In MainViewViewModel I have the following code: private string _HostIDone; public string HostIDOne { get { return _HostIDOne; } set { if (_HostIDOne != value) { _HostIDone = value;

advertisement

advertisement