Develop Reference

JS/.NET interact on MAUI WebView

I am migrating our app from Xamarin to MAUI, and I am a bit struggling with migrating the code that handles JS/.NET interactions in a WebView on both Android and iOS. Let's focus on Android. It's especially about calling .NET code from JS in the WebView.
In Xamarin, we could do something like this (basically according to this tutorial https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/hybridwebview):
protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
{
base.OnElementChanged(e);
if (e.OldElement != null)
{
Control.RemoveJavascriptInterface("jsBridge");
}
if (e.NewElement != null)
{
Control.SetWebViewClient(new JavascriptWebViewClient(this, $"javascript: {JavascriptFunction}"));
Control.AddJavascriptInterface(new JsBridge(this), "jsBridge");
}
}
and
public class JavascriptWebViewClient : FormsWebViewClient
{
private readonly string javascript;
public JavascriptWebViewClient(HybridWebViewRenderer renderer, string javascript) : base(renderer)
{
this.javascript = javascript;
}
public override void OnPageFinished(WebView view, string url)
{
base.OnPageFinished(view, url);
view.EvaluateJavascript(javascript, null);
}
}
In .NET 6 with MAUI, this is deprecated. I tried to build it with handlers, but then the OnPageFinished is never called. The lack of examples is making it difficult to figure out what I miss.
Microsoft.Maui.Handlers.WebViewHandler.Mapper.AppendToMapping("MyCustomization", (handler, view) =>
{
#if ANDROID
handler.PlatformView.SetWebViewClient(new JavascriptWebViewClient($"javascript: {JavascriptFunction}"));
handler.PlatformView.AddJavascriptInterface(new JsBridge(this), "jsBridge");
#endif
});
with
public class JavascriptWebViewClient : WebViewClient
{
private readonly string javascript;
public JavascriptWebViewClient(string javascript) : base()
{
this.javascript = javascript;
}
public override void OnPageFinished(WebView view, string url)
{
base.OnPageFinished(view, url);
view.EvaluateJavascript(javascript, null);
}
}
Where should I put this code? Is this the correct way? What am I missing? I now put this in a subclassed WebView, but probably that's not the right way.

