Can You Minimize the Soft Keyboard on Android From Text Completed Event - maui

I've seen various answers to this question for older versions but not sure how to translate to MAUI. The question being, is there a way that you can minimize the soft keyboard on a device from the Text Completed event of an Entry control?

I finally figured out how to do this. This solution is for Android only right now. It doesn't use a custom handler since I could not get the window token from PlatformView. Instead the code looks like this:
#if ANDROID
var imm = (Android.Views.InputMethods.InputMethodManager)MauiApplication.Current.GetSystemService(Android.Content.Context.InputMethodService);
if (imm != null)
{
//this stuff came from here: https://www.syncfusion.com/kb/12559/how-to-hide-the-keyboard-when-scrolling-in-xamarin-forms-listview-sflistview
var activity = Microsoft.Maui.ApplicationModel.Platform.CurrentActivity;
Android.OS.IBinder wToken = activity.CurrentFocus?.WindowToken;
imm.HideSoftInputFromWindow(wToken, 0);
}
#endif
So credit to the syncfusion folks that published their version, and this code above is modified from that to work in MAUI.

The code belongs in a custom handler. Based on Customize a control with a mapper.
In that Maui handler, handler.PlatformView is the Android control. Xamarin.Android properties/methods would be on that.
Something like:
using Microsoft.Maui.Platform;
namespace CustomizeHandlersDemo;
public partial class CustomizeEntryPage : ContentPage
{
public CustomizeEntryPage()
{
InitializeComponent();
ModifyEntry();
}
void ModifyEntry()
{
Microsoft.Maui.Handlers.EntryHandler.Mapper.AppendToMapping(
"MyCustomization", (handler, view) =>
{
#if ANDROID
handler.PlatformView....
#elif IOS
#elif WINDOWS
#endif
});
}
}
NOTE: That example modifies ALL Entries.
If you want to modify only SOME Entries, you instead define a subclass (e.g. public class MyEntry : Entry {}), and do this:
Microsoft.Maui.Handlers.EntryHandler.Mapper.AppendToMapping(
"MyEntryCustomizationOrWhatever", (handler, view) =>
{
if (view is MyEntry)
{
#if ANDROID
handler.PlatformView....
#elif IOS
#elif WINDOWS
#endif
}
});
For your specific situation, the line you were having trouble adapting to Maui contains btnSignIn.WindowToken.
Replace that with handler.PlatformView.WindowToken.

Related

EntryHandler with PlaceHolder Text above in .Net MAUI

How to Display Entry Control with PlaceHolder Text in MAUI.
I need to write a EntryHandler which would look like the below Image
(Last Name* is the placeholder text)
I have written a entry handler with out the border which is looking like below, the problem with this is as the user starts typing the placeholder text hides
public class BorderlessEntry : Entry
{
}
public App(AppShell page)
{
InitializeComponent();
Microsoft.Maui.Handlers.EntryHandler.Mapper.AppendToMapping(nameof(BorderlessEntry), (handler, view) =>
{
if (view is BorderlessEntry)
{
#if __ANDROID__
handler.PlatformView.SetBackgroundColor(Microsoft.Maui.Graphics.Colors.Transparent.ToAndroid());
handler.PlatformView.Hint = view.Placeholder;
#elif __IOS__
handler.PlatformView.BackgroundColor = Microsoft.Maui.Graphics.Colors.Transparent;
handler.PlatformView.Layer.BackgroundColor = Microsoft.Maui.Graphics.Colors.Transparent;
handler.PlatformView.BorderStyle = UIKit.UITextBorderStyle.None;
#endif
}
});
}
I have been able to achieve the same in Xamarin Forms using MaterialEntryRenderer but the same is not supported in .net Maui
Any help is appreciated!

MAUI EntryHandler does not contain EntryMapper

The code below was working until around preview 11 of Maui. But with preview 13 I get a compiler error: 'EntryHandler' does not contain a definition for 'EntryMapper'.
A similar error is shown for PickerMapper.
The code has been copied from the official documentation.
#if ANDROID
using Microsoft.Maui.Controls.Compatibility.Platform.Android;
#endif
using Application = Microsoft.Maui.Controls.Application;
namespace myapp;
public partial class App : Application
{
public App(AuthenticationService authenticationService, SyncService syncService)
{
InitializeComponent();
// Remove underline from all pickers and entries in app
#if ANDROID
Microsoft.Maui.Handlers.PickerHandler.PickerMapper.AppendToMapping("NoUnderline", (h, v) =>
{
h.NativeView.BackgroundTintList = Android.Content.Res.ColorStateList.ValueOf(Colors.Transparent.ToAndroid());
});
Microsoft.Maui.Handlers.EntryHandler.EntryMapper.AppendToMapping("NoUnderline", (h, v) =>
{
h.NativeView.BackgroundTintList = Android.Content.Res.ColorStateList.ValueOf(Colors.Transparent.ToAndroid());
});
#endif
MainPage = new AppShell(authenticationService, syncService);
}
}
Anyone who sees the solution?
I have been searching high and low, but the consensus seems to be that the code is correct.
I think all the EntryMapper and PickerMapper, basically all {Control}Mapper got renamed to just Mapper.
Additionally, I see you have references to NativeView whenever you upgrade to preview 14, those will be renamed to PlatformView so you will have to rename those accordingly as well.

