33.02 Xamarin Custom user controls for Country 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.LitCountryDbSet.FirstOrDefault();
MessageBox.Show("The database was successfully created.", "Done",
MessageBoxButton.OK, MessageBoxImage.Information);
Database.SetInitializer(new CreateDatabaseIfNotExists<LitDbContext>());
-
To Generate C# classes for the Country View
- Run Visual Studio and Open “WpfDemo” solution
- Under ModelInterfacesClassLibrary-project create folder
- Literature/LitCountry
- Right Click the folder
- Literature/LitCountry
- 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.
- Click “Next”-button
- On the second page of the dialog the developer should select existing DbContext file. Select:
- Dm02Context (project)
- LitDbContext (context)
- Click “Next”-button
- On the third page of the dialog the developer should select the View. Select:
- “LitCountryView“.
- In the left panel select “UI List Properties” node and check "Shown" for all:
- Iso3
- Iso2
- CountryName
- 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.
- Click “Next”-button
- On the fourth page click “batch processing”-button. “Batch actions” dialog will be shown.
- Select “01100-Intefaces.json”
- Click “Start”-button
- Close both dialogs
-
Under ModelServicesPrismModule-project create folder
- Literature/LitCountry
- Right Click the folder
- Literature/LitCountry
- 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.
- The developer should not define again
-
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
- Select “01400-ApiService.json”
-
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
- 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:
-
Under ModelServicesPrismModule-project
- open the file "Literature/LitCountry/LitCountryViewService.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<ILitCountryViewService, LitCountryViewService>();
...
}
*/
- Under ModelServicesPrismModule-project
- open the file "Literature/LitCountry/ViewModels/LitCountryViewSformViewModel.cs" and take a look at the instruction at the beginning of the file
- open the file "Literature/LitCountry/ViewModels/LitCountryViewSdlgViewModel.cs" and take a look at the instruction at the beginning of the file
- open the file "Literature/LitCountry/ViewModels/LitCountryViewEformViewModel.cs" and take a look at the instruction at the beginning of the file
- open the file "Literature/LitCountry/ViewModels/LitCountryViewEdlgViewModel.cs" and take a look at the instruction at the beginning of the file
- open the file "Literature/LitCountry/ViewModels/LitCountryViewLformViewModel.cs" and take a look at the instruction at the beginning of the file
- open the file "Literature/LitCountry/ViewModels/LitCountryViewLdlgViewModel.cs" and take a look at the instruction at the beginning of the file
- continue until the end
- Under ModelServicesPrismModule-project check that the RegisterTypes()-method of the ModelServicesPrismModuleModule.cs becomes as follows
public void RegisterTypes(IContainerRegistry containerRegistry)
{
...
containerRegistry.Register<ModelInterfacesClassLibrary.Literature.LitCountry.ILitCountryViewService, ModelServicesPrismModule.Literature.LitCountry.LitCountryViewService>();
Prism.Mvvm.ViewModelLocationProvider.Register<ModelServicesPrismModule.Literature.LitCountry.UserControls.LitCountryViewSformUserControl, ModelServicesPrismModule.Literature.LitCountry.ViewModels.LitCountryViewSformViewModel>();
containerRegistry.Register<Xamarin.Forms.ContentView, ModelServicesPrismModule.Literature.LitCountry.UserControls.LitCountryViewSformUserControl>("LitCountryViewSformUserControl");
containerRegistry.RegisterDialog<ModelServicesPrismModule.Literature.LitCountry.UserControls.LitCountryViewSdlgUserControl, CommonUserControlLibrary.ViewModels.SdlgViewModelBase>("LitCountryViewSdlgViewModel");
Prism.Mvvm.ViewModelLocationProvider.Register<ModelServicesPrismModule.Literature.LitCountry.UserControls.LitCountryViewEformUserControl, ModelServicesPrismModule.Literature.LitCountry.ViewModels.LitCountryViewEformViewModel>();
containerRegistry.Register<Xamarin.Forms.ContentView, ModelServicesPrismModule.Literature.LitCountry.UserControls.LitCountryViewEformUserControl>("LitCountryViewEformUserControl");
containerRegistry.RegisterDialog<ModelServicesPrismModule.Literature.LitCountry.UserControls.LitCountryViewEdlgUserControl, CommonUserControlLibrary.ViewModels.EdlgViewModelBase>("LitCountryViewEdlgViewModel");
Prism.Mvvm.ViewModelLocationProvider.Register<ModelServicesPrismModule.Literature.LitCountry.UserControls.LitCountryViewLformUserControl, ModelServicesPrismModule.Literature.LitCountry.ViewModels.LitCountryViewLformViewModel>();
containerRegistry.Register<Xamarin.Forms.ContentView, ModelServicesPrismModule.Literature.LitCountry.UserControls.LitCountryViewLformUserControl>("LitCountryViewLformUserControl");
containerRegistry.RegisterDialog<ModelServicesPrismModule.Literature.LitCountry.UserControls.LitCountryViewLdlgUserControl, CommonUserControlLibrary.ViewModels.LdlgViewModelBase>("LitCountryViewLdlgViewModel");
Prism.Mvvm.ViewModelLocationProvider.Register<ModelServicesPrismModule.Literature.LitCountry.UserControls.LitCountryViewO2mUserControl, ModelServicesPrismModule.Literature.LitCountry.ViewModels.LitCountryViewO2mViewModel>();
containerRegistry.RegisterForRegionNavigation<ModelServicesPrismModule.Literature.LitCountry.UserControls.LitCountryViewO2mUserControl, ModelServicesPrismModule.Literature.LitCountry.ViewModels.LitCountryViewO2mViewModel>("LitCountryViewO2mUserControl");
containerRegistry.Register<Xamarin.Forms.ContentView, ModelServicesPrismModule.Literature.LitCountry.UserControls.LitCountryViewO2mUserControl>("LitCountryViewO2mUserControl");
Prism.Mvvm.ViewModelLocationProvider.Register<ModelServicesPrismModule.Literature.LitCountry.Views.LitCountryViewO2mPage, ModelServicesPrismModule.Literature.LitCountry.ViewModels.LitCountryViewO2mPageViewModel>();
containerRegistry.RegisterForNavigation<ModelServicesPrismModule.Literature.LitCountry.Views.LitCountryViewO2mPage, ModelServicesPrismModule.Literature.LitCountry.ViewModels.LitCountryViewO2mPageViewModel>("LitCountryViewO2mPage");
containerRegistry.Register<Xamarin.Forms.ContentPage, ModelServicesPrismModule.Literature.LitCountry.Views.LitCountryViewO2mPage>("LitCountryViewO2mPage");
Prism.Mvvm.ViewModelLocationProvider.Register<ModelServicesPrismModule.Literature.LitCountry.UserControls.LitCountryViewReditUserControl, ModelServicesPrismModule.Literature.LitCountry.ViewModels.LitCountryViewReditViewModel>();
containerRegistry.RegisterForRegionNavigation<ModelServicesPrismModule.Literature.LitCountry.UserControls.LitCountryViewReditUserControl, ModelServicesPrismModule.Literature.LitCountry.ViewModels.LitCountryViewReditViewModel>("LitCountryViewReditUserControl");
containerRegistry.Register<Xamarin.Forms.ContentView, ModelServicesPrismModule.Literature.LitCountry.UserControls.LitCountryViewReditUserControl>("LitCountryViewReditUserControl");
Prism.Mvvm.ViewModelLocationProvider.Register<ModelServicesPrismModule.Literature.LitCountry.Views.LitCountryViewReditPage, ModelServicesPrismModule.Literature.LitCountry.ViewModels.LitCountryViewReditPageViewModel>();
containerRegistry.RegisterForNavigation<ModelServicesPrismModule.Literature.LitCountry.Views.LitCountryViewReditPage, ModelServicesPrismModule.Literature.LitCountry.ViewModels.LitCountryViewReditPageViewModel>("LitCountryViewReditPage");
containerRegistry.Register<Xamarin.Forms.ContentPage, ModelServicesPrismModule.Literature.LitCountry.Views.LitCountryViewReditPage>("LitCountryViewReditPage");
Prism.Mvvm.ViewModelLocationProvider.Register<ModelServicesPrismModule.Literature.LitCountry.UserControls.LitCountryViewRlistUserControl, ModelServicesPrismModule.Literature.LitCountry.ViewModels.LitCountryViewRlistViewModel>();
containerRegistry.RegisterForRegionNavigation<ModelServicesPrismModule.Literature.LitCountry.UserControls.LitCountryViewRlistUserControl, ModelServicesPrismModule.Literature.LitCountry.ViewModels.LitCountryViewRlistViewModel>("LitCountryViewRlistUserControl");
containerRegistry.Register<Xamarin.Forms.ContentView, ModelServicesPrismModule.Literature.LitCountry.UserControls.LitCountryViewRlistUserControl>("LitCountryViewRlistUserControl");
Prism.Mvvm.ViewModelLocationProvider.Register<ModelServicesPrismModule.Literature.LitCountry.Views.LitCountryViewRlistPage, ModelServicesPrismModule.Literature.LitCountry.ViewModels.LitCountryViewRlistPageViewModel>();
containerRegistry.RegisterForNavigation<ModelServicesPrismModule.Literature.LitCountry.Views.LitCountryViewRlistPage, ModelServicesPrismModule.Literature.LitCountry.ViewModels.LitCountryViewRlistPageViewModel>("LitCountryViewRlistPage");
containerRegistry.Register<Xamarin.Forms.ContentPage, ModelServicesPrismModule.Literature.LitCountry.Views.LitCountryViewRlistPage>("LitCountryViewRlistPage");
Prism.Mvvm.ViewModelLocationProvider.Register<ModelServicesPrismModule.Literature.LitCountry.UserControls.LitCountryViewRdlistUserControl, ModelServicesPrismModule.Literature.LitCountry.ViewModels.LitCountryViewRdlistViewModel>();
containerRegistry.RegisterForRegionNavigation<ModelServicesPrismModule.Literature.LitCountry.UserControls.LitCountryViewRdlistUserControl, ModelServicesPrismModule.Literature.LitCountry.ViewModels.LitCountryViewRdlistViewModel>("LitCountryViewRdlistUserControl");
containerRegistry.Register<Xamarin.Forms.ContentView, ModelServicesPrismModule.Literature.LitCountry.UserControls.LitCountryViewRdlistUserControl>("LitCountryViewRdlistUserControl");
Prism.Mvvm.ViewModelLocationProvider.Register<ModelServicesPrismModule.Literature.LitCountry.Views.LitCountryViewRdlistPage, ModelServicesPrismModule.Literature.LitCountry.ViewModels.LitCountryViewRdlistPageViewModel>();
containerRegistry.RegisterForNavigation<ModelServicesPrismModule.Literature.LitCountry.Views.LitCountryViewRdlistPage, ModelServicesPrismModule.Literature.LitCountry.ViewModels.LitCountryViewRdlistPageViewModel>("LitCountryViewRdlistPage");
containerRegistry.Register<Xamarin.Forms.ContentPage, ModelServicesPrismModule.Literature.LitCountry.Views.LitCountryViewRdlistPage>("LitCountryViewRdlistPage");
}
- Open "Views\MainFlyoutPage.xaml"-file of the PrismDemoApp-project
- Modify content of StackLayout as shown:
<StackLayout Padding="20" >
...
<Label Text="Country"/>
<Button BackgroundColor="Transparent" Text="L Dialog" Command="{Binding ShowDialogCommand}" CommandParameter="LitCountryViewLdlgViewModel" />
<Button BackgroundColor="Transparent" Text="R Page" Command="{Binding NavigateCommand}" CommandParameter="LitCountryViewRlistPage" />
<Button BackgroundColor="Transparent" Text="Rd Page" Command="{Binding NavigateCommand}" CommandParameter="LitCountryViewRdlistPage" />
<Button BackgroundColor="Transparent" Text="O2m Page" Command="{Binding NavigateCommand}" CommandParameter="LitCountryViewO2mPage" />
</StackLayout>
Note
- Here is how to get CommandParameters like [CommandParameter="LitCountryViewO2mPage"]
- Under ModelServicesPrismModule-project navigate to RegisterTypes()-method of the ModelServicesPrismModuleModule.cs
public void RegisterTypes(IContainerRegistry containerRegistry)
{
containerRegistry.RegisterForRegionNavigation<ModelServicesPrismModule.Literature.LitCountry.UserControls.LitCountryViewO2mUserControl, ModelServicesPrismModule.Literature.LitCountry.ViewModels.LitCountryViewO2mViewModel>("LitCountryViewO2mUserControl");
...
containerRegistry.RegisterForRegionNavigation<ModelServicesPrismModule.Literature.LitCountry.UserControls.LitCountryViewReditUserControl, ModelServicesPrismModule.Literature.LitCountry.ViewModels.LitCountryViewReditViewModel>("LitCountryViewReditUserControl");
...
containerRegistry.RegisterForRegionNavigation<ModelServicesPrismModule.Literature.LitCountry.UserControls.LitCountryViewRlistUserControl, ModelServicesPrismModule.Literature.LitCountry.ViewModels.LitCountryViewRlistViewModel>("LitCountryViewRlistUserControl");
...
containerRegistry.RegisterForRegionNavigation<ModelServicesPrismModule.Literature.LitCountry.UserControls.LitCountryViewRdlistUserControl, ModelServicesPrismModule.Literature.LitCountry.ViewModels.LitCountryViewRdlistViewModel>("LitCountryViewRdlistUserControl");
...
}
Look for "containerRegistry.RegisterForRegionNavigation" with "...LitCountry...".
Rebuild
- rebuild
- PrismDemoApp
- run PrismDemoApp.Android
- In the app click "R Page"-menu item of "Country"-block and add a pair of records
or UWP