Update: I developed a work-around for Windows. See below.
TL;DR -
https://github.com/nmoschkin/MAUIWebViewExample
I have come up with a MAUI solution that work for both iOS and Android, using the new Handler pattern as described in:
Porting Custom Renderers To Handlers
The above documentation was somewhat poor, and did not feature an implementation for the iOS version. I provide that, here.
This adaptation also makes the Source property a BindableProperty. Unlike the example in the above link, I do not actually add the property to the PropertyMapper in the platform handler in the traditional way. Rather, we will be listening for an event to be fired by the property changed notification method of the bindable property.
This example implements a 100% custom WebView. If there are additional properties and methods you would like to port over from the native components, you will have to add that additional functionality, yourself.
Shared Code:
In the shared code file, you want to create your custom view by implementing the classes and interface as described in the above link in the following way (with additional classes provided for events that we will provide to the consumer):
public class SourceChangedEventArgs : EventArgs
{
public WebViewSource Source
{
get;
private set;
}
public SourceChangedEventArgs(WebViewSource source)
{
Source = source;
}
}
public class JavaScriptActionEventArgs : EventArgs
{
public string Payload { get; private set; }
public JavaScriptActionEventArgs(string payload)
{
Payload = payload;
}
}
public interface IHybridWebView : IView
{
event EventHandler<SourceChangedEventArgs> SourceChanged;
event EventHandler<JavaScriptActionEventArgs> JavaScriptAction;
void Refresh();
WebViewSource Source { get; set; }
void Cleanup();
void InvokeAction(string data);
}
public class HybridWebView : View, IHybridWebView
{
public event EventHandler<SourceChangedEventArgs> SourceChanged;
public event EventHandler<JavaScriptActionEventArgs> JavaScriptAction;
public HybridWebView()
{
}
public void Refresh()
{
if (Source == null) return;
var s = Source;
Source = null;
Source = s;
}
public WebViewSource Source
{
get { return (WebViewSource)GetValue(SourceProperty); }
set { SetValue(SourceProperty, value); }
}
public static readonly BindableProperty SourceProperty = BindableProperty.Create(
propertyName: "Source",
returnType: typeof(WebViewSource),
declaringType: typeof(HybridWebView),
defaultValue: new UrlWebViewSource() { Url = "about:blank" },
propertyChanged: OnSourceChanged);
private static void OnSourceChanged(BindableObject bindable, object oldValue, object newValue)
{
var view = bindable as HybridWebView;
bindable.Dispatcher.Dispatch(() =>
{
view.SourceChanged?.Invoke(view, new SourceChangedEventArgs(newValue as WebViewSource));
});
}
public void Cleanup()
{
JavaScriptAction = null;
}
public void InvokeAction(string data)
{
JavaScriptAction?.Invoke(this, new JavaScriptActionEventArgs(data));
}
}
Then you would have to declare the handler for each platform, as follows:
Android Implementation:
public class HybridWebViewHandler : ViewHandler<IHybridWebView, Android.Webkit.WebView>
{
public static PropertyMapper<IHybridWebView, HybridWebViewHandler> HybridWebViewMapper = new PropertyMapper<IHybridWebView, HybridWebViewHandler>(ViewHandler.ViewMapper);
const string JavascriptFunction = "function invokeCSharpAction(data){jsBridge.invokeAction(data);}";
private JSBridge jsBridgeHandler;
public HybridWebViewHandler() : base(HybridWebViewMapper)
{
}
private void VirtualView_SourceChanged(object sender, SourceChangedEventArgs e)
{
LoadSource(e.Source, PlatformView);
}
protected override Android.Webkit.WebView CreatePlatformView()
{
var webView = new Android.Webkit.WebView(Context);
jsBridgeHandler = new JSBridge(this);
webView.Settings.JavaScriptEnabled = true;
webView.SetWebViewClient(new JavascriptWebViewClient($"javascript: {JavascriptFunction}"));
webView.AddJavascriptInterface(jsBridgeHandler, "jsBridge");
return webView;
}
protected override void ConnectHandler(Android.Webkit.WebView platformView)
{
base.ConnectHandler(platformView);
if (VirtualView.Source != null)
{
LoadSource(VirtualView.Source, PlatformView);
}
VirtualView.SourceChanged += VirtualView_SourceChanged;
}
protected override void DisconnectHandler(Android.Webkit.WebView platformView)
{
base.DisconnectHandler(platformView);
VirtualView.SourceChanged -= VirtualView_SourceChanged;
VirtualView.Cleanup();
jsBridgeHandler?.Dispose();
jsBridgeHandler = null;
}
private static void LoadSource(WebViewSource source, Android.Webkit.WebView control)
{
try
{
if (source is HtmlWebViewSource html)
{
control.LoadDataWithBaseURL(html.BaseUrl, html.Html, null, "charset=UTF-8", null);
}
else if (source is UrlWebViewSource url)
{
control.LoadUrl(url.Url);
}
}
catch { }
}
}
public class JavascriptWebViewClient : WebViewClient
{
string _javascript;
public JavascriptWebViewClient(string javascript)
{
_javascript = javascript;
}
public override void OnPageStarted(Android.Webkit.WebView view, string url, Bitmap favicon)
{
base.OnPageStarted(view, url, favicon);
view.EvaluateJavascript(_javascript, null);
}
}
public class JSBridge : Java.Lang.Object
{
readonly WeakReference<HybridWebViewHandler> hybridWebViewRenderer;
internal JSBridge(HybridWebViewHandler hybridRenderer)
{
hybridWebViewRenderer = new WeakReference<HybridWebViewHandler>(hybridRenderer);
}
[JavascriptInterface]
[Export("invokeAction")]
public void InvokeAction(string data)
{
HybridWebViewHandler hybridRenderer;
if (hybridWebViewRenderer != null && hybridWebViewRenderer.TryGetTarget(out hybridRenderer))
{
hybridRenderer.VirtualView.InvokeAction(data);
}
}
}
iOS Implementation:
public class HybridWebViewHandler : ViewHandler<IHybridWebView, WKWebView>
{
public static PropertyMapper<IHybridWebView, HybridWebViewHandler> HybridWebViewMapper = new PropertyMapper<IHybridWebView, HybridWebViewHandler>(ViewHandler.ViewMapper);
const string JavaScriptFunction = "function invokeCSharpAction(data){window.webkit.messageHandlers.invokeAction.postMessage(data);}";
private WKUserContentController userController;
private JSBridge jsBridgeHandler;
public HybridWebViewHandler() : base(HybridWebViewMapper)
{
}
private void VirtualView_SourceChanged(object sender, SourceChangedEventArgs e)
{
LoadSource(e.Source, PlatformView);
}
protected override WKWebView CreatePlatformView()
{
jsBridgeHandler = new JSBridge(this);
userController = new WKUserContentController();
var script = new WKUserScript(new NSString(JavaScriptFunction), WKUserScriptInjectionTime.AtDocumentEnd, false);
userController.AddUserScript(script);
userController.AddScriptMessageHandler(jsBridgeHandler, "invokeAction");
var config = new WKWebViewConfiguration { UserContentController = userController };
var webView = new WKWebView(CGRect.Empty, config);
return webView;
}
protected override void ConnectHandler(WKWebView platformView)
{
base.ConnectHandler(platformView);
if (VirtualView.Source != null)
{
LoadSource(VirtualView.Source, PlatformView);
}
VirtualView.SourceChanged += VirtualView_SourceChanged;
}
protected override void DisconnectHandler(WKWebView platformView)
{
base.DisconnectHandler(platformView);
VirtualView.SourceChanged -= VirtualView_SourceChanged;
userController.RemoveAllUserScripts();
userController.RemoveScriptMessageHandler("invokeAction");
jsBridgeHandler?.Dispose();
jsBridgeHandler = null;
}
private static void LoadSource(WebViewSource source, WKWebView control)
{
if (source is HtmlWebViewSource html)
{
control.LoadHtmlString(html.Html, new NSUrl(html.BaseUrl ?? "http://localhost", true));
}
else if (source is UrlWebViewSource url)
{
control.LoadRequest(new NSUrlRequest(new NSUrl(url.Url)));
}
}
}
public class JSBridge : NSObject, IWKScriptMessageHandler
{
readonly WeakReference<HybridWebViewHandler> hybridWebViewRenderer;
internal JSBridge(HybridWebViewHandler hybridRenderer)
{
hybridWebViewRenderer = new WeakReference<HybridWebViewHandler>(hybridRenderer);
}
public void DidReceiveScriptMessage(WKUserContentController userContentController, WKScriptMessage message)
{
HybridWebViewHandler hybridRenderer;
if (hybridWebViewRenderer.TryGetTarget(out hybridRenderer))
{
hybridRenderer.VirtualView?.InvokeAction(message.Body.ToString());
}
}
}
As you can see, I'm listening for the event to change out the source, which will then perform the platform-specific steps necessary to change it.
Also note that in both implementations of JSBridge I am using a WeakReference to track the control. I am not certain of any situations where disposal might deadlock, but I did this out of an abundance of caution.
Windows Implementation:
So. According to various articles I read, the current WinUI3 iteration of WebView2 for MAUI is not yet allowing us to invoke AddHostObjectToScript. They plan this for a future release.
But, then I remembered it was Windows, so I created a work-around that most certainly emulates the same behavior and achieves the same result, with a somewhat unorthodox solution: by using an HttpListener.
internal class HybridSocket
{
private HttpListener listener;
private HybridWebViewHandler handler;
bool token = false;
public HybridSocket(HybridWebViewHandler handler)
{
this.handler = handler;
CreateSocket();
}
private void CreateSocket()
{
listener = new HttpListener();
listener.Prefixes.Add("http://localhost:32000/");
}
public void StopListening()
{
token = false;
}
private void SendToNative(string json)
{
handler.VirtualView.InvokeAction(json);
}
public void Listen()
{
var s = listener;
try
{
token = true;
s.Start();
while (token)
{
HttpListenerContext ctx = listener.GetContext();
using HttpListenerResponse resp = ctx.Response;
resp.AddHeader("Access-Control-Allow-Origin", "null");
resp.AddHeader("Access-Control-Allow-Headers", "content-type");
var req = ctx.Request;
Stream body = req.InputStream;
Encoding encoding = req.ContentEncoding;
using (StreamReader reader = new StreamReader(body, encoding))
{
var json = reader.ReadToEnd();
if (ctx.Request.HttpMethod == "POST")
{
SendToNative(json);
}
}
resp.StatusCode = (int)HttpStatusCode.OK;
resp.StatusDescription = "Status OK";
}
CreateSocket();
}
catch (Exception e)
{
Console.WriteLine(e.ToString());
}
}
}
public class HybridWebViewHandler : ViewHandler<IHybridWebView, WebView2>
{
public static PropertyMapper<IHybridWebView, HybridWebViewHandler> HybridWebViewMapper = new PropertyMapper<IHybridWebView, HybridWebViewHandler>(ViewHandler.ViewMapper);
const string JavascriptFunction = #"function invokeCSharpAction(data)
{
var http = new XMLHttpRequest();
var url = 'http://localhost:32000';
http.open('POST', url, true);
http.setRequestHeader('Content-type', 'application/json');
http.send(JSON.stringify(data));
}";
static SynchronizationContext sync;
private HybridSocket jssocket;
public HybridWebViewHandler() : base(HybridWebViewMapper)
{
sync = SynchronizationContext.Current;
jssocket = new HybridSocket(this);
Task.Run(() => jssocket.Listen());
}
~HybridWebViewHandler()
{
jssocket.StopListening();
}
private void OnWebSourceChanged(object sender, SourceChangedEventArgs e)
{
LoadSource(e.Source, PlatformView);
}
protected override WebView2 CreatePlatformView()
{
sync = sync ?? SynchronizationContext.Current;
var webView = new WebView2();
webView.NavigationCompleted += WebView_NavigationCompleted;
return webView;
}
private void WebView_NavigationCompleted(WebView2 sender, CoreWebView2NavigationCompletedEventArgs args)
{
var req = new EvaluateJavaScriptAsyncRequest(JavascriptFunction);
PlatformView.EvaluateJavaScript(req);
}
protected override void ConnectHandler(WebView2 platformView)
{
base.ConnectHandler(platformView);
if (VirtualView.Source != null)
{
LoadSource(VirtualView.Source, PlatformView);
}
VirtualView.SourceChanged += OnWebSourceChanged;
}
protected override void DisconnectHandler(WebView2 platformView)
{
base.DisconnectHandler(platformView);
VirtualView.SourceChanged -= OnWebSourceChanged;
VirtualView.Cleanup();
}
private static void LoadSource(WebViewSource source, WebView2 control)
{
try
{
if (control.CoreWebView2 == null)
{
control.EnsureCoreWebView2Async().AsTask().ContinueWith((t) =>
{
sync.Post((o) => LoadSource(source, control), null);
});
}
else
{
if (source is HtmlWebViewSource html)
{
control.CoreWebView2.NavigateToString(html.Html);
}
else if (source is UrlWebViewSource url)
{
control.CoreWebView2.Navigate(url.Url);
}
}
}
catch { }
}
}
Finally, you will need to initialize the MAUI application by adding ConfigureMauiHandlers to the app builder:
Initialize the MAUI Application in MauiProgram.cs
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
})
.ConfigureMauiHandlers(handlers =>
{
handlers.AddHandler(typeof(HybridWebView), typeof(HybridWebViewHandler));
});
return builder.Build();
}
Add The Control To XAML
<controls:HybridWebView
x:Name="MyWebView"
HeightRequest="128"
HorizontalOptions="Fill"
Source="{Binding Source}"
VerticalOptions="FillAndExpand"
WidthRequest="512"
/>
Finally, I have added all of the above to a full example MAUI project in a repository on GitHub:
https://github.com/nmoschkin/MAUIWebViewExample
The GitHub repo example also includes a ViewModel that contains the WebViewSource to which the control is bound in markup.

