Opis przygotowany na podstawie pracy magisterskiej Dawida Czaji "Programowanie wieloplatformowych aplikacji z użyciem Xamarin i MVVMCross" (UMK 2018)

1. Przygotowanie szablonu projektów Xamarin+MVVMCross częścią wspólną w postaci PCL

a. Tworzymy nowy projekt typu Android App (Xamarin) z szablonem Blank App

Name: Kolory.Android
Solution name: Kolory

b. Do rozwiązania dodajmy projekt typu Class Library (Legacy Portable) o nazwie Kolory.Core

Do obsługiwanych platform dodajmy Windows Universal 10.0, a usuwamy .NET Framework 4.5.1 (niektóre wtyczki nie obsługują tej platformy)
Można z tego projektu usunąć plik Class1.cs

c. Do rozwiązania dodajmy projekt typu Blank App (Universal Windows) o nazwie Kolory.UWP

d. We wszystkich trzech projektach instalujemy pakiet NuGet o nazwie MvvmCross.StarterPack (u mnie jest wersja 5.7.0)


2. Projekt PCL

a. Instalujemy wtyczkę służącą do obsługi kolorów w poszczególnych platformach - pakiet NuGet MvvmCross.Plugin.Color 
   (u mnie najnowsza wersja 6.6.2, ale zainstalowałem 5.7.0 ze względu na zgodność z wybranymi platformami)

b. Tworzymy folder Models i umieszczamy w nim klasę KolorModel (plik KolorModel.cs)

namespace Kolory.Core.Models
{
    class KolorModel
    {
        public byte R, G, B;

        public KolorModel(byte r, byte g, byte b)
        {
            R = r;
            G = g;
            B = b;
        }

        public void Resetuj()
        {
            R = 0;
            G = 0;
            B = 0;
        }
    }
}

c. w pliku ViewModels\MainViewModel.cs usuwamy niepotrzebną własność Text, pole _text, metodę ResetText i polecenie,
   a następnie dodajemy własności opisujące składowe koloru oraz własność typu MvxColor z wtyczki

using System.Threading.Tasks;
using MvvmCross.Core.ViewModels;
using MvvmCross.Platform.UI;

namespace Kolory.Core.ViewModels
{
    public class MainViewModel : MvxViewModel
    {
        private Models.KolorModel model = new Models.KolorModel(0, 0, 0);

        public MainViewModel()
        {
        }
        
        public override Task Initialize()
        {
            //TODO: Add starting logic here
		    
            return base.Initialize();
        }

        public byte R
        {
            get
            {
                return model.R;
            }
            set
            {
                model.R = value;
                RaisePropertyChanged(nameof(R));
                RaisePropertyChanged(nameof(Kolor));
            }
        }

        public byte G
        {
            get
            {
                return model.G;
            }
            set
            {
                model.G = value;
                RaisePropertyChanged(nameof(G));
                RaisePropertyChanged(nameof(Kolor));
            }
        }

        public byte B
        {
            get
            {
                return model.B;
            }
            set
            {
                model.B = value;
                RaisePropertyChanged(nameof(B));
                RaisePropertyChanged(nameof(Kolor));
            }
        }

        public MvxColor Kolor
        {
            get
            {
                return new MvxColor(R, G, B);
            }
        }
    }
}

Klasa MvxViewModel implementuje interfejs INotifyPropertyChanges - stąd wywołania RaisePropertyChanged, która zgłasz zdarzenie PropertyChanged.

d. Dodajemy metodę resetującą kolor i polecenie, które ją wywołuje

        public void Resetuj()
        {
            model.Resetuj();
            RaisePropertyChanged(nameof(R));
            RaisePropertyChanged(nameof(G));
            RaisePropertyChanged(nameof(B));
            RaisePropertyChanged(nameof(Kolor));
        }

        public IMvxCommand ResetujCommand
        {
            get
            {
                return new MvxCommand(Resetuj);
            }
        }
        //public IMvxCommand ResetujCommand => new MvxCommand(Resetuj);

