I want to use the Android.Dialog (Cross.UI) in my MvvmCross project. My first approach was to use AutoViews. As this feature is still fairly young, the alternative was to implement the dialog in touch and Droid platforms.
For now i'm just doing this for Droid and I need to programmatically bind the properties of the ViewModel to the elements of the Dialog.
My View and ViewModel code is the following:
View
public class DialogConfigurationView : MvxBindingDialogActivityView<DialogConfigurationViewModel>
{
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
DroidResources.Initialise(typeof(Resource.Layout));
Root = new RootElement()
{
new Section("Private Configuration")
{
new EntryElement("Name:"),
new EntryElement("Description:"),
new BooleanElement("Active?")
}
};
}
}
ViewModel
public class DialogConfigurationViewModel : MvxViewModel
{
public ConfigurationSet Configuration
{
get { return _configuration; }
set
{
if (_configuration != value)
{
_configuration = value;
RaisePropertyChanged(() => Configuration);
}
}
}
private ConfigurationSet _configuration;
}
My goal is to have a twoway bind the EntryElement("Name:") with the property ViewModel.Configuration.Name.
Can anyone help me with this? Can this be done?
I don't know if there are any monodroid.dialog mvvmcross samples floating around which don't use autoviews!
However.... the basic syntac for binding should be the same as MonoTouch.Dialog - e.g. something like:
new Section("Contact Info")
{
new StringElement("ID", ViewModel.Customer.ID ?? string.Empty),
new EntryElement("Name", "Name").Bind(this, "{'Value':{'Path':'Customer.Name'}}"),
new EntryElement("Website", "Website").Bind(this, "{'Value':{'Path':'Customer.Website'}}"),
new EntryElement("Primary Phone", "Phone").Bind(this, "{'Value':{'Path':'Customer.PrimaryPhone'}}"),
},
new Section("Primary Address")
{
new EntryElement("Address").Bind(this, "{'Value':{'Path':'Customer.PrimaryAddress.Street1'}}"),
new EntryElement("Address2").Bind(this, "{'Value':{'Path':'Customer.PrimaryAddress.Street2'}}"),
new EntryElement("City").Bind(this, "{'Value':{'Path':'Customer.PrimaryAddress.City'}}"),
new EntryElement("State").Bind(this, "{'Value':{'Path':'Customer.PrimaryAddress.State'}}"),
new EntryElement("Zip").Bind(this, "{'Value':{'Path':'Customer.PrimaryAddress.Zip'}}"),
},
from https://github.com/slodge/MvvmCross/blob/vnext/Sample%20-%20CustomerManagement/CustomerManagement/CustomerManagement.Touch/Views/BaseCustomerEditView.cs
Note that in MvvmCross bindings for MonoTouch and MonoDroid, the default binding for things like text edit boxes is generally TwoWay by default.
If you do get a sample running, then please feel free to post it to a gist or to a repo - or to blog about it - looks like we could do with some samples to work from!
Related
I'm trying to follow this article on .NET MAUI dependency injection.
My MauiProgram.cs
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.UseMauiCommunityToolkit()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
});
builder.Services.AddSingleton<IDataService, DataService>();
builder.Services.AddTransient<NavigationService>();
builder.Services.AddTransient<ValidationService>();
builder.Services.AddSingleton<BudgetViewPage>();
builder.Services.AddSingleton<BudgetViewModel>();
builder.Services.AddSingleton<AccountsViewModel>();
builder.Services.AddSingleton<FlyoutMenuRoot>();
return builder.Build();
}
}
My App.xaml.cs
public partial class App : Application
{
public App(FlyoutMenuRoot flyoutMenuRoot)
{
InitializeComponent();
MainPage = flyoutMenuRoot;
}
}
My FlyoutMenuRoot.xaml.cs
public partial class FlyoutMenuRoot : FlyoutPage
{
IDataService dataService;
BudgetViewModel budgetViewModel;
private NavigationService NavigationService = new();
public FlyoutMenuRoot(IDataService dataService, BudgetViewModel budgetViewModel)
{
InitializeComponent();
this.dataService = dataService;
this.budgetViewModel = budgetViewModel;
Detail = new NavigationPage(new BudgetViewPage(budgetViewModel));
flyoutMenuRoot.flyoutCollectionView.SelectionChanged += OnSelectionChanged;
}
void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
var item = e.CurrentSelection.FirstOrDefault() as FlyoutPageItem;
if(item != null)
{
if(item.TargetType == typeof(SelectAccountPage))
{
NavigationService.PushToStack((Page)Activator.CreateInstance(item.TargetType, new AccountsViewModel(dataService, budgetViewModel)));
}
else
{
NavigationService.PushToStack((Page)Activator.CreateInstance(item.TargetType));
}
this.IsPresented = false;
flyoutMenuRoot.flyoutCollectionView.SelectedItem = null;
}
}
}
Based on the linked article, this should work, but my app crashes on the splash screen.
If my App.xaml.cs is this:
public partial class App : Application
{
public App()
{
InitializeComponent();
DataService dataService = new();
BudgetViewModel budgetViewModel = new(dataService);
MainPage = new FlyoutMenuRoot(dataService, budgetViewModel);
}
}
Then it works with no problem.
My understanding is that you shouldn't have to new() up an instance of your classes with Dependency Injection, that the container will do it automatically for you based on what's listed in the constructor. I'm following the article, so why is it crashing?
Edit:
I stepped through the code and narrowed the crash down to the InitializeComponent() call under FlyoutMenuPage()
public partial class FlyoutMenuPage : ContentPage
{
public FlyoutMenuPage()
{
try
{
InitializeComponent();
}
catch (Exception ex)
{
Console.WriteLine(ex.Message);
}
}
}
The message written to the output window is:
[DOTNET] Position 11:5. StaticResource not found for key Primary
That's referencing this line in the FlyoutMenuPage.xaml
BackgroundColor="{StaticResource Primary}"
This is confounding because that line never threw an exception until I tried following the method for DI from the article. If I go back to constructor injection, it doesn't crash.
First.
DI is there for you, so you don't have to construct your classes manually. (As I told you yesterday) You add classes as Singletons, and at the same time, you are manually constructing them. DI will call those constructions when needed. Your idea that they are "never initialized" and you have to do it at least once is wrong.
Second.
DI is not "crashing" your app. If anything, not injecting services and/or ViewModels cause runtime exceptions. (When you try to navigate to something, that uses such Type in its constructor for example.) Not the oposite.
Third.
DI has very little to do with XAML/Resources problems. Especially with your BackgroundColor problem.
So I'm experiencing a logical issue. Take this App for example:
public partial class App : Application
{
public App(MainPage mp, MainPageViewModel vm)
{
InitializeComponent();
MainPage = mp; // new MainPage(); //AppShell();
MainPage.BindingContext= vm;
}
}
And in the App.xaml, we have this:
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MVVMDI"
x:Class="MVVMDI.App">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Resources/Styles/Colors.xaml" />
<ResourceDictionary Source="Resources/Styles/Styles.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
Because I have MainPage in my constructor, ready for dependency injection, the xaml in MainPage gets loaded up before the xaml in App. So, with that in mind, App.xaml hasn't yet registered the Colors.xaml because InitializeComponent hasn't been called yet. So because MainPage is trying to reference StaticResource Primary, which is in Colors.xaml, which hasn't been registered yet, I get my exception.
This answers my question as to why DI is making my app crash.
(So to solve this, I just need to find a way to register Colors.xaml application-wide like App does....)
I have spent over two weeks searching google, bing, stack overflow, and msdn docs trying to figure out how to do a proper dependency injection for a mobile app that I am developing. To be clear, I do DI every day in web apps. I do not need a crash course on what, who, and why DI is important. I know it is, and am always embracing it.
What I need to understand is how this works in a mobile app world, and in particular a UWP Template 10 Mobile app.
From my past, in a .net/Asp app I can "RegisterType(new XYZ).Singleton() blah" {please forgive syntax; just an example} in App_Start.ConfigureServices. This works almost identical in .netcore, granted some syntactic changes.
My problem is now I am trying to provide my api is going to an UWP app that needs to digest my IXYZ service. By no means do I think that they should "new" up an instance every time. There has to be a way to inject this into a container on the UWP side; and I feel I am missing something very simple in the process.
Here is the code I have:
App.xaml.cs
public override async Task OnStartAsync(StartKind startKind, IActivatedEventArgs args)
{
// TODO: add your long-running task here
//if (args.Kind == ActivationKind.LockScreen)
//{
//}
RegisterServices();
await NavigationService.NavigateAsync(typeof(Views.SearchCompanyPage));
}
public static IServiceProvider Container { get; private set; }
private static void RegisterServices()
{
var services = new ServiceCollection();
services.AddSingleton<IXYZ, XYZ>();
Container = services.BuildServiceProvider();
}
MainPage.xaml.cs:
public MainPage()
{
InitializeComponent();
NavigationCacheMode = NavigationCacheMode.Enabled;
}
MainPageViewModel:
public class MainPageViewModel : ViewModelBase
{
private readonly IXYZ _xyz;
public MainPageViewModel(IXYZ xyz)
{
//Stuff
_xyz= xyz;
}
}
I now get the error:
XAML MainPage...ViewModel type cannot be constructed. In order to be constructed in XAML, a type cannot be abstract, interface nested generic or a struct, and must have a public default constructor.
I am willing to use any brand of IoC Container, but what I need is an example of how to properly use DI for services in a UWP app. 99.9% of questions about DI is about Views (i.e. Prism?) not just a simple DI for a service (i.e. DataRepo; aka API/DataService).
Again, I feel I am missing something obvious and need a nudge in the right direction. Can somebody show me an example project, basic code, or a base flogging on how I should not be a programmer...please don't do that (I don't know if my ego could take it).
You can try to Microsoft.Hosting.Extensions just like ASP.NET, there's an implementation on Xamarin.Forms by James Montemagno, as well it can be used in UWP I have tried and it works perfectly. You have to change some parts in order to get it working.
In OnLaunched Method add Startup.Init();
public static class Startup
{
public static IServiceProvider ServiceProvider { get; set; }
public static void Init()
{
StorageFolder LocalFolder = ApplicationData.Current.LocalFolder;
var configFile = ExtractResource("Sales.Client.appsettings.json", LocalFolder.Path);
var host = new HostBuilder()
.ConfigureHostConfiguration(c =>
{
// Tell the host configuration where to file the file (this is required for Xamarin apps)
c.AddCommandLine(new string[] { $"ContentRoot={LocalFolder.Path}" });
//read in the configuration file!
c.AddJsonFile(configFile);
})
.ConfigureServices((c, x) =>
{
// Configure our local services and access the host configuration
ConfigureServices(c, x);
}).
ConfigureLogging(l => l.AddConsole(o =>
{
//setup a console logger and disable colors since they don't have any colors in VS
o.DisableColors = true;
}))
.Build();
//Save our service provider so we can use it later.
ServiceProvider = host.Services;
}
static void ConfigureServices(HostBuilderContext ctx, IServiceCollection services)
{
//ViewModels
services.AddTransient<HomeViewModel>();
services.AddTransient<MainPageViewModel>();
}
static string ExtractResource(string filename, string location)
{
var a = Assembly.GetExecutingAssembly();
using (var resFilestream = a.GetManifestResourceStream(filename))
{
if (resFilestream != null)
{
var full = Path.Combine(location, filename);
using (var stream = File.Create(full))
{
resFilestream.CopyTo(stream);
}
}
}
return Path.Combine(location, filename);
}
}
Injecting a ViewModel is possible as well which is pretty nice.
With help from #mvermef and the SO question Dependency Injection using Template 10 I found a solutions. This turned out to be a rabbit hole where at every turn I ran into an issue.
The first problem was just getting Dependency Injection to work. Once I was able to get that figured out from the sources above I was able to start injecting my services into ViewModels and setting them to the DataContext in the code behind.
Then I ran into an injection issue problem with injecting my IXYZ services into the ViewModels of UserControls.
Pages and their ViewModels worked great but I had issues with the DataContext of the UserControl not being injected with UserControl's ViewModel. They were instead getting injected by the Page's ViewModel that held it.
The final solution turned out to be making sure that the UserControl had the DataContext being set in XAML not the code behind, as we did with the Pages, and then creating a DependencyProperty in the code behind.
To show the basic solution read below.
To make it work I started with:
APP.XAML.CS
public override async Task OnStartAsync(StartKind startKind, IActivatedEventArgs args)
{
// long-running startup tasks go here
RegisterServices();
await Task.CompletedTask;
}
private static void RegisterServices()
{
var services = new ServiceCollection();
services.AddSingleton<IRepository, Repository>();
services.AddSingleton<IBinderService, BinderServices>();
**//ViewModels**
**////User Controls**
services.AddSingleton<AddressesControlViewModel, AddressesControlViewModel>();
services.AddSingleton<CompanyControlViewModel, CompanyControlViewModel>();
**//ViewModels**
**////Pages**
services.AddSingleton<CallListPageViewModel, CallListPageViewModel>();
services.AddSingleton<CallListResultPageViewModel, CallListResultPageViewModel>();
etc....
Container = services.BuildServiceProvider();
}
public override INavigable ResolveForPage(Page page, NavigationService navigationService)
{
**//INJECT THE VIEWMODEL FOR EACH PAGE**
**//ONLY THE PAGE NOT USERCONTROL**
if (page is CallListPage)
{
return Container.GetService<CallListPageViewModel>();
}
if (page is CallListResultPage)
{
return Container.GetService<CallListResultPageViewModel>();
}
etc...
return base.ResolveForPage(page, navigationService);
}
In the code behind for the Page
CALLLISTPAGE.XAML.CS
public CallListPage()
{
InitializeComponent();
}
CallListPageViewModel _viewModel;
public CallListPageViewModel ViewModel
{
get { return _viewModel ?? (_viewModel = (CallListPageViewModel)DataContext); }
}
In your XAML add your UserControl
CALLLISTPAGE.XAML
<binder:CompanyControl Company="{x:Bind ViewModel.SelectedCompany, Mode=TwoWay}"/>
In your UserControl make sure to add the DataContext to the XAML NOT the code behind like we did with the pages.
COMPANYCONTROL.XAML
<UserControl.DataContext>
<viewModels:CompanyControlViewModel x:Name="ViewModel" />
</UserControl.DataContext>
In the UserControl Code Behind add a Dependency Property
COMPANYCONTROL.XAML.CS
public static readonly DependencyProperty CompanyProperty = DependencyProperty.Register(
"Company", typeof(Company), typeof(CompanyControl), new PropertyMetadata(default(Company), SetCompany));
public CompanyControl()
{
InitializeComponent();
}
public Company Company
{
get => (Company) GetValue(CompanyProperty);
set => SetValue(CompanyProperty, value);
}
private static void SetCompany(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var control = d as CompanyControl;
var viewModel = control?.ViewModel;
if (viewModel != null)
viewModel.Company = (Company) e.NewValue;
}
In the end I am not sure if this is an elegant solution but it works.
I updated an older android project from mvvmcross v2 to mvvmcross v3.
Got one more problem now.
The visibility doesn't work, its doing nothing.
Old solution looked like this (worked fine):
In Setup.cs
protected override IEnumerable<Type> ValueConverterHolders
{
get { return new[] { typeof(Converters) }; }
}
Converters.cs
using Cirrious.MvvmCross.Converters.Visibility;
namespace Test.Droid
{
public class Converters
{
public readonly MvxVisibilityConverter Visibility = new MvxVisibilityConverter();
}
}
Any .axml (change visibility of LinearLayout):
<LinearLayout style="#style/LinearLayoutSmall" local:MvxBind="{'Visibility':{'Path':'TestIsVisible','Converter':'Visibility'}}">
New solution (doesn't work):
In Setup.cs
protected override List<Type> ValueConverterHolders
{
get { return new List<Type> { typeof(Converters) }; }
}
Converters.cs
using Cirrious.MvvmCross.Plugins.Visibility;
namespace Test.Droid
{
public class Converters
{
public readonly MvxVisibilityValueConverter Visibility = new MvxVisibilityValueConverter();
}
}
Any .axml
<LinearLayout style="#style/LinearLayoutSmall" local:MvxBind="Visibility TestIsVisible, Converter=Visibility">
There's probably a problem with the swissbinding syntax or I'm using false classes?
Any help appreciated!
UPDATE
I forgot these lines:
public override void LoadPlugins(IMvxPluginManager pluginManager)
{
pluginManager.EnsurePluginLoaded<PluginLoader>();
pluginManager.EnsurePluginLoaded<Cirrious.MvvmCross.Plugins.Visibility.PluginLoader>();
base.LoadPlugins(pluginManager);
}
I guess its necessary but now I'm having following error:
(from the MvxPluginManager Class)...
I checked all references and the dll/project *.Visibility.Droid.dll is referenced in my mainproject and everywhere else...
Without running and debugging a complete sample of your code I can't see what the problem is. One guess is that it could be in the plugin setup for visibility, but that is only a guess. The debug trace for your app might reveal some information on this.
Alternatively, it might be easier to simply try setting up a new project and getting visibility working in that, then comparing that code back to your existing app.
Value Converters in v3 are documented in https://github.com/MvvmCross/MvvmCross/wiki/Value-Converters.
The preferred way of referencing them is simply to let MvvmCross find them by reflection - see the section on https://github.com/MvvmCross/MvvmCross/wiki/Value-Converters#referencing-value-converters-in-touch-and-droid
A sample app, including visibility, is in: https://github.com/MvvmCross/MvvmCross-Tutorials/tree/master/ValueConversion - e.g. https://github.com/MvvmCross/MvvmCross-Tutorials/blob/master/ValueConversion/ValueConversion.UI.Droid/Resources/Layout/View_Visibility.axml
I have a view which contains an MvxListView and a form. I can hide the softkeyboard using the following code in my view's code (as this is pure view concerns)
var editText = FindViewById<EditText>(Resource.Id.newCheckbookName);
editText.EditorAction += (object sender, TextView.EditorActionEventArgs e) =>
{
if (e.ActionId == ImeAction.Done)
{
InputMethodManager inputMgr = GetSystemService(InputMethodService) as InputMethodManager;
inputMgr.HideSoftInputFromWindow(CurrentFocus.WindowToken, 0);
}
return;
};
In my item template I have an other text editor and would like to have the same behavior. But where can I add my code as I don't have any view code for the MwxItemTemplate ?
I think the easy way to do this is to use a custom 'View' within the listitem.
Note: that 'View' here refers to Android Views - not Model-View-ViewModel views - sorry for the naming confusion!
Creating custom views is easy to do...
Just create a custom View - e.g.
namespace Angevelle.App1.UI.Droid.Controls
{
public class MyText : EditText
{
public MyText(Context context, IAttributeSet attrs)
: base(context, attrs)
{
this.EditorAction += OnEditorAction;
}
private void OnEditorAction(object sender, EditorActionEventArgs editorActionEventArgs)
{
if (editorActionEventArgs.ActionId == ImeAction.Done)
{
// this code not tested - but something like this should work
var imm = (InputMethodManager)Context.GetSystemService(Context.InputMethodService);
imm.HideSoftInputFromWindow(WindowToken, 0);
}
}
}
}
Then you can use that View in your AXML just as you do Android or Mvx views:
<angevelle.app1.ui.droid.controls.MyText
android:layout_height=....
/>
If you are finding angevelle.app1.ui.droid.controls too verbose, then you could shorten this using an abbreviation in setup.cs:
protected override IDictionary<string, string> ViewNamespaceAbbreviations
{
get
{
var abbreviations = base.ViewNamespaceAbbreviations;
abbreviations["Abv"] = "angevelle.app1.ui.droid.controls";
return abbreviations;
}
}
then you can just use:
<Abv.MyText
android:layout_height=....
/>
An alternative approach might be to somehow customise the list...
If you ever do need to completely customise a listview and its adapter, then this can be easily done using the same type of technique - inherit from MvxBindableListView in your UI project:
public class MyListView : MvxBindableListView
{
public MyListView(Context context, IAttributeSet attrs);
: base(context, attrs, new MyListAdapter(context))
{
}
}
where MyListAdapter overrides the view creation:
public class MyListAdapter : MvxBindableListAdapter
{
public MyListAdapter(Context context)
: base(context)
{
}
// put your custom Adapter code here... e.g.:
protected override MvxBindableListItemView CreateBindableView(object source, int templateId)
{
return new MySpecialListItemView(_context, _bindingActivity, templateId, source);
}
}
where MySpecialListItemView inherits from MvxBindableListItemView but adds your own custom features.
Using this approach your list would then change from:
<Mvx.MvxBindableListView
....
/>
to:
<Abv.MyListView
....
/>
For more examples of custom views, take a look around GitHub - e.g. at some of the Calendar, ColorPicker, ActionBar projects in https://github.com/Cheesebaron
Don't expect your custom controls to render in the xamarin designer (well, not yet...)
Two final notes...
To reuse code... you might want to put that HideSoftInputFromWindow functionality in an extension method somehow so that you can just call anyEditText.HideOnDone()
Be careful when using the Monodroid/monotouch events on Views/UIViews - these events tend to use the native delegates/listeners - and so sometimes you can find that attaching something to subscribe to one event can unattach something else! Generally you are OK as long as you don't mix and match the C# event subscriptions at the same time as the native listener/delegate handlers.
I have the following problem with a blackberry demo class:
MenuItem locatorItem = new MenuItem(new StringProvider("Location Search"), 0x230020, 0);
locatorItem.setCommand(new Command(new CommandHandler()
(...)
I am using Eclipse and a BlackBerry simulator to get this demo running and I get the 'Cannot instantiate the type MenuItem' error. I don't know why and there's no suggestion to solve it.
I imported 'net.rim.device.api.ui.MenuItem;'.
I think you're using the wrong type of MenuItem. net.rim.device.api.ui.MenuItem you are using is specific to the Blackberry.
If this is a J2ME Application/Midlet, just create a javax.microedition.lcdui.Command. They are turned into menu items on the blackberry.
If you're also usingnet.rim.device.api.ui.Screen or any other net.rim classes in the application, this is the way menu items are usually created:
function doSomething() {
// Your Code Here
}
// In the function building your screen
MenuItem somethingMi = new MenuItem() {
private MenuItem() { super("Do Something",100001, 5); }
public void run() { doSomething() };
}
addMenuItem(somethingMI);