OK, figured it out. Adding information for those looking to the same problem.
What you need to do:
Override WebView client.
Generic:
public partial class CustomWebView : WebView
{
partial void ChangedHandler(object sender);
partial void ChangingHandler(object sender, HandlerChangingEventArgs e);
protected override void OnHandlerChanging(HandlerChangingEventArgs args)
{
base.OnHandlerChanging(args);
ChangingHandler(this, args);
}
protected override void OnHandlerChanged()
{
base.OnHandlerChanged();
ChangedHandler(this);
}
public void InvokeAction(string data)
{
// your custom code
}
}
Android:
public partial class CustomWebView
{
const string JavascriptFunction = "function invokeActionInCS(data){jsBridge.invokeAction(data);}";
partial void ChangedHandler(object sender)
{
if (sender is not WebView { Handler: { PlatformView: Android.Webkit.WebView nativeWebView } }) return;
nativeWebView.SetWebViewClient(new JavascriptWebViewClient($"javascript: {JavascriptFunction}"));
nativeWebView.AddJavascriptInterface(new JsBridge(this), "jsBridge");
}
partial void ChangingHandler(object sender, HandlerChangingEventArgs e)
{
if (e.OldHandler != null)
{
if (sender is not WebView { Handler: { PlatformView: Android.Webkit.WebView nativeWebView } }) return;
nativeWebView.RemoveJavascriptInterface("jsBridge");
}
}
}
Add this custom view to your XAML
<views:CustomWebView x:Name="CustomWebViewName"/>
Modify the JS Bridge
public class JsBridge : Java.Lang.Object
{
private readonly HarmonyWebView webView;
public JsBridge(HarmonyWebView webView)
{
this.webView = webView;
}
[JavascriptInterface]
[Export("invokeAction")]
public void InvokeAction(string data)
{
webView.InvokeAction(data);
}
}