e. Przechodzimy do pliku App.cs i zmieniamy wywołanie przestarzałej metody RegisterAppStart na RegisterNavigationServiceAppStart

using MvvmCross.Platform.IoC;

namespace Kolory.Core
{
    public class App : MvvmCross.Core.ViewModels.MvxApplication
    {
        public override void Initialize()
        {
            CreatableTypes()
                .EndingWith("Service")
                .AsInterfaces()
                .RegisterAsLazySingleton();

            //RegisterAppStart<ViewModels.MainViewModel>();
            RegisterNavigationServiceAppStart<ViewModels.MainViewModel>();
        }
    }
}


3. Aplikacja-widok dla Xamarin-Android

a. W pliku MainActivity.cs zmieniamy klasę bazową klasy MainActivity na MvxActivity i nazwę klasy z MainActivity na MainView

Uwaga! Nazwa klasy jest ważna - wiązanie z modelem widoku na podstawie nazwy MainView -> MainViewModel

using Android.App;
using Android.OS;
using MvvmCross.Droid.Views;

namespace Kolory.Android
{
    [Activity(Label = "@string/app_name", Theme = "@style/AppTheme", MainLauncher = true)]
    public class MainView : MvxActivity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.activity_main);
        }
    }
}

b. Dodajemy odwołanie do projektu Kolory.Core

c. Tworzymy klasę Setup w pliku Setup.cs (powinna była powstać automatycznie po instalacji MvvmCross.StarterPack)

using Android.Content;
using MvvmCross.Core.ViewModels;
using MvvmCross.Droid.Platform;
using MvvmCross.Platform.Platform;

namespace Kolory.Android
{
    public class Setup : MvxAndroidSetup
    {
        public Setup(Context applicationContext)
            :base(applicationContext)
        { }

        protected override IMvxApplication CreateApp()
        {
            return new Core.App();
        }

        protected override IMvxTrace CreateDebugTrace()
        {
            return new MvxDebugTrace();
        }
    }
}

d. Zmieniamy plik widoku Resource\layout\activity_main.axml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" 
    android:background="#000000" >

  <TextView
        android:id="@+id/etykieta_panel"
        android:layout_width="match_parent"
        android:layout_margin="10dip"
        android:padding="10dip"
        android:layout_height="200dip"        
        android:background="#555555"
        android:textColor="#FFFFFF"
       	android:textSize="15dip"       
	android:text="0"        
	app:MvxBind="Text R, Mode=OneWay" />

  <SeekBar
      android:id="@+id/seekBarR"
      android:max="255"
      android:progress="50"
      android:padding="5dip"
      android:layout_marginTop="10dip"
      android:layout_width="match_parent"
      android:layout_height="wrap_content" 
      app:MvxBind="Progress R, Mode=TwoWay" />

  <SeekBar
      android:id="@+id/seekBarG"
      android:max="255"
      android:progress="100"
      android:padding="5dip"
      android:layout_marginTop="5dip"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      app:MvxBind="Progress G, Mode=TwoWay" />

  <SeekBar
      android:id="@+id/seekBarB"
      android:max="255"
      android:progress="150"
      android:padding="5dip"
      android:layout_marginTop="5dip"
      android:layout_width="match_parent"
      android:layout_height="wrap_content" 
      app:MvxBind="Progress B, Mode=TwoWay" />
  
   <Button
       android:id="@+id/buttonReset"
       android:layout_marginTop="5dip"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="Resetuj"
       app:MvxBind="Click ResetujCommand" />

</LinearLayout>

e. Aby zbindować tło pierwszej kontrolki z własnością Kolor typu MvxColor instalujemy 
   w projekcie dla Android wtyczkę MvvmCross.Plugin.Color (konsekwentnie wersję 5.7.0)

