41.02 Xamarin Custom user controls for Language View (Xamarin) - chempkovsky/CS2WPF-and-CS2XAMARIN GitHub Wiki

  • Preparation steps to first run Dm04WebApp
    • Set up default constructor of LitDbContext
        public LitDbContext() : base("name=LitConnection") { }

- Set up connection strings in the Web.config

    <add name="DefaultConnection"
    connectionString="Data Source=SVR2016SQL2017;Initial Catalog=AspNetDm04WebAppSecurity;Persist Security Info=True;User ID=sa;Password=YOUR_PASSWORD"
    providerName="System.Data.SqlClient" />
    <add name="LitConnection"
    connectionString="Data Source=SVR2016SQL2017;Initial Catalog=LitStorageDm04WebApp;Persist Security Info=True;User ID=sa;Password=YOUR_PASSWORD"
    providerName="System.Data.SqlClient" />

- Db Migration is not used for this demo app. Instead the following code have been executed in the small console app to create  Data Base on the SQL server

        Database.SetInitializer(new DropCreateDatabaseAlways<LitDbContext>());
        LitDbContext db = new LitDbContext();
        db.LitLanguageDbSet.FirstOrDefault();
        MessageBox.Show("The database was successfully created.", "Done", 
            MessageBoxButton.OK, MessageBoxImage.Information);
        Database.SetInitializer(new CreateDatabaseIfNotExists<LitDbContext>());

  • To Generate C# classes for the Language View

    • Run Visual Studio and Open “WpfDemo” solution
    • Under ModelInterfacesClassLibrary-project create folder
      • Literature/LitLanguage
    • Right Click the folder
      • Literature/LitLanguage
    • And select “Wpf Forms Wizard” menu item to open the Wizard dialog

  • Note:

    • On the first page of the dialog the destination folder is shown. The destination folder is the folder in which the generated file will be saved.

picture

- Click “Next”-button
  • On the second page of the dialog the developer should select existing DbContext file. Select:
    • Dm02Context (project)
    • LitDbContext (context)

picture

- Click “Next”-button
  • On the third page of the dialog the developer should select the View. Select:
    • “LitLanguageView“.
  • In the left panel select “UI List Properties” node and check "Shown" for all:
    • Iso3
    • Iso2
    • LanguageName

picture

  • In the left panel of the same page of the dialog select “UI Form Properties” node and check Shown for both properties. Set “InputType” as it is shown on the slide.

picture

- Click “Next”-button
  • On the fourth page click “batch processing”-button. “Batch actions” dialog will be shown.
    • Select “01100-Intefaces.json”
    • Click “Start”-button

picture

- Close both dialogs
  • On the fourth page click “batch processing”-button. “Batch actions” dialog will be shown.
    • Select “01100-Intefaces.json”
    • Click “Start”-button

picture

- Close both dialogs

  • Under ModelServicesPrismModule-project create folder

    • Literature/LitLanguage
    • Right Click the folder
      • Literature/LitLanguage
    • And select “Wpf Forms Wizard” menu item to open the Wizard dialog
    • Repeat all the steps until the “Batch Actions” dialog box appears.
    • Note:
      • The developer should not define again
        • “UI List Properties”
        • “UI Form Properties”
      • All settings were saved during the first batch.

  • In “Batch actions” dialog

    • Select “01400-ApiService.json”
      • Click “Start”-button
    • Select “01420-SForm.Xamarin.json”
      • Click “Start”-button
    • Select “01500-Eform.Xamarin.json”
      • Click “Start”-button
    • Select “01600-Lform.Xamarin.json”
      • Click “Start”-button
    • Select “01700-O2m.Xamarin.json”
      • Click “Start”-button
    • Select “01701-O2mPage.Xamarin.json”
      • Click “Start”-button
    • Select “01820-Redit.Xamarin.json”
      • Click “Start”-button
    • Select “01821-ReditPage.Xamarin.json”
      • Click “Start”-button
    • Select “01920-Rlist.Xamarin.json”
      • Click “Start”-button
    • Select “01921-RlistPage.Xamarin.json”
      • Click “Start”-button
    • Select “02020-Rdlist.Xamarin.json”
      • Click “Start”-button
    • Select “02021-RdlistPage.Xamarin.json”
      • Click “Start”-button
    • Close both dialogs

  • Note #1:

    • Sform is a search form for the given View
    • Eform is an Edit form for the given View
    • Lform is a wrapper for the two forms above.

  • Note #2:

    • Sform and Eform are the basic forms with all the user interface logic for the given View.
    • Other forms are wrappers for these two:
      • Derived from ContentView (viewmodel derives IRegionAware in terms of Prism). Such a controls are used for navigation inside small child window, i.e. inside separate child windows of so called "Feature"-window:
        • Lform
        • O2m
        • Redit
        • Rlist
        • Rdlist
      • Derived from ContentPage (viewmodel derives INavigationAware in terms of Prism):
        • O2mPage
        • ReditPage
        • RlistPage
        • RdlistPage

  • Under ModelServicesPrismModule-project

    • open the file "Literature/LitLanguage/LitLanguageViewService.cs" and take a look at the instruction at the beginning of the file. Do not follow the instructions:
