We Keep Coding

.NET MAUI: entry hidden behind keyboard on iOS

I am trying to get a .NET Maui app up and running and it is working quite well so far - with one major problem: I cannot get it fixed that an Entry/Editor control stays above the keyboard and doesn't get overlapped.
I know there is an open issue and it is in the backlog, but the app seems unusable until this is fixed. There have been a couple of workarounds like
[GitHub] dotnet/maui issue 4792,
[GitHub] dotnet/maui issue 10662 (#1) and
[GitHub] dotnet/maui issue 10662 (#2)
but I cannot get them to work when registering as a handler. #1 doesn't do anything and #2 crashes when loading any view.
There is a solution on StackOverflow as well (Question 72536074) - unfortunately this method ignores the keyboard height.
To reproduce the problem the simplest code example would be any ContentPage with the following content:
<?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="EntryIssueMaui.MainPage">
<ScrollView>
<Entry VerticalOptions="End" BackgroundColor="LightCoral" />
</ScrollView>
</ContentPage>
based on the default Maui template app.
It results in the Entry (red) not being pushed up in the ScrollView when the keyboard is enabled:
How can I implement the - I guess usually default feature - that the control is being pushed up to be still visible while considering the height of the keyboard (e.g. with/without autocompletion or emoji keyboard)?
Thanks in advance!

To solve this issue, you could obtain keyboard's frame via UIKeyboard.FrameEndUserInfoKey and calculate the height need to change.
NSValue result = (NSValue)args.Notification.UserInfo.ObjectForKey(new NSString(UIKeyboard.FrameEndUserInfoKey));
CGSize keyboardSize = result.RectangleFValue.Size;
private void Entry_Focused(object sender, FocusEventArgs e)
{
if (DeviceInfo.Current.Platform == DevicePlatform.iOS)
{
NFloat bottom;
try
{
UIWindow window = UIApplication.SharedApplication.Delegate.GetWindow();
bottom = window.SafeAreaInsets.Bottom;
}
catch
{
bottom = 0;
}
var heightChange = (keyboardSize.Height - bottom);
layout.TranslateTo(0, originalTranslationY.Value - heightChange, 50);
}
}
private void Entry_Unfocused(object sender, FocusEventArgs e)
{
if (DeviceInfo.Current.Platform == DevicePlatform.iOS)
{
layout.TranslateTo(0, 0, 50);
}
}
Hope it works for you.

How to make a Xamarin app fullscreen (all screen)

I develop with Xamarin 4.5 and I'm not able to find how to put my application to cover the entire screen (full screen).
For Android and for iOS.
Note: I do not want only an image or a video to cover the entire screen, it should be all the application that should cover the entire screen.
Update 2020-04-29
I found half of the solution, only the Android part (inlcluded in my answer with help of FabriBertani for status bar). I tested it and it works fine. Now I have to find a solution for iPhone (or at least, find a way to test on an iPhone).

On Android add this to the OnCreate method of your MainActivity:
this.Window.AddFlags(WindowManagerFlags.Fullscreen);
For iOS add these values to the info.plist file:
<key>UIStatusBarHidden</key>
<true/>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
edit: If you want to remove the toolbar too just add this on your xaml pages:
NavigationPage.HasNavigationBar="False"
Or in the C# code behind
public YourPage()
{
InitializeComponent();
NavigationPage.SetHasNavigationBar(this, false);
}
If you want to add this to all your pages, I recommend you to create a base page with this and then use this base page in all your pages.
public class BaseContentPage : ContentPage
{
public BaseContentPage
{
NavigationPage.SetHasNavigationBar(this, false);
}
}
And use it on the xaml:
<?xml version="1.0" encoding="UTF-8"?>
<local:BaseContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:YourNamespace.Pages"
x:Class="YourNamespace.Pages.YourPage">
</local:BaseContentPage>

This is half of the solution. For Android:
In Android Project. Into MainActivity.OnCreate, add:
this.Window.AddFlags(WindowManagerFlags.Fullscreen); // Hide StatusBar, from FabriBertani
MessagingCenter.Subscribe<Object>(this, "HideOsNavigationBar", (sender) =>
{
int uiOptions = (int)Window.DecorView.SystemUiVisibility;
uiOptions |= (int)SystemUiFlags.HideNavigation;
Window.DecorView.SystemUiVisibility = (StatusBarVisibility) SystemUiFlags.HideNavigation;
});
In Shared project. Into MainPage constructor (I put it after InitializeComponent() but I doubt it is necessary):
MessagingCenter.Send<Object>(this, "HideOsNavigationBar");

Windows notification created with NotifyIcon shows "microsoft.explorer.notification" and GUID

We have written a WPF desktop application for Windows. The application launches on start-up and mostly runs in the background, but has a UI which is accessible via the system tray. Occasionally the app needs to notify the user of something, and so for this, we use the NotifyIcon library to generate notifications. Here is the relevant code:
XAML:
<mui:ModernWindow
...
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:tb="http://www.hardcodet.net/taskbar"
... >
<tb:TaskbarIcon
x:Name="MyAppIcon"
...
</tb:TaskbarIcon>
</mui:ModernWindow>
C# code behind:
using Hardcodet.Wpf.TaskbarNotification
public void ShowStartupBalloon(string message)
{
// show balloon with built-in icon ie 'Info'
MyAppIcon.ShowBalloonTip(Properties.Resources.App_Title, message, BalloonIcon.Info);
}
The notifications appear as small floating windows near the taskbar, but (sometimes, not always) they include the string "microsoft.explorer.notification" and GUID.
We would like to eliminate these as they are confusing our customers; many think some kind of error in the software has occurred. Does anyone know how to suppress that in order to display only the text of the notification we have supplied?

I've experienced this problem as well. From what I've gathered, that bottom text is Microsoft's way of making sure that a user knows the source of a notification, and that random programs can't impersonate a genuine windows notification. The inclusion of a ToolTipIcon (in your case the info icon) seems to trigger this.
As a result, you can remove that text completely by not specifying a BalloonTipIcon, either by not defining the property at all, or defining it as None:
MyAppIcon.ShowBalloonTip(Properties.Resources.App_Title, message, BalloonIcon.None);
The only tradeoff, of course, is that your notification won't have an icon.
Hope this helps.

Show icon with automatic timeout:
public static void ShowBalloon(string title, string body)
{
// Show with icon
NotifyIcon ni = new NotifyIcon() { Visible = true, Icon = Properties.Resources.Icon};
// Timeout is deprecated since Vista
ni.ShowBalloonTip(0, title, body, ToolTipIcon.None);
// Dispose on event
ni.BalloonTipClosed += (sender, e) => ni.Dispose();
}

Microsoft.Explorer.Notification text is shown due to immediate disposal of NotifyIcon object.
So basically if you call
MyAppIcon.ShowBalloonTip(5000);
MyAppIcon.Dispose();
you get the Microsoft.Explorer.Notification.{GUID} instead of AppName in the notification title.
To fix that avoid direct disposal and use what Beni proposed:
MyAppIcon.BalloonTipClosed += (sender, e) => MyAppIcon.Dispose();

Calling a WPF Window with resourses from the Tray

I have a Windows Tray project that opens a WPF window when Settings is clicked. The WPF window opens and displays some of the content properly, but I have two lists that are bound to another class that have odd behavior.
These lists are displayed on two different tabs as devices. On one tab, there is a graphical representation from which the device can be started, and the other tab shows the settings for the device. Everything works perfectly when the WPF application is set as the startup project. However, when I start it from the tray, the lists load correctly, and display in the first tab, where they can be started, but the second tab shows no devices present. They are both linked to the same data.
At first, I thought that there was an issue with binding, but after several days of trying to resolve this, I believe the problem is with App.xaml, where there is a reference to a resource. I suspect that since i am not referencing App.xaml, the resource is not loaded, and the list is not being set up properly. The only difference between the project working and not working is that one has the WPF as startup project, and the other uses the tray to call the WPF.
My question, then, is how do I reference App.xaml to ensure that I load the required resource.
Below is some of my code, in case it might help.
App.xaml
<Application x:Class="Sender_Receiver.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="Shell.xaml">
<Application.Resources>
<ResourceDictionary Source="Themes\Generic.xaml"/>
</Application.Resources>
Current call to open the WPF
private void settingsEvent_Click(object sender, EventArgs e)
{
gui = new Sender_Receiver.mainWindow(); // mainWindow() located in Shell.xaml
gui.Show();
}
Code to display the devices. A collapsibleSection implements Expander and RepeatControl implements ItemsControl.
<c:CollapsibleSection Header="Senders">
<c:CollapsibleSection.CollapsedContent>
<c:RepeatControl Margin="30,0,0,0" ItemsSource="{Binding SendersList}"
ItemType="{x:Type m:Sender}" List="{Binding SendersList}"
ItemTemplate="{StaticResource SenderSummary}"/>
</c:CollapsibleSection.CollapsedContent>
<Border BorderThickness="1" BorderBrush="Chocolate" Margin="30,0,0,0">
<c:RepeatControl ItemsSource="{Binding SendersList}"
ItemType="{x:Type m:Sender}"
List="{Binding SendersList}"
ItemTemplate="{StaticResource SenderTemplate}"/>
</Border>
</c:CollapsibleSection>
The image below shows how the application is behaving under different conditions.
Any assistance would be greatly appreciated.

I finally figured this one out. Instead of instantiating the UI, the entire WPF application must be called to run. This will cause the App.xaml to load the dictionary, and other WPF forms can then access it. This is done with the following code:
private void settingsEvent_Click(object sender, EventArgs e)
{
if (gui == null)
{
gui = new App();
gui.MainWindow = new mainWindow();
gui.InitializeComponent();
}
else
{
gui.InitializeComponent();
gui.MainWindow.Show();
gui.MainWindow = new mainWindow();
}
}
private static App app = new App();
You must keep adding the mainWindow back to the App, as it seems to be set to null when the window shows.
This was discovered through experimentation, so i am sure it is not the best practice, but it works, and right now, that was what I needed.
EDIT
For my purposes, however, this still was not working. I could either open the Settings window only once, or I could not get an event handler to work on it the first time it was open. Finally, Josh came up with the correct answer:
Process myProcess = new Process();
myProcess.StartInfo.UseShellExecute = false;
myProcess.StartInfo.FileName = "C:\\mysettingsapp\\mysettingsapp.exe"; // replace with path to your settings app
myProcess.StartInfo.CreateNoWindow = false;
myProcess.Start();
// the process is started, now wait for it to finish
myProcess.WaitForExit(); // use WaitForExit(int) to establish a timeout
His full explanation can be found here.

setting button border which already has a background color

I'm absolute beginner to mono for android.
Following buttons are created dynamically and assigned some background color.
How to assign black border with particular thickness to each button?(refer below screenshot).
Left image is how it looks now and right image is how it should look like.
I've referred this and this on SO, but they doesn't provide the guidance I needed.
Any help appreciated...
EDIT
Code for setting Button Background :
int[] colors=GetColorForScrips(decimal.Parse(_result.Rows[i]["Change(%)"].ToString ()));
btn.SetBackgroundColor(Color.Rgb(colors[0],colors[1],colors[2]));
In GetColorForScrips(), I pass a float value, based on which RGB components are returned.
Note:
I'm using Mono for Android as my IDE and not Eclipse.
I'm assigning background color by using above mentioned code snippet.
If I use btn.SetBackgroundDrawable(Resource.Drawable.Heatmap_Border);, it gives me error that can't convert from int to drawable.
If I use btn.SetBackgroundResource(Resource.Drawable.Heatmap_Border);, it gives me full black screen i.e. Buttons are clickable, but not visible.
Proposed output:
As shown in right image above, each button will have a particular background depending on some value. This background is set dynamically.
I also want to use black border across the button.
But I guess the big catch here is I can't use any two from btn.SetBackgroundDrawable() OR btn.SetBackgroundResource() OR btn.SetBackgroundColor() together.
In such a scenario, only later will be implemented.
Any solution???
FINAL EDIT
As suggested by one of the users, this works perfectly... (GetColorForScrips() returns RGB value based on a Float value).
GradientDrawable drawable = new GradientDrawable();
drawable.SetShape(ShapeType.Rectangle);
drawable.SetStroke(1, Color.Black);
int[] colors=GetColorForScrips(decimal.Parse(result.Rows[i]["Change(%)"].ToString ()));
drawable.SetColor(Color.Rgb(colors[0],colors[1],colors[2]))
btn.SetBackgroundDrawable(drawable);

use this code
create one button_bg.xml file in drawable folder
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<solid android:color="#color/background_color"/>
<corners
android:bottomRightRadius="5dp"
android:bottomLeftRadius="5dp"
android:topLeftRadius="5dp"
android:topRightRadius="5dp"/>
<stroke android:width="2dp" android:color="#color/borderline_color" />
</shape>
instead of this
btn.SetBackgroundColor(Color.Rgb(colors[0],colors[1],colors[2]));
use this as your button background like this
btn.setBackgroundResource(R.drawable.button_bg)`

You can make GradientDrawable programmatically and by using this, you can set border, color in runtime.
here's simple example.
public class And_testActivity extends Activity {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
LinearLayout view = (LinearLayout) findViewById(R.id.content_view);
for( int i=0;i<10;i++) {
Button btn = new Button(getApplicationContext());
GradientDrawable drawable = new GradientDrawable();
drawable.setShape(GradientDrawable.RECTANGLE);
drawable.setStroke(5, Long.decode("0xff00ffff").intValue() + i * 30);
drawable.setColor( Long.decode("0xffff00ff").intValue()+ i * 50);
btn.setBackgroundDrawable(drawable);
view.addView(btn , new LayoutParams(30, 30));
}
}
}
I used this layout xml.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:id="#+id/content_view" >
</LinearLayout>