I tym razem nie utworzone zostały katalogi i pliki, jakie powinny były powstać.
Wobec tego w klasie Setup nadpisujemy metodę LoadPlugins:

        public override void LoadPlugins(IMvxPluginManager pluginManager)
        {
            pluginManager.EnsurePluginLoaded<MvvmCross.Plugins.Color.PluginLoader>();
            base.LoadPlugins(pluginManager);
        }

e. Tworzymy plik Konwertery.cs, a w nim umieszczamy klasę:


using MvvmCross.Plugins.Color;

namespace Kolory.Android
{
    class NativeColorValueConverter : MvxNativeColorValueConverter
    {
    }
}

Uwaga! Własne konwertery można wstawiać do części wspólnej (PCL) zob. https://www.mvvmcross.com/documentation/fundamentals/value-converters, https://medium.com/@casseykeating/mvvmcross-value-converters-2dbd0259fb78

d. Zmieniamy plik widoku Resource\layout\activity_main.axml
   Usuwamy własność background (typu Drawable, Ważne!!!!!!) i wiążemy z BackgroundColor

  <TextView
        android:id="@+id/etykieta_panel"
        android:layout_width="match_parent"
        android:layout_margin="10dip"
        android:padding="10dip"
        android:layout_height="200dip"        
        android:textColor="#FFFFFF"
       	android:textSize="15dip"       
	android:text="0"        
	app:MvxBind="BackgroundColor NativeColor(Kolor), Mode=OneWay; Text R, Mode=OneWay" />


4. Aplikacja UWP

a. Przełączamy Set as Startup project

b. Dodajemy referencję do części wspólnej tj. projektu Kolory.Core

c. Dodajemy klasę Setup (plik Setup.cs)

using MvvmCross.Core.ViewModels;
using MvvmCross.Platform.Logging;
using MvvmCross.Uwp.Platform;
using Windows.UI.Xaml.Controls;

namespace Kolory.UWP
{
    public class Setup : MvxWindowsSetup
    {
        public Setup(Frame rootFrame)
            :base(rootFrame)
        { }

        protected override IMvxApplication CreateApp()
        {
            return new Core.App();
        }

        protected override MvxLogProviderType GetDefaultLogProviderType()
        {
            return MvxLogProviderType.None;
        }
    }
}

d. Modyfikujemy plik App.xaml.cs dodając do OnLaunched kod odpowiedzialny za inicję MVVMCross:

        protected override void OnLaunched(LaunchActivatedEventArgs e)
        {
            Frame rootFrame = Window.Current.Content as Frame;

            // Do not repeat app initialization when the Window already has content,
            // just ensure that the window is active
            if (rootFrame == null)
            {
                // Create a Frame to act as the navigation context and navigate to the first page
                rootFrame = new Frame();

                rootFrame.NavigationFailed += OnNavigationFailed;

                if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
                {
                    //TODO: Load state from previously suspended application
                }

                // Place the frame in the current Window
                Window.Current.Content = rootFrame;
            }

            /*
            if (e.PrelaunchActivated == false)
            {
                if (rootFrame.Content == null)
                {
                    // When the navigation stack isn't restored navigate to the first page,
                    // configuring the new page by passing required information as a navigation
                    // parameter
                    rootFrame.Navigate(typeof(MainPage), e.Arguments);
                }
                // Ensure the current window is active
                Window.Current.Activate();
            }
            */

            if (e.PrelaunchActivated == false)
            {
                if (rootFrame.Content == null)
                {
                    Setup setup = new Setup(rootFrame); <--------------------------------
                    setup.Initialize();
                    MvvmCross.Core.ViewModels.IMvxAppStart start = MvvmCross.Platform.Mvx.Resolve<MvvmCross.Core.ViewModels.IMvxAppStart>();
                    start.Start();
                }                
                Window.Current.Activate();
            }
        }

e. Do projektu dodajemy plik klasy KolorPage:

using MvvmCross.Uwp.Views;

namespace Kolory.UWP
{
    public class KolorPage : MvxWindowsPage
    {
    }
}