I solved it finnaly. It's not completely solution however its work well.
First, we define 2 variables globally on the javascipt side and define 2 functions waiting for each other.
var _flagformobiledata = false;
var _dataformobiledata = "";
const waitUntilMobileData = (condition, checkInterval = 100) => {
return new Promise(resolve => {
let interval = setInterval(() => {
if (!condition()) return;
clearInterval(interval);
resolve();
}, checkInterval)
})
}
async function mobileajax(functionName, params) {
window.location.href = "https://runcsharp." + functionName + "?" + params;
await waitUntilMobileData(() => _flagformobiledata == true);
_flagformobiledata = false;
return _dataformobiledata;
}
function setmobiledata(aData) {
_dataformobiledata = aData;
_flagformobiledata = true;
}
Then in MainPage.xaml.cs file define a function named WebViewNavigation
private async void WebViewNavigation(object sender, WebNavigatingEventArgs e)
{
var urlParts = e.Url.Split("runcsharp.");
if (urlParts.Length == 2)
{
Console.WriteLine(urlParts);
var funcToCall = urlParts[1].Split("?");
var methodName = funcToCall[0];
var funcParams = funcToCall[1];
e.Cancel = true;
if (methodName.Contains("login"))
{
var phonenumber = funcParams.Split("=");
var ActualPhoneNumber = "";
if (phonenumber.Length == 2)
{
ActualPhoneNumber = Regex.Replace(phonenumber[1].Replace("%20", "").ToString(), #"[^\d]", "");
}
var response = _authService.GetMobileLicanceInfo(ActualPhoneNumber);
if (response.status == 200)
{
PhoneGlobal = ActualPhoneNumber;
string maui = "setmobiledata('" + "OK" + "')"; // this is function to set global return data
await CustomWebView.EvaluateJavaScriptAsync(maui); // then run the script
}
else
{
await DisplayAlert("Error", response.message, "OK");
}
}
}
}
Then your Mainpage.xaml file:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="DinamoMobile.MainPage">
<WebView Navigating="WebViewNavigation" x:Name="CustomWebView">
</WebView>
</ContentPage>
After all that coding usage must be like:
<script>const login = document.querySelector(".js-login-btnCls");
login.addEventListener("click", logincallapi);
async function logincallapi() {
var phone = $("#phone").val();
if (phone == "") {
alert("Phone is required");
return;
}
var isOK = await mobileajax("login", "phone=" + phone);
if (isOK == "OK") {
window.location.href = "verification.html";
}
else {
alert("Invalid Phone Number.");
}
}</script>
Algorithm:
Write an asynchronous function that waits for data on the javascript side.
Go with the URL of the desired function on the Javascript side.
Set data to global variable with EvulateJavascript function.
The function waiting for the data will continue in this way.

How to change FreshTabbedNavigationContainer tabbed page to top and change icon and font size for ios in xamarin forms

I have using freshmvvm for my xamarin forms application. FreshTabbedNavigationContainer tabbed page is working fine with android. I have customized the android tabbed page font size, font color, image size. But in IOS I don't know how to change the tab bar from bottom to top like in android and how to change the size of the icon and font. Please anyone suggest me to done this. My tabbed page code is below,
var tabbedPage = new FreshTabbedNavigationContainer();
tabbedPage.AddTab<FirstPageModel>("One", "icon.png");
tabbedPage.AddTab<SecondPageModel>("Two", "icon.png");
await Application.Current.MainPage.Navigation.PushAsync(tabbedPage);
NavigationPage.SetHasNavigationBar(tabbedPage, false);
I have changed the tabbar scrollable using custom renderer for android like this,
public override void OnViewAdded(Android.Views.View child)
{
base.OnViewAdded(child);
var tabLayout = child as TabLayout;
if (tabLayout != null)
{
tabLayout.TabMode = TabLayout.ModeScrollable;
}
}
How to change the tab bar as scrollable for ios. In my tabbed page, the space between text and icon is zero. Please refer the screenshot.

Naxam's GitHub has sort of a similar implementation using a Customized version of Xamarin Forms TabbedPage, But since FreshTabbedNavigationContainer inherits from the same(TabbedPage) you can just use it instead and it should work like a charm.
public class TopTabbedPage : FreshTabbedNavigationContainer
{
public TopTabbedPage()
{
//BarBackgroundColor = Color.Blue;
//BarTextColor = Color.White;
}
public static readonly BindableProperty BarIndicatorColorProperty = BindableProperty.Create(
nameof(BarIndicatorColor),
typeof(Color),
typeof(TopTabbedPage),
Color.White,
BindingMode.OneWay);
public Color BarIndicatorColor
{
get { return (Color)GetValue(BarIndicatorColorProperty); }
set { SetValue(BarIndicatorColorProperty, value); }
}
public static readonly BindableProperty SwipeEnabledColorProperty = BindableProperty.Create(
nameof(SwipeEnabled),
typeof(bool),
typeof(TopTabbedPage),
true,
BindingMode.OneWay);
public bool SwipeEnabled
{
get { return (bool)GetValue(SwipeEnabledColorProperty); }
set { SetValue(SwipeEnabledColorProperty, value); }
}
}
And then the renderer would look something like this:
[assembly: ExportRenderer(typeof(TopTabbedPage), typeof(TopTabbedRenderer))]
namespace Naxam.Controls.Platform.iOS
{
using Platform = Xamarin.Forms.Platform.iOS.Platform;
using Forms = Xamarin.Forms.Forms;
public partial class TopTabbedRenderer :
UIViewController
{
public static void Init()
{
}
UIColor _defaultBarColor;
bool _defaultBarColorSet;
bool _loaded;
Size _queuedSize;
int lastSelectedIndex;
Page Page => Element as Page;
UIPageViewController pageViewController;
protected UIViewController SelectedViewController;
protected IList<UIViewController> ViewControllers;
protected IPageController PageController
{
get { return Page; }
}
protected TopTabbedPage Tabbed
{
get { return (TopTabbedPage)Element; }
}
protected TabsView TabBar;
private NSLayoutConstraint tabBarHeight;
public TopTabbedRenderer()
{
ViewControllers = new UIViewController[0];
pageViewController = new UIPageViewController(
UIPageViewControllerTransitionStyle.Scroll,
UIPageViewControllerNavigationOrientation.Horizontal,
UIPageViewControllerSpineLocation.None
);
TabBar = new TabsView
{
TranslatesAutoresizingMaskIntoConstraints = false
};
TabBar.TabsSelectionChanged += HandleTabsSelectionChanged;
}
public override void DidRotate(UIInterfaceOrientation fromInterfaceOrientation)
{
base.DidRotate(fromInterfaceOrientation);
View.SetNeedsLayout();
}
public override void ViewDidAppear(bool animated)
{
PageController.SendAppearing();
base.ViewDidAppear(animated);
}
public override void ViewDidDisappear(bool animated)
{
base.ViewDidDisappear(animated);
PageController.SendDisappearing();
}
public override void ViewDidLoad()
{
base.ViewDidLoad();
View.AddSubview(TabBar);
AddChildViewController(pageViewController);
View.AddSubview(pageViewController.View);
pageViewController.View.TranslatesAutoresizingMaskIntoConstraints = false;
pageViewController.DidMoveToParentViewController(this);
var views = NSDictionary.FromObjectsAndKeys(
new NSObject[] {
TabBar,
pageViewController.View
},
new NSObject[] {
(NSString) "tabbar",
(NSString) "content"
}
);
View.AddConstraints(NSLayoutConstraint.FromVisualFormat("V:|-0-[tabbar]-0-[content]-0-|",
0,
null,
views));
View.AddConstraints(NSLayoutConstraint.FromVisualFormat("H:|-0-[tabbar]-0-|",
0,
null,
views));
View.AddConstraints(NSLayoutConstraint.FromVisualFormat("H:|-0-[content]-0-|",
0,
null,
views));
tabBarHeight = NSLayoutConstraint.Create(
TabBar,
NSLayoutAttribute.Height,
NSLayoutRelation.Equal,
1, 68
);
TabBar.AddConstraint(tabBarHeight);
if (pageViewController.ViewControllers.Length == 0
&& lastSelectedIndex >= 0 || lastSelectedIndex < ViewControllers.Count)
{
pageViewController.SetViewControllers(
new[] { ViewControllers[lastSelectedIndex] },
UIPageViewControllerNavigationDirection.Forward,
true, null
);
}
UpdateSwipe(Tabbed.SwipeEnabled);
pageViewController.DidFinishAnimating += HandlePageViewControllerDidFinishAnimating;
}
protected override void Dispose(bool disposing)
{
if (disposing)
{
PageController?.SendDisappearing();
if (Tabbed != null)
{
Tabbed.PropertyChanged -= OnPropertyChanged;
Tabbed.PagesChanged -= OnPagesChanged;
TabBar.TabsSelectionChanged -= HandleTabsSelectionChanged;
}
if (pageViewController != null)
{
pageViewController.WeakDataSource = null;
pageViewController.DidFinishAnimating -= HandlePageViewControllerDidFinishAnimating;
pageViewController?.Dispose();
}
}
base.Dispose(disposing);
}
protected virtual void OnElementChanged(VisualElementChangedEventArgs e)
{
ElementChanged?.Invoke(this, e);
}
UIViewController GetViewController(Page page)
{
var renderer = Platform.GetRenderer(page);
return renderer?.ViewController;
}
void OnPagePropertyChanged(object sender, PropertyChangedEventArgs e)
{
if (e.PropertyName != Page.TitleProperty.PropertyName)
return;
if (!(sender is Page page) || page.Title is null)
return;
TabBar.ReplaceItem(page.Title, Tabbed.Children.IndexOf(page));
}
void OnPagesChanged(object sender, NotifyCollectionChangedEventArgs e)
{
e.Apply((o, i, c) => SetupPage((Page)o, i), (o, i) => TeardownPage((Page)o, i), Reset);
SetControllers();
UIViewController controller = null;
if (Tabbed.CurrentPage != null)
{
controller = GetViewController(Tabbed.CurrentPage);
}
if (controller != null && controller != SelectedViewController)
{
SelectedViewController = controller;
var index = ViewControllers.IndexOf(SelectedViewController);
MoveToByIndex(index);
TabBar.SelectedIndex = index;
}
}
void OnPropertyChanged(object sender, PropertyChangedEventArgs e)
{
if (e.PropertyName == nameof(TabbedPage.CurrentPage))
{
var current = Tabbed.CurrentPage;
if (current == null)
return;
var controller = GetViewController(current);
if (controller == null)
return;
SelectedViewController = controller;
var index = ViewControllers.IndexOf(SelectedViewController);
MoveToByIndex(index);
TabBar.SelectedIndex = index;
}
else if (e.PropertyName == TabbedPage.BarBackgroundColorProperty.PropertyName)
{
UpdateBarBackgroundColor();
}
else if (e.PropertyName == TabbedPage.BarTextColorProperty.PropertyName)
{
UpdateBarTextColor();
}
else if (e.PropertyName == TopTabbedPage.BarIndicatorColorProperty.PropertyName)
{
UpdateBarIndicatorColor();
}
else if (e.PropertyName == TopTabbedPage.SwipeEnabledColorProperty.PropertyName)
{
UpdateSwipe(Tabbed.SwipeEnabled);
}
}
public override UIViewController ChildViewControllerForStatusBarHidden()
{
var current = Tabbed.CurrentPage;
if (current == null)
return null;
return GetViewController(current);
}
void UpdateSwipe(bool swipeEnabled)
{
pageViewController.WeakDataSource = swipeEnabled ? this : null;
}
void Reset()
{
var i = 0;
foreach (var page in Tabbed.Children)
{
SetupPage(page, i++);
}
}
void SetControllers()
{
var list = new List<UIViewController>();
var titles = new List<string>();
for (var i = 0; i < Tabbed.Children.Count; i++)
{
var child = Tabbed.Children[i];
var v = child as VisualElement;
if (v == null)
continue;
var renderer = Platform.GetRenderer(v);
if (renderer == null) continue;
list.Add(renderer.ViewController);
titles.Add(Tabbed.Children[i].Title);
}
ViewControllers = list.ToArray();
TabBar.SetItems(titles);
}
void SetupPage(Page page, int index)
{
IVisualElementRenderer renderer = Platform.GetRenderer(page);
if (renderer == null)
{
renderer = Platform.CreateRenderer(page);
Platform.SetRenderer(page, renderer);
}
page.PropertyChanged -= OnPagePropertyChanged;
page.PropertyChanged += OnPagePropertyChanged;
}
void TeardownPage(Page page, int index)
{
page.PropertyChanged -= OnPagePropertyChanged;
Platform.SetRenderer(page, null);
}
void UpdateBarBackgroundColor()
{
if (Tabbed == null || TabBar == null)
return;
var barBackgroundColor = Tabbed.BarBackgroundColor;
if (!_defaultBarColorSet)
{
_defaultBarColor = TabBar.BackgroundColor;
_defaultBarColorSet = true;
}
TabBar.BackgroundColor = barBackgroundColor.ToUIColor();
}
void UpdateBarTextColor()
{
TabBar.TextColor = Tabbed.BarTextColor.ToUIColor();
}
void UpdateBarIndicatorColor()
{
TabBar.IndicatorColor = Tabbed.BarIndicatorColor.ToUIColor();
}
}
}

Moving code behind xaml.cs to ViewModel in xamarin

I have coded my behind code logic in xaml.cs file and now i want to move my code from code behind to ViewModel. How can this be done apart from code refactoring.
I am new to xamarin
Here is my Code behind
namespace _somename
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class CareingtonFeeSchedule : ContentPage
{
private OneDentalFeeScheduleService oneDentalFeeScheduleService;
private ObservableCollection<ProviderSearchViewModel> _allGroups;
private ObservableCollection<ProviderSearchViewModel> _expandedGroups;
protected ObservableCollection<Grouping<string, FeeScheduleItem>> feeScheduleGroups;
protected ObservableCollection<FeeScheduleItem> feeScheduleItems;
private readonly AppViewModel AppViewModelInstance;
private Plugin.Geolocator.Abstractions.Position currentPosition;
private FeeScheduleModel feeScheduleDataResult;
public CareingtonFeeSchedule(AppViewModel appViewModel)
{
InitializeComponent();
AppViewModelInstance = appViewModel;
BindingContext = AppViewModelInstance;
AppViewModelInstance.IsActivityLoading = true;
LoadFeeeSchedule();
}
private void HeaderTapped(object sender, EventArgs args)
{
int selectedIndex = _expandedGroups.IndexOf(
((ProviderSearchViewModel)((Button)sender).CommandParameter));
_allGroups[selectedIndex].Expanded = !_allGroups[selectedIndex].Expanded;
UpdateListContent();
}
async Task OnHomeFeeScheduleTapped_TappedAsync(object sender, EventArgs args)
{
await Navigation.PushAsync(new AccLandPage(AppViewModelInstance));
}
private void ProviderBar_TextChanged(object sender, TextChangedEventArgs e)
{
var keyword = ProviderSearchBar.Text;
GroupedView.ItemsSource =
_expandedGroups.Where(s =>
s.Title.ToLower().Contains(keyword.ToLower()));
}
private void UpdateListContent()
{
_expandedGroups = new ObservableCollection<ProviderSearchViewModel>();
foreach (ProviderSearchViewModel group in _allGroups)
{
ProviderSearchViewModel newGroup = new ProviderSearchViewModel(group.Title, group.ShortName, group.Expanded);
if (group.Expanded)
{
foreach (Plan plan in group)
{
newGroup.Add(plan);
}
}
_expandedGroups.Add(newGroup);
}
GroupedView.ItemsSource = _expandedGroups;
}
public FeeScheduleModel FeeScheduleDataResult
{
protected set
{
feeScheduleDataResult = value;
OnPropertyChanged(nameof(FeeScheduleDataResult));
}
get => feeScheduleDataResult;
}
protected int feeScheduleCount;
public int FeeScheduleCount => feeScheduleCount;
private async Task<bool> LoadFeeeSchedule()
{
try
{
if (oneDentalFeeScheduleService == null)
{
oneDentalFeeScheduleService = new OneDentalFeeScheduleService("1dental.com");
}
var feeSchedRes = await oneDentalFeeScheduleService.GetFeeScheduleAsync(AppViewModelInstance.ZipCode, string.Empty, CancellationToken.None);
if (feeSchedRes?.Schedule?.Count > 0)
{
ConvertFeeScheuleDict(feeSchedRes.Schedule);
}
else FeeScheduleDataResult = null;
return true;
}
catch (Exception eX)
{
with the fee schedule lookup: \n{eX.Message}", "OK");
return false;
}
finally
{
AppViewModelInstance.IsActivityLoading = false;
actInd.IsRunning = false;
}
}
private void ConvertFeeScheuleDict(Dictionary<string, List<FeeScheduleItem>> feesche)
{
ObservableCollection<ProviderSearchViewModel> list = new ObservableCollection<ProviderSearchViewModel>();
ProviderSearchViewModel psm = null;
foreach (var item in feesche)
{
psm = new ProviderSearchViewModel(item.Key, "");
foreach (var valitem in item.Value)
{
Plan p = new Plan();
p.Code = valitem.Code;
p.CostDisplay = valitem.CostDisplay;
p.Description = valitem.ProcedureSecondary;
p.Name = valitem.Procedure;
psm.Add(p);
}
list.Add(psm);
}
_allGroups = list;
UpdateListContent();
}
private async void GetZipCode()
{
try
{
if (AppViewModelInstance.UserPosition == null)
{
try
{
var hasPermission = await Utils.CheckPermissions(Permission.Location);
if (!hasPermission)
{
await Navigation.PushAsync(new MainScreen());
return;
}
}
catch (Exception ex)
{
Debug.WriteLine($"Exception occurred while looking permission during Appearing event: {ex}");
}
var locator = CrossGeolocator.Current;
currentPosition = await locator.GetPositionAsync(new TimeSpan(0, 0, 0, 10, 0));
var addressList = await locator.GetAddressesForPositionAsync(currentPosition, null);
AppViewModelInstance.UserPosition = currentPosition;
foreach (var item in addressList)
{
AppViewModelInstance.ZipCode = item.PostalCode;
ZipCodeEntry.Text = item.PostalCode;
break;
}
}
else
{
var locator = CrossGeolocator.Current;
currentPosition = AppViewModelInstance.UserPosition;
var addressList = await locator.GetAddressesForPositionAsync(currentPosition, null);
foreach (var item in addressList)
{
AppViewModelInstance.ZipCode = item.PostalCode;
ZipCodeEntry.Text = item.PostalCode;
break;
}
}
LoadFeeeSchedule();
}
catch (Exception ex)
{
Debug.WriteLine($"Exception occurred while looking up location during Appearing event: {ex}");
}
}
private void ZipCodeEntry_Complete(object sender, EventArgs e)
{
if (sender != null)
{
AppViewModelInstance.ZipCode = ((Entry)sender).Text;
}
}
private void ZipCodeEntry_Changed(object sender, EventArgs e)
{
if (sender != null)
{
string _text = ((Entry)sender).Text; //Get Current Text
if (_text.Length > 5) //If it is more than your character restriction
{
_text = _text.Remove(_text.Length - 1); // Remove Last character
ZipCodeEntry.Text = _text; //Set the Old value
}
if (_text.Length == 5)
{
AppViewModelInstance.ZipCode = _text;
LoadFeeeSchedule();
}
}
}
public bool CanRefreshExecute(string tempVal = null)
{
if (AppViewModelInstance.IsRefreshing) return false;
var valToCheck = tempVal ?? AppViewModelInstance.ZipCode;
if (string.IsNullOrEmpty(valToCheck) || string.IsNullOrWhiteSpace(valToCheck)) return false;
bool isDigitString = true;
foreach (var c in valToCheck)
{
if (char.IsDigit(c)) continue;
isDigitString = false;
}
if (isDigitString) AppViewModelInstance.ZipCode = valToCheck;
return isDigitString;
}
private void GroupedView_ItemTapped(object sender, ItemTappedEventArgs e)
{
}
}
}