/*
    In the file of IModule-class of the project for the current service the following lines of code must be inserted:

        public void RegisterTypes(IContainerRegistry containerRegistry)
        {
            ...
            containerRegistry.Register<ILitLanguageViewService, LitLanguageViewService>();
            ...
        }
*/
  • Under ModelServicesPrismModule-project
    • open the file "Literature/LitLanguage/ViewModels/LitLanguageViewSformViewModel.cs" and take a look at the instruction at the beginning of the file
    • open the file "Literature/LitLanguage/ViewModels/LitLanguageViewSdlgViewModel.cs" and take a look at the instruction at the beginning of the file
    • open the file "Literature/LitLanguage/ViewModels/LitLanguageViewEformViewModel.cs" and take a look at the instruction at the beginning of the file
    • open the file "Literature/LitLanguage/ViewModels/LitLanguageViewEdlgViewModel.cs" and take a look at the instruction at the beginning of the file
    • open the file "Literature/LitLanguage/ViewModels/LitLanguageViewLformViewModel.cs" and take a look at the instruction at the beginning of the file
    • open the file "Literature/LitLanguage/ViewModels/LitLanguageViewLdlgViewModel.cs" and take a look at the instruction at the beginning of the file
    • continue until the end

picture

  • Under ModelServicesPrismModule-project check that the RegisterTypes()-method of the ModelServicesPrismModuleModule.cs becomes as follows
        public void RegisterTypes(IContainerRegistry containerRegistry)
        {
            ...
            containerRegistry.Register<ModelInterfacesClassLibrary.Literature.LitLanguage.ILitLanguageViewService, ModelServicesPrismModule.Literature.LitLanguage.LitLanguageViewService>();
            Prism.Mvvm.ViewModelLocationProvider.Register<ModelServicesPrismModule.Literature.LitLanguage.UserControls.LitLanguageViewSformUserControl, ModelServicesPrismModule.Literature.LitLanguage.ViewModels.LitLanguageViewSformViewModel>();
            containerRegistry.Register<Xamarin.Forms.ContentView, ModelServicesPrismModule.Literature.LitLanguage.UserControls.LitLanguageViewSformUserControl>("LitLanguageViewSformUserControl");
            containerRegistry.RegisterDialog<ModelServicesPrismModule.Literature.LitLanguage.UserControls.LitLanguageViewSdlgUserControl, CommonUserControlLibrary.ViewModels.SdlgViewModelBase>("LitLanguageViewSdlgViewModel");
            Prism.Mvvm.ViewModelLocationProvider.Register<ModelServicesPrismModule.Literature.LitLanguage.UserControls.LitLanguageViewEformUserControl, ModelServicesPrismModule.Literature.LitLanguage.ViewModels.LitLanguageViewEformViewModel>();
            containerRegistry.Register<Xamarin.Forms.ContentView, ModelServicesPrismModule.Literature.LitLanguage.UserControls.LitLanguageViewEformUserControl>("LitLanguageViewEformUserControl");
            containerRegistry.RegisterDialog<ModelServicesPrismModule.Literature.LitLanguage.UserControls.LitLanguageViewEdlgUserControl, CommonUserControlLibrary.ViewModels.EdlgViewModelBase>("LitLanguageViewEdlgViewModel");
            Prism.Mvvm.ViewModelLocationProvider.Register<ModelServicesPrismModule.Literature.LitLanguage.UserControls.LitLanguageViewLformUserControl, ModelServicesPrismModule.Literature.LitLanguage.ViewModels.LitLanguageViewLformViewModel>();
            containerRegistry.Register<Xamarin.Forms.ContentView, ModelServicesPrismModule.Literature.LitLanguage.UserControls.LitLanguageViewLformUserControl>("LitLanguageViewLformUserControl");
            containerRegistry.RegisterDialog<ModelServicesPrismModule.Literature.LitLanguage.UserControls.LitLanguageViewLdlgUserControl, CommonUserControlLibrary.ViewModels.LdlgViewModelBase>("LitLanguageViewLdlgViewModel");
            Prism.Mvvm.ViewModelLocationProvider.Register<ModelServicesPrismModule.Literature.LitLanguage.UserControls.LitLanguageViewO2mUserControl, ModelServicesPrismModule.Literature.LitLanguage.ViewModels.LitLanguageViewO2mViewModel>();
            containerRegistry.RegisterForRegionNavigation<ModelServicesPrismModule.Literature.LitLanguage.UserControls.LitLanguageViewO2mUserControl, ModelServicesPrismModule.Literature.LitLanguage.ViewModels.LitLanguageViewO2mViewModel>("LitLanguageViewO2mUserControl");
            containerRegistry.Register<Xamarin.Forms.ContentView, ModelServicesPrismModule.Literature.LitLanguage.UserControls.LitLanguageViewO2mUserControl>("LitLanguageViewO2mUserControl");
            Prism.Mvvm.ViewModelLocationProvider.Register<ModelServicesPrismModule.Literature.LitLanguage.Views.LitLanguageViewO2mPage, ModelServicesPrismModule.Literature.LitLanguage.ViewModels.LitLanguageViewO2mPageViewModel>();
            containerRegistry.RegisterForNavigation<ModelServicesPrismModule.Literature.LitLanguage.Views.LitLanguageViewO2mPage, ModelServicesPrismModule.Literature.LitLanguage.ViewModels.LitLanguageViewO2mPageViewModel>("LitLanguageViewO2mPage");
            containerRegistry.Register<Xamarin.Forms.ContentPage, ModelServicesPrismModule.Literature.LitLanguage.Views.LitLanguageViewO2mPage>("LitLanguageViewO2mPage");
            Prism.Mvvm.ViewModelLocationProvider.Register<ModelServicesPrismModule.Literature.LitLanguage.UserControls.LitLanguageViewReditUserControl, ModelServicesPrismModule.Literature.LitLanguage.ViewModels.LitLanguageViewReditViewModel>();
            containerRegistry.RegisterForRegionNavigation<ModelServicesPrismModule.Literature.LitLanguage.UserControls.LitLanguageViewReditUserControl, ModelServicesPrismModule.Literature.LitLanguage.ViewModels.LitLanguageViewReditViewModel>("LitLanguageViewReditUserControl");
            containerRegistry.Register<Xamarin.Forms.ContentView, ModelServicesPrismModule.Literature.LitLanguage.UserControls.LitLanguageViewReditUserControl>("LitLanguageViewReditUserControl");
            Prism.Mvvm.ViewModelLocationProvider.Register<ModelServicesPrismModule.Literature.LitLanguage.Views.LitLanguageViewReditPage, ModelServicesPrismModule.Literature.LitLanguage.ViewModels.LitLanguageViewReditPageViewModel>();
            containerRegistry.RegisterForNavigation<ModelServicesPrismModule.Literature.LitLanguage.Views.LitLanguageViewReditPage, ModelServicesPrismModule.Literature.LitLanguage.ViewModels.LitLanguageViewReditPageViewModel>("LitLanguageViewReditPage");
            containerRegistry.Register<Xamarin.Forms.ContentPage, ModelServicesPrismModule.Literature.LitLanguage.Views.LitLanguageViewReditPage>("LitLanguageViewReditPage");
            Prism.Mvvm.ViewModelLocationProvider.Register<ModelServicesPrismModule.Literature.LitLanguage.UserControls.LitLanguageViewRlistUserControl, ModelServicesPrismModule.Literature.LitLanguage.ViewModels.LitLanguageViewRlistViewModel>();
            containerRegistry.RegisterForRegionNavigation<ModelServicesPrismModule.Literature.LitLanguage.UserControls.LitLanguageViewRlistUserControl, ModelServicesPrismModule.Literature.LitLanguage.ViewModels.LitLanguageViewRlistViewModel>("LitLanguageViewRlistUserControl");
            containerRegistry.Register<Xamarin.Forms.ContentView, ModelServicesPrismModule.Literature.LitLanguage.UserControls.LitLanguageViewRlistUserControl>("LitLanguageViewRlistUserControl");
            Prism.Mvvm.ViewModelLocationProvider.Register<ModelServicesPrismModule.Literature.LitLanguage.Views.LitLanguageViewRlistPage, ModelServicesPrismModule.Literature.LitLanguage.ViewModels.LitLanguageViewRlistPageViewModel>();
            containerRegistry.RegisterForNavigation<ModelServicesPrismModule.Literature.LitLanguage.Views.LitLanguageViewRlistPage, ModelServicesPrismModule.Literature.LitLanguage.ViewModels.LitLanguageViewRlistPageViewModel>("LitLanguageViewRlistPage");
            containerRegistry.Register<Xamarin.Forms.ContentPage, ModelServicesPrismModule.Literature.LitLanguage.Views.LitLanguageViewRlistPage>("LitLanguageViewRlistPage");
            Prism.Mvvm.ViewModelLocationProvider.Register<ModelServicesPrismModule.Literature.LitLanguage.UserControls.LitLanguageViewRdlistUserControl, ModelServicesPrismModule.Literature.LitLanguage.ViewModels.LitLanguageViewRdlistViewModel>();
            containerRegistry.RegisterForRegionNavigation<ModelServicesPrismModule.Literature.LitLanguage.UserControls.LitLanguageViewRdlistUserControl, ModelServicesPrismModule.Literature.LitLanguage.ViewModels.LitLanguageViewRdlistViewModel>("LitLanguageViewRdlistUserControl");
            containerRegistry.Register<Xamarin.Forms.ContentView, ModelServicesPrismModule.Literature.LitLanguage.UserControls.LitLanguageViewRdlistUserControl>("LitLanguageViewRdlistUserControl");
            Prism.Mvvm.ViewModelLocationProvider.Register<ModelServicesPrismModule.Literature.LitLanguage.Views.LitLanguageViewRdlistPage, ModelServicesPrismModule.Literature.LitLanguage.ViewModels.LitLanguageViewRdlistPageViewModel>();
            containerRegistry.RegisterForNavigation<ModelServicesPrismModule.Literature.LitLanguage.Views.LitLanguageViewRdlistPage, ModelServicesPrismModule.Literature.LitLanguage.ViewModels.LitLanguageViewRdlistPageViewModel>("LitLanguageViewRdlistPage");
            containerRegistry.Register<Xamarin.Forms.ContentPage, ModelServicesPrismModule.Literature.LitLanguage.Views.LitLanguageViewRdlistPage>("LitLanguageViewRdlistPage");

        }
  • Open "Views\MainFlyoutPage.xaml"-file of the PrismDemoApp-project
  • Modify content of StackLayout as shown:
                <StackLayout Padding="20" >