e. W pliku MainPage.xaml.cs zmieniamy klasę bazową z Page na KolorPage

namespace Kolory.UWP
{
    public sealed partial class MainPage : KolorPage
    {
        public MainPage()            
        {
            this.InitializeComponent();
        }
    }
}

f. Konsekwentnie w pliku MainPage.xaml zmieniamy również element główny:

<local:KolorPage
    x:Class="Kolory.UWP.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Kolory.UWP"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>

    </Grid>
</local:KolorPage>

g. Definiujemy konwerter (zwykły z .NET/UWP) w pliku Konwertery.cs

using System;
using Windows.UI.Xaml.Data;

namespace Kolory.UWP
{
    public class ByteToDoubleConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, string language)
        {
            return (double)(byte)value;
        }

        public object ConvertBack(object value, Type targetType, object parameter, string language)
        {
            return (byte)(double)value;
        }
    }
}

h. W kodzie XAML zmieniamy siatkę na stos i wstawiamy kontrolki z wiązaniami:

<local:KolorPage
    x:Class="Kolory.UWP.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Kolory.UWP"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Page.Resources>
        <local:ByteToDoubleConverter x:Key="byte2double" />
    </Page.Resources>
    
    <StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Rectangle Name="rectangle" Margin="10,10,10,10" Height="400" Fill="Black" />
        <TextBlock Margin="10,10,10,10" Text="{Binding R, Mode=OneWay}" />
        <Slider Name="sliderR" Margin="10,10,10,10" Maximum="255" SmallChange="1" Value="{Binding R, Mode=TwoWay, Converter={StaticResource byte2double}}" />
        <Slider Name="sliderG" Margin="10,0,10,10" Maximum="255" SmallChange="1" Value="{Binding G, Mode=TwoWay, Converter={StaticResource byte2double}}" />
        <Slider Name="sliderB" Margin="10,0,10,10" Maximum="255" SmallChange="1" Value="{Binding B, Mode=TwoWay, Converter={StaticResource byte2double}}" />
        <Button Content="Resetuj" Margin="10,10,10,10" Command="{Binding ResetujCommand, Mode=OneWay}" />
    </StackPanel>
    
</local:KolorPage>

Uwaga! Proszę zwrócić uwagę, że nie definiujemy DataContext - to jest załatwiane w klasie bazowej MvxWindowsPage

i. Aby użyć własności Kolor z modelu widoku do projektu dodajemy plugin MvvmCross.Plugin.Color w wersji 5.7.0

j. W klasie Setup nadpisujemy metodę LoadPlugins:

        public override void LoadPlugins(IMvxPluginManager pluginManager)
        {
            pluginManager.EnsurePluginLoaded<MvvmCross.Plugins.Color.PluginLoader>();
            base.LoadPlugins(pluginManager);
        }

k. Do pliku Konwertery.cs dodajemy konwerter dla koloru:

using MvvmCross.Platform.Uwp.Converters;
using MvvmCross.Plugins.Color;
using System;
using Windows.UI.Xaml.Data;

namespace Kolory.UWP
{
    public class ByteToDoubleConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, string language)
        {
            return (double)(byte)value;
        }

        public object ConvertBack(object value, Type targetType, object parameter, string language)
        {
            return (byte)(double)value;
        }
    }

    public class NativeColorConverter : MvxNativeValueConverter<MvxNativeColorValueConverter>
    {
    }
}

l. W pliku MainPage.xaml dodajemy nowy konwerter do zasobów i używamy go w wiązaniu koloru prostokąta:

    <Page.Resources>
        <local:ByteToDoubleConverter x:Key="byte2double" />
        <local:NativeColorConverter x:Key="nativeColor" />
    </Page.Resources>
    
    <StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Rectangle Name="rectangle" Margin="10,10,10,10" Height="400" Fill="{Binding Kolor, Converter={StaticResource nativeColor}, Mode=OneWay}" />