BBOS 10 File picker not returning signals properly

I implemented a native File Picker on BlackBerry 10, after a bit of messing around it finally recognised the class, it opens fine and returns the file Address on the console but it looks like two signals are not working properly, baring in mind this is pretty much a straight copy of code from BlackBerry 10 docs.
using namespace bb::cascades::pickers;
void Utils::getFile() const{
FilePicker* filePicker = new FilePicker();
filePicker->setType(FileType::Music);
filePicker->setTitle("Select Sound");
filePicker->setMode(FilePickerMode::Picker);
filePicker->open();
// Connect the fileSelected() signal with the slot.
QObject::connect(filePicker,
SIGNAL(fileSelected(const QStringList&)),
this,
SLOT(onFileSelected(const QStringList&)));
// Connect the canceled() signal with the slot.
QObject::connect(filePicker,
SIGNAL(canceled()),
this,
SLOT(onCanceled()));
}
I wanted it to return the file url to qml with this (works fine with QFileDialog but that wouldn't recognise on my SDK) var test=utils.getFile()
if(test=="") console.debug("empty")
else console.debug(test)
But I'm getting these messages from the console: Object::connect: No such slot Utils::onFileSelected(const QStringList&) in ../src/Utils.cpp:27
Object::connect: No such slot Utils::onCanceled() in ../src/Utils.cpp:33
It is returning undefined from the else in the qml function when it opens,
Does anyone know where I cocked up or how I could get QFileDialog class to be found by the SDK?
I just wanted to give you a bit of an explanation in case you're still having some troubles. The concept's in Qt were a little foreign to me when I started in on it as well.
There are a couple ways you can do this. The easiest would probably be the pure QML route:
import bb.cascades 1.2
import bb.cascades.pickers 1.0
Page {
attachedObjects: [
FilePicker {
id: filePicker
type: FileType.Other
onFileSelected: {
console.log("selected files: " + selectedFiles)
}
}
]
Container {
layout: DockLayout {
}
Button {
id: launchFilePicker
text: qsTr("Open FilePicker")
onClicked: {
filePicker.open();
}
}
}
}
When you click the launchFilePicker button, it will invoke a FilePicker. Once a file is selected, the fileSelected signal will be fired. The slot in this case is the onFileSelected function (predefined), which logs the filepaths of the files that were selected (a parameter from the signal) to the console.
The C++ route is a little more work, but still doable.
If your class file was called Util, then you'd have a Util.h that looks something like this:
#ifndef UTIL_H_
#define UTIL_H_
#include <QObject>
class QStringList;
class Util : public QObject
{
Q_OBJECT
public:
Util(QObject *parent = 0);
Q_INVOKABLE
void getFile() const;
private Q_SLOTS:
void onFileSelected(const QStringList&);
void onCanceled();
};
#endif /* UTIL_H_ */
Note the Q_INVOKABLE getFile() method. Q_INVOKABLE will eventually allow us to call this method directly from QML.
The corresponding Util.cpp would look like:
#include "Util.h"
#include <QDebug>
#include <QStringList>
#include <bb/cascades/pickers/FilePicker>
using namespace bb::cascades;
using namespace bb::cascades::pickers;
Util::Util(QObject *parent) : QObject(parent)
{
}
void Util::getFile() const
{
FilePicker* filePicker = new FilePicker();
filePicker->setType(FileType::Other);
filePicker->setTitle("Select a file");
filePicker->setMode(FilePickerMode::Picker);
filePicker->open();
QObject::connect(
filePicker,
SIGNAL(fileSelected(const QStringList&)),
this,
SLOT(onFileSelected(const QStringList&)));
QObject::connect(
filePicker,
SIGNAL(canceled()),
this,
SLOT(onCanceled()));
}
void Util::onFileSelected(const QStringList &stringList)
{
qDebug() << "selected files: " << stringList;
}
void Util::onCanceled()
{
qDebug() << "onCanceled";
}
To make your Q_INVOKABLE getFile() method available to QML, you'd need to create an instance and set it as a ContextProperty. I do so in my applicationui.cpp like so:
Util *util = new Util(app);
QmlDocument *qml = QmlDocument::create("asset:///main.qml").parent(this);
qml->setContextProperty("_util", util);
Then, you can call this Q_INVOKABLE getFile() method from QML:
Page {
Container {
layout: DockLayout {}
Button {
id: launchFilePicker
text: qsTr("Open FilePicker")
onClicked: {
_util.getFile();
}
}
}
}
Like Richard says, most of the documentation covers how to create signals/slots, so you could review that, but also have a look at some Cascades-Samples on Git.
Hope that helps!!!

MvvmCross navigation on screen

Our designer created a layout something like the screen above. The main idea was to create an application with only one screen, just the red part of the screen is changing (i.e. 2 textbox instead of 1 textbox) when you tap on a button. This application will be a multiplatform application and I'm using MvvmCross to create it. My question is that how can i achieve this behavior in Mvvm? My first thought was sg. like the code below, but I'm not satisfied with this solution. Do you have any better solution to this problem? Should i somehow overwrite default navigation on ShowViewModel()?
public class MainViewModel : MvxViewModel
{
private MvxViewModel _currentViewModel;
public MvxViewModel CurrentViewModel
{
get { return _currentViewModel; }
set { _currentViewModel = value; RaisePropertyChanged(() => CurrentViewModel); }
}
public MainViewModel()
{
CurrentViewModel = new DefaultViewModel();
}
public void OnButtonClick()
{
CurrentViewModel = new SecondViewModel();
}
}
public partial class MainViewModel : MvxViewController
{
public override void ViewDidLoad ()
{
base.ViewDidLoad ();
FirstViewModel.WeakSubscribe(ViewModelPropertyChanged);
}
private void ViewModelPropertyChanged(object sender, PropertyChangedEventArgs args)
{
if (args.PropertyName == "CurrentViewModel")
{
if (Model.CurrentViewModel != null)
{
if (Model.CurrentViewModel is SecondViewModel)
{
//remove bindings
//change View
//bind new viewmodel
}
}
}
}
The alternatives for this kind of 'non-page navigation' are similar to those in MvvmCross Dialog:
You can:
Customize the MvxPresenter to allow ShowViewModel to be used
Put a special interface in the Core project and use Inversion of Control to inject the implementation from the UI project to the Core project
Use the MvxMessenger plugin and share messages between the Core and UI project which trigger this type of navigation.
Use a property with a special interface (like IInteractionRequest) on the ViewModel - that property will fire an event when the UI needs to change.
Personally, for your situation, I quite like the first of these options - intercepting ShowViewModel using a presenter.
One other alternative which I might consider is to use some kind of 'Adapter-driven' control which could very easily update it's child contents based on the CurrentViewModel property. On Android, this would be as easy as using an MvxLinearLayout with an adapter. On iOS, however, I think you'd have to write something new to do this - just because iOS doesn't really have a LinearLayout/StackPanel control.

MvvmCross: How to navigate to something besides a ViewModel?

What would I put in my MvxCommand to navigate to a simple URL? All mobile platforms have a mechanism to ask the OS for an Activity or ViewController that can display the contents of a URL. How would I do that with MvvmCross? One way that I know of is to put special stuff in the presentationBundle and/or parameterBundle when calling ShowViewModel that the presenter can detect to do the special OpenUrl command. But is that the best way??
There is a plugin which enables this - https://github.com/slodge/MvvmCross/tree/v3/Plugins/Cirrious/WebBrowser
If that plugins is loaded, then a viewmodel can use:
public class MyViewModel : MvxViewModel
{
private readonly IMvxWebBrowserTask _webBrowser;
public MyViewModel(IMvxWebBrowserTask webBrowser)
{
_webBrowser = webBrowse;
}
public ICommand ShowWebPage
{
get { return new MvxCommand(() => _webBrowser.ShowWebPage("https://github.com/slodge/mvvmcross");
}
}
You can see this used in, for example:
https://github.com/slodge/MvvmCross-Tutorials/blob/master/Sample%20-%20CirriousConference/Cirrious.Conference.Core/ViewModels/BaseViewModel.cs
https://github.com/slodge/MvvmCross-Tutorials/blob/master/Sample%20-%20CustomerManagement/CustomerManagement/CustomerManagement/ViewModels/DetailsCustomerViewModel.cs
If you ever need to create your own plugins, see https://speakerdeck.com/cirrious/plugins-in-mvvmcross