...
                    <Label Text="Language"/>
                    <Button BackgroundColor="Transparent"  Text="L Dialog"  Command="{Binding ShowDialogCommand}" CommandParameter="LitLanguageViewLdlgViewModel" />
                    <Button BackgroundColor="Transparent"  Text="R Page"    Command="{Binding NavigateCommand}" CommandParameter="LitLanguageViewRlistPage" />
                    <Button BackgroundColor="Transparent"  Text="Rd Page"   Command="{Binding NavigateCommand}" CommandParameter="LitLanguageViewRdlistPage" />
                    <Button BackgroundColor="Transparent"  Text="O2m Page"  Command="{Binding NavigateCommand}" CommandParameter="LitLanguageViewO2mPage" />
                </StackLayout>

Note

  • Here is how to get CommandParameters like [CommandParameter="LitLanguageViewO2mPage"]
    • Under ModelServicesPrismModule-project navigate to RegisterTypes()-method of the ModelServicesPrismModuleModule.cs
        public void RegisterTypes(IContainerRegistry containerRegistry)
        {

            containerRegistry.RegisterForRegionNavigation<ModelServicesPrismModule.Literature.LitLanguage.UserControls.LitLanguageViewO2mUserControl, ModelServicesPrismModule.Literature.LitLanguage.ViewModels.LitLanguageViewO2mViewModel>("LitLanguageViewO2mUserControl");
...
            containerRegistry.RegisterForRegionNavigation<ModelServicesPrismModule.Literature.LitLanguage.UserControls.LitLanguageViewReditUserControl, ModelServicesPrismModule.Literature.LitLanguage.ViewModels.LitLanguageViewReditViewModel>("LitLanguageViewReditUserControl");
...
            containerRegistry.RegisterForRegionNavigation<ModelServicesPrismModule.Literature.LitLanguage.UserControls.LitLanguageViewRlistUserControl, ModelServicesPrismModule.Literature.LitLanguage.ViewModels.LitLanguageViewRlistViewModel>("LitLanguageViewRlistUserControl");
...
            containerRegistry.RegisterForRegionNavigation<ModelServicesPrismModule.Literature.LitLanguage.UserControls.LitLanguageViewRdlistUserControl, ModelServicesPrismModule.Literature.LitLanguage.ViewModels.LitLanguageViewRdlistViewModel>("LitLanguageViewRdlistUserControl");
...
        }

Look for "containerRegistry.RegisterForRegionNavigation" with "...LitLanguage...".

Rebuild

  • rebuild
    • PrismDemoApp
  • run PrismDemoApp.Android
  • In the app click "R Page"-menu item of "Language"-block and add a pair of records

picture

or UWP

picture