just export your code to the view model and set the view model as binding context of the Page. For example in the constructor:
//In the code behind
PageViewModel viewModel;
public Page()
{
this.BindingContext = viewModel = new PageViewModel();
//...
}
The ViewModel should implement INotifyPropertyChanged.
(Functions which are triggered by events have to stay in the code behind and access the view model through the ViewModel Property)

wpf UI not updating on data context change

I am developing and wpf app and in which I need to update data on basis of click on button. I tried to update in code behind but it did not work so I used datacontext but still no use. I saw various solutions and have used mode=TwoWay, UpdateSourceTrigger but it does not work.
<Grid DataContext="{Binding Dashboard, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}">
//Content
</Grid>
In cs file
public ViewModels.DashboardVM _DashVM = new ViewModels.DashboardVM();
async private void DashboardPage_Loaded(object sender, RoutedEventArgs e)
{
try
{
await _DashVM.GetDashboardData();
this.DataContext = _DashVM;
}
catch (Exception ex)
{
System.Diagnostics.Debug.Write(ex.Message);
}
}
and changing data context here
async private void StoresList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
try
{
var item = (sender as ListView).SelectedItem as Models.StoresLM;
if(item!=null)
{
Properties.Settings.Default.StoreId = item.id;
Properties.Settings.Default.Save();
await _DashVM.GetDashboardData();
this.DataContext = _DashVM;
}
}
catch (Exception ex)
{
System.Diagnostics.Debug.Write(ex.Message);
}
}
my View Model is
public class DashboardVM : INotifyPropertyChanged
{
private Models.DashboardM _dashboard;
public Models.DashboardM Dashboard
{
get { return _dashboard; }
set { _dashboard = value; RaisePropertyChanged("Dashboard"); }
}
private void RaisePropertyChanged(string propertyName)
{
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
public static event EventHandler<Boolean> IsLoading = delegate { };
async public Task<Boolean> GetDashboardData()
{
try
{
if (InternetTools.IsNetworkConnected())
{
IsLoading(this, true);
var storeId = Convert.ToString(Properties.Settings.Default.StoreId);
var Response = await new WebServiceUtility().PostRequest(string.Format(StringUtility.DashboardApi, Convert.ToString(Properties.Settings.Default.StoreId)), new[] { new KeyValuePair<string, string>("api_key", "dbjh") });
if (Response.IsSuccessStatusCode)
{
var DashboardData = await Response.Content.ReadAsStringAsync();
var jsonObject = Newtonsoft.Json.Linq.JObject.Parse(DashboardData);
if (Convert.ToString(jsonObject["success"]).IndexOf("True", StringComparison.OrdinalIgnoreCase) >= 0)
{
var DashObject = jsonObject.ToObject<Models.DashboardM>();
Properties.Settings.Default.Currency = DashObject.data.store.currency.StartsWith("&") ? System.Net.WebUtility.HtmlDecode(DashObject.data.store.currency) : System.Text.RegularExpressions.Regex.Unescape(DashObject.data.store.currency);
DashObject.data.store.currency = StringUtility.Currency;
Properties.Settings.Default.Save();
Dashboard = null;
Dashboard = DashObject;
}
}
}
else
NotificationUtility.ShowErrorMessage(NotificationUtility.MsgType.InternetError);
}
catch
{
}
IsLoading(this, false);
return true;
}
public event PropertyChangedEventHandler PropertyChanged = delegate { };
}
Can anybody help?

I was able to resolve the problem by editing the code. It was not getting notified due to reassigning of object. I don't know the reason but I just changed this code
async private void StoresList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
try
{
var item = (sender as ListView).SelectedItem as Models.StoresLM;
if(item!=null)
{
Properties.Settings.Default.StoreId = item.id;
Properties.Settings.Default.Save();
await _DashVM.GetDashboardData();
}
}
catch (Exception ex)
{
System.Diagnostics.Debug.Write(ex.Message);
}
}
Hope it helps somebody like me.

