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.
My TabbedPage uses a Binding Property, which is defined in the tabbed page's ViewModel, for showing a Badge text.
I am setting the badge property when initializing the view (actually when it (re)appears). However, sometimes the badge text is changing from outside of my ViewModel(s), this is because I have a SignalR method which is called when a new message is being added by another application.
Though, when this happens the OnAppearing method of my tabbed viewmodel is obviously not called. So the question is, how can I 'notify' the tabbedpage viewmodel that the badge text should be changed.
I think the (best) way to do this is using somekind of Event. Since all of my ViewModels inherit from a 'ViewModelBase' I could implement the event notification / change in the ViewModelBase and override the property in my TabbedPage ViewModel.
Though, sadly my knowledge about using Events / EventArgs is limited and the stuff I found about it is not working.
Is using EventArgs the best way to solve this problem? And if so, could anyone give any pointers how to implement it properly.
*On a side-note, I am also using Prism
My TabbedPage ViewModel:
public class RootTabbedViewModel : ViewModelBase, IPageLifecycleAware
{
private readonly INavigationService _navigationService;
private int _messageCount;
public RootTabbedViewModel(INavigationService navigationService)
: base(navigationService)
{
_navigationService = navigationService;
}
public int MessageCount
{
get { return _messageCount; }
set { SetProperty(ref _messageCount, value); }
}
public void OnDisappearing()
{
}
void IPageLifecycleAware.OnAppearing()
{
// (omitted) Logic for setting the MessageCount property
}
}
ViewModelVase:
public class ViewModelBase : BindableBase, IInitialize, IInitializeAsync, INavigationAware, IDestructible, IActiveAware
{
public event EventHandler MessageAddedEventArgs; // this should be used to trigger the MessageCount change..
protected INavigationService NavigationService { get; private set; }
public ViewModelBase(INavigationService navigationService)
{
NavigationService = navigationService;
Connectivity.ConnectivityChanged += Connectivity_ConnectivityChanged;
IsNotConnected = Connectivity.NetworkAccess != NetworkAccess.Internet;
}
private bool _isNotConnected;
public bool IsNotConnected
{
get { return _isNotConnected; }
set { SetProperty(ref _isNotConnected, value); }
}
~ViewModelBase()
{
Connectivity.ConnectivityChanged -= Connectivity_ConnectivityChanged;
}
async void Connectivity_ConnectivityChanged(object sender, ConnectivityChangedEventArgs e)
{
IsNotConnected = e.NetworkAccess != NetworkAccess.Internet;
if (IsNotConnected == false)
{
await DataHubService.Connect();
}
}
public virtual void Initialize(INavigationParameters parameters)
{
}
public virtual void OnNavigatedFrom(INavigationParameters parameters)
{
}
public virtual void OnNavigatedTo(INavigationParameters parameters)
{
}
public virtual void Destroy()
{
}
public virtual Task InitializeAsync(INavigationParameters parameters)
{
return Task.CompletedTask;
}
}
SignalR Datahub which should trigger the event:
public static class DataHubService2
{
// .. omitted some other SignalR specific code
public static async Task Connect()
{
try
{
GetInstanse();
hubConnection.On<Messages>("ReceiveMessage", async (message) =>
{
if(message != null)
{
// event that message count has changed should be triggered here..
}
});
}
catch (Exception ex)
{
// ...
}
}
}
As pointed out by #Jason, this specific problem is a good use case for using the MessagingCenter.
In the end the implementation looks as following:
public static class DataHubService2
{
// .. omitted some other SignalR specific code
public static async Task Connect()
{
try
{
GetInstanse();
hubConnection.On<Messages>("ReceiveMessage", async (message) =>
{
if(message != null)
{
MessagingCenter.Send("UpdateMessageCount", "Update");
}
});
}
catch (Exception ex)
{
// ...
}
}
}
public class RootTabbedViewModel : ViewModelBase, IPageLifecycleAware
{
private readonly INavigationService _navigationService;
private int _messageCount;
public RootTabbedViewModel(INavigationService navigationService)
: base(navigationService)
{
_navigationService = navigationService;
MessagingCenter.Subscribe<string>("UpdateMessageCount", "Update", async (a) =>
{
await UpdateMessageCount();
});
}
public int MessageCount
{
get { return _messageCount; }
set { SetProperty(ref _messageCount, value); }
}
public void OnDisappearing()
{
}
void IPageLifecycleAware.OnAppearing()
{
UpdateMessageCount();
}
async Task UpdateMessageCount()
{
int messageCount = await App.Database.GetNewMessageCountAsync();
MessageCount = messageCount.ToString();
}
}
I have an UWP app which has two pages HomePage and EditItemPage. On HomePage I created a button which navigates to EditItemPage passing class NavigationContext which bool isNewItem = true. Then, I create new Item on EditItemPage, user changes some info and clicks button Save. That button passes that created Item in NavigationContext to HomePage. The problem is when I click on back button without clicking Save button my HomePage somehow get that item.
EditItemPage.xaml.cs
public sealed partial class EditItemPage : Page
{
public EditItemPage()
{
this.InitializeComponent();
}
protected override void OnNavigatedFrom(NavigationEventArgs e)
{
base.OnNavigatedFrom(e);
ViewModel.CleanNavigationBackStack.Execute(e.Uri);
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
if (e.Parameter is NavigationContext)
{
var context = (NavigationContext) e.Parameter;
if (context.ContextType == NavigationContextType.ShareOperation)
{
ViewModel.HandleNewUri.Execute(context.ShareOperation);
}
else if (context.ContextType == NavigationContextType.FeedItem)
{
if (context.IsNewItem)
ViewModel.HandleNewFeedItem();
else
{
ViewModel.HandleExistingFeedItem(context.FeedItem);
}
}
else
throw new ArgumentOutOfRangeException();
}
}
private EditItemViewModel ViewModel => this.DataContext as EditItemViewModel;
}
HomePage.xaml.cs
public sealed partial class HomePage : Page
{
public HomePage()
{
this.InitializeComponent();
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
if (e.Parameter is NavigationContext)
{
var context = (NavigationContext) e.Parameter;
if (context.ContextType == NavigationContextType.FeedItem)
{
if (context.IsNewItem)
ViewModel.HandleNewFeedItem(context.FeedItem);
}
else
throw new ArgumentOutOfRangeException();
}
}
private FeedViewModel ViewModel => this.DataContext as FeedViewModel;
}
NavigationService:
public class NavigationService : INavigationService
{
private readonly Dictionary<string, Type> _pagesDictionary;
private Frame _mainFrame;
public const string UnknownPageKey = "-- UNKNOWN --";
public NavigationService()
{
_pagesDictionary = new Dictionary<string, Type>();
}
public void Configure(string key, Type pageType)
{
if (key == null || pageType == null) return;
Type value;
if (_pagesDictionary.TryGetValue(key, out value))
{
if (value != pageType)
{
throw new Exception(
$"Attempt to add a page of type '{pageType}' to already existing pair of '{key}:{value}'. Consider another string.");
}
}
else
{
_pagesDictionary.Add(key, pageType);
}
}
public void GoBack()
{
if (EnsureMainFrame() && _mainFrame.CanGoBack)
_mainFrame.GoBack();
}
public void NavigateTo(string pageKey)
{
if (pageKey == null) return;
Type page;
if (_pagesDictionary.TryGetValue(pageKey, out page))
{
if (EnsureMainFrame())
{
SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility =
AppViewBackButtonVisibility.Visible;
_mainFrame.Navigate(page, null,
new Windows.UI.Xaml.Media.Animation.SuppressNavigationTransitionInfo());
}
}
else
{
throw new Exception($"There is no page associated with string '{pageKey}'.");
}
}
public void NavigateTo(string pageKey, NavigationContext context)
{
if (pageKey == null) return;
Type page;
if (_pagesDictionary.TryGetValue(pageKey, out page))
{
if (EnsureMainFrame())
{
SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility =
AppViewBackButtonVisibility.Visible;
_mainFrame.Navigate(page, context,
new Windows.UI.Xaml.Media.Animation.SuppressNavigationTransitionInfo());
}
}
else
{
throw new Exception($"There is no page associated with string '{pageKey}'.");
}
}
private bool EnsureMainFrame()
{
if (_mainFrame != null) return true;
var appShell = Window.Current.Content as AppShell;
if (appShell != null) _mainFrame = appShell.AppFrame;
return _mainFrame != null;
}
public string CurrentPageKey
{
get
{
string key;
try
{
key = _pagesDictionary.FirstOrDefault(x => x.Value == _mainFrame.CurrentSourcePageType).Key;
}
catch (NullReferenceException)
{
return UnknownPageKey;
}
return key;
}
}
public void RemoveLast()
{
if (EnsureMainFrame() && _mainFrame.CanGoBack)
{
_mainFrame.BackStack.RemoveAt(_mainFrame.BackStackDepth - 1);
}
}
}
I've read that GoBack() doesn't pass any argument but when I click it method OnNavigatedFrom somehow get that old NavigationContext. Tell me when I make a mistake :)
I want sometimes hook and cancel all mouse press events (by something condition).
When I try to listen event MouseClick, Click / or ovvrride methos OnMouseClick and OnClick - its not works.
Now, I have block browser with props Enabled, but its block browser without ability to view/scroll webpage.
public class CustBrw : ChromiumWebBrowser {
public CustBrw() : base("") {
doStart();
}
public CustBrw(string address) : base(address) {
doStart();
}
private void doStart() {
this.Dock = System.Windows.Forms.DockStyle.Fill;
this.FrameLoadEnd += CustBrw_FrameLoadEnd;
this.MouseClick += CustBrw_MouseClick;
}
private void CustBrw_MouseClick(object sender, MouseEventArgs e) {
// dont work
MessageBox.Show("brw clicked!");
}
#region Disable Browser
private bool IsEnabled = true;
public void EnabledBrowser() {
ChangeBrowserDisabled(true);
}
public void DisableBrowser() {
ChangeBrowserDisabled(false);
}
protected void ChangeBrowserDisabled(bool State) {
if (InvokeRequired)
Invoke((Action) delegate {
if (this.IsEnabled != State) {
this.IsEnabled = State;
this.EvaluateScriptAsync("$('body').css({background : " + (State ? "'#fff'" : "'#e0e0e0'") + "});");
}
});
else {
if (this.IsEnabled != State) {
this.IsEnabled = State;
this.EvaluateScriptAsync("$('body').css({background : " + (State ? "'#fff'" : "'#e0e0e0'") + "});");
}
}
}
#endregion
private bool IsWatingUri(string Uri) {
if (Uri.ToLower().StartsWith("some uri"));
return true;
else
return false;
}
[JavascriptIgnore]
public Task<EventArgs> LoadPageAsync(string address = null) {
var tcs = new TaskCompletionSource<EventArgs>();
EventHandler<LoadingStateChangedEventArgs> handler = null;
handler += (sender, args) =>
{
this.DisableBrowser();
if (!args.IsLoading) {
this.LoadingStateChanged -= handler;
this.EnabledBrowser();
tcs.TrySetResult(args);
}
};
this.LoadingStateChanged += handler;
if (!string.IsNullOrEmpty(address)) {
this.Load(address);
}
return tcs.Task;
}
private void CustBrw_FrameLoadEnd(object sender, FrameLoadEndEventArgs e) {
if (!e.Frame.IsMain)
return;
if (!IsWatingUri(e.Url))
return;
GetTestTypeAsync().ContinueWith((scriptResult) =>
{
try {
// DISABLE
this.DisableBrowser();
// DO SOME SPEC WORKS (with callback from js)
this.CreateCallbackFunction().Wait(); // register JS-object
if (IsAutoMode)
this.SubscribeCallbackFunction().Wait();
if (IsAutoMode)
this.ExecuteCallbackFunction();
} finally {
// ENABLE
this.EnabledBrowser();
}
});
}
.....
}
In the case of Enable flag - blocked the whole browser control, but would like to keep the ability to use browser for viewing only (by entering your flag).
Somebody faced a similar challenge?
Currenlty, I'm using as Below.
In xaml,
<Button Content="X" Width="33" Height="16" Padding="1,-2,1,0"
Command="{Binding ElementName=UserControlName, Path=DataContext.DenyCommand}"
<Button.CommandParameter>
<wpfext:UICommandParameter UICommandCallerCallback="{Binding ElementName=UserControlName, Path=UIDenyCallBackCommand}"/>
</Button.CommandParameter>
</Button>
In xaml.cs,
public UICommandCallerCallback UIDenyCallBackCommand
{
get;
private set;
}
public UserControlName()
{
this.UIDenyCallBackCommand = this.UIAccessDenyCallBack;
this.InitializeComponent();
}
public void UIAccessDenyCallBack(object commandParameter, object callbackData)
{
ShowADenyMsgBox();
}
private void ShowDenyMsgBox()
{
RightsDenied win = new RightsDenied(); //xaml window
win.Owner = GetImmediateWindow();
win.WindowStartupLocation = WindowStartupLocation.CenterScreen;
win.ShowDialog();
}
In ViewModel.cs,
internal ViewModel()
{
this.DenyCommand= new DenyCommand(this.AccessDeny);
}
public void AccessDeny(ICommandState commandState)
{
commandState.InvokeCallerCallback("AccessDenied");
}
public CommandCallback DenyCommand
{
get;
private set;
}
UICommandCallerCallback is declared as below.
public delegate void UICommandCallerCallback(object commandParameter, object callbackData);
CommandCallback class is as below.
public class CommandCallback:ICommand
{
private readonly Action<ICommandState> executeMethod;
private readonly Func<ICommandState, bool> canExecuteMethod;
public CommandCallback(Action<ICommandState> executeMethod)
: this(executeMethod, null)
{
}
public CommandCallback(Action<ICommandState> executeMethod, Func<ICommandState, bool> canExecuteMethod)
{
if (executeMethod == null)
{
throw new ArgumentNullException("executeMethod");
}
this.executeMethod = executeMethod;
this.canExecuteMethod = canExecuteMethod;
}
public bool CanExecute(object parameter)
{
return this.canExecuteMethod != null ? this.canExecuteMethod((ICommandState)parameter) : true;
}
public void Execute(object parameter)
{
if (parameter == null)
{
throw new ArgumentNullException("parameter","CommandCallback parameter cannot be null");
}
if (!(parameter is ICommandState))
{
throw new ArgumentException("expects a parameter of type ICommandState","parameter");
}
ICommandState state = (ICommandState)parameter;
this.executeMethod.Invoke(state);
}
public event EventHandler CanExecuteChanged
{
add
{
CommandManager.RequerySuggested += value;
}
remove
{
CommandManager.RequerySuggested -= value;
}
}
}
It's working fine if it just to pop up the dialog box, but I want to wait for the result of the dialog and want to continue AccessDeny() function. For eg.
public void AccessDeny(ICommandState commandState)
{
1. processs
2. open xaml window and wait for the dialogresult. (i.e Yes No or Cancel)
3. Based on the result, continue processing.
}
What could be the best way to do this work flow? Please advise. Thanks.
Read through User Interaction Patterns in this documentation.