How to get latitude and longitude in Mono for android?

First i worked with this tutorial tutorial
to get latitude and longitude, but i get nothing, so this is my code :
[Activity(Label = "GetLocation", MainLauncher = true, Icon = "#drawable/icon")]
public class Activity1 : Activity, ILocationListener
{
private Location _currentLocation;
private LocationManager _locationManager;
private TextView _locationText;
private TextView _addressText;
private string _locationProvider;
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
SetContentView(Resource.Layout.Main);
_addressText = FindViewById<TextView>(Resource.Id.address_text);
_locationText = FindViewById<TextView>(Resource.Id.location_text);
FindViewById<TextView>(Resource.Id.get_address_button).Click += AddressButton_OnClick;
InitializeLocationManager();
}
private void InitializeLocationManager()
{
_locationManager = (LocationManager)GetSystemService(LocationService);
var criteriaForLocationService = new Criteria
{
Accuracy = Accuracy.Fine
};
var acceptableLocationProviders = _locationManager.GetProviders(criteriaForLocationService, true);
if (acceptableLocationProviders.Any())
{
_locationProvider = acceptableLocationProviders.First();
}
else
{
_locationProvider = String.Empty;
}
}
protected override void OnResume()
{
base.OnResume();
_locationManager.RequestLocationUpdates(_locationProvider, 0, 0, this);
}
protected override void OnPause()
{
base.OnPause();
_locationManager.RemoveUpdates(this);
}
private void AddressButton_OnClick(object sender, EventArgs eventArgs)
{
if (_currentLocation == null)
{
_addressText.Text = "Can't determine the current location.";
return;
}
new Thread(() =>
{
var addressText = "Unable to find a location.";
var geocoder = new Geocoder(this);
var addressList = geocoder.GetFromLocation(_currentLocation.Latitude, _currentLocation.Longitude, 50);
var address = addressList.FirstOrDefault();
if (address != null)
{
var deviceLocation = new StringBuilder();
for (var i = 0; i < address.MaxAddressLineIndex; i++)
{
deviceLocation.Append(address.GetAddressLine(i))
.AppendLine(",");
}
_addressText.Text = deviceLocation.ToString();
}
RunOnUiThread(() => { _addressText.Text = addressText; });
}).Start();
}
public void OnLocationChanged(Location location)
{
_currentLocation = location;
if (_currentLocation == null)
{
_locationText.Text = "Unable to determine your location.";
}
else
{
_locationText.Text = String.Format("{0},{1}", _currentLocation.Latitude, _currentLocation.Longitude);
}
}
public void OnProviderDisabled(string provider) { }
public void OnProviderEnabled(string provider) { }
public void OnStatusChanged(string provider, Availability status, Bundle extras) { }
}
So please if someone has any idea about what wrong with my code i will be very appreciative.

There is one spot in your code where you're updating the the UI _addressText.Text from a background thread. That could also account for why, when you click the button, you're not seeing any address updates. See below for a snippet of the one line of code:
if (address != null)
{
var deviceLocation = new StringBuilder();
for (var i = 0; i < address.MaxAddressLineIndex; i++)
{
deviceLocation.Append(address.GetAddressLine(i))
.AppendLine(",");
}
// Here you were updating the UI thread from the background:
RunOnUiThread(() => _addressText.Text = deviceLocation.ToString());
}