I have .Net Maui page with some entries.
When running the app in Windows, the entries have padding. However in android physical device, there is no padding.
Here is my page code (nothing fancy) :
<VerticalStackLayout IsVisible="{Binding AccessStaffMode}" Margin="20">
<Entry x:Name="InputIdentifiant" MaxLength="20" Placeholder="Identifiant"/>
<Entry x:Name="InputPassword_StaffMode" MaxLength="20" Placeholder="Password"/>
<Entry x:Name="InputSecurityCode" MaxLength="20" Placeholder="Security code" />
</VerticalStackLayout>
In windows it shows as :
In android physical device, it shows as :
Does anyone know please how to correct that please ? I need the padding in all platforms in my entries.
Thanks.
Cheers,
Probably a bug. I suggest you report a bug in the MAUI repo.
You can use the Handlers in MAUI, just like the renderer in xamarin.
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.SetBackgroundColor(Colors.Transparent.ToPlatform());
#elif IOS
handler.PlatformView.BorderStyle = UIKit.UITextBorderStyle.None;
#elif WINDOWS
handler.PlatformView.FontWeight = Microsoft.UI.Text.FontWeights.Thin;
#endif
});
}
}
In the ModifyEntry method you can customize an entry on different platform.
More details you can refer to this article.
Related
I started working with .NET MAUI.
Installed Community Toolkit to display Popup.
Popup UI doesn't show transparent background color in iOS where as in Android it works perfectly fine.
Android:
iOS:
Added XAML File for Popup:
Popup:
<?xml version="1.0" encoding="utf-8" ?>
<mct:Popup
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="testpopup.PopupPage"
xmlns:mct="clr-namespace:CommunityToolkit.Maui.Views;assembly=CommunityToolkit.Maui"
>
<VerticalStackLayout BackgroundColor="Transparent">
<Label
Text="Welcome to .NET MAUI!"
VerticalOptions="Center"
HorizontalOptions="Center" />
</VerticalStackLayout>
</mct:Popup>
I just modified the button on MainPage to display the popup:
private void OnCounterClicked(object sender, EventArgs e)
{
this.ShowPopup(new PopupPage());
}
Any help is appreciated!
This issue has been resolved in latest version of CommunityToolkit.Maui 4.0.0
There is the same problem in GitHub issue, and as the answerer said, this is normal behavior for iOS. In iOS, the hierarchy is managed by the view controller. Each page has a separate view controller. A page consists of a window, a root view, and a subview. You cannot see the layout of the previous page by setting the background color to be transparent.
For more details, you can refer to the following documents:
User interface | Microsoft
The View Controller Hierarchy | Apple
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit" Color="Transparent"
Got it working on android
I've noticed many apps have settings pages which have controls which behave like buttons, but don't look like buttons.
Anyone know what type of controls these are?
Specifically the one I am tapping on in the linked video file below:
Video example.
It's not a regular control but to do this in Maui you can use the Popup control to replicate a behaviour which is similar to what you just showed
Create a popup as shown here :
<toolkit:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
x:Class="MyProject.SimplePopup">
<VerticalStackLayout>
<Label Text="This is a very important message!" />
</VerticalStackLayout>
</toolkit:Popup>
Its cs file :
public partial class SimplePopup : Popup
{
public SimplePopup()
{
InitializeComponent();
}
}
And then use Radiobuttons from Maui to achieve the UI you need.
And for that effect use touch effects Its being ported to Maui at the moment though As far as I know (Not sure if works as a compatibility package)
I hope this helps!
It's a picker control, you can get more info here: https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/picker
<StackLayout>
<Label Text="Theme"
Margin="0,25,0,5"
FontAttributes="Bold"/>
<Picker x:Name="picker"
Title="Select theme">
<Picker.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>Light</x:String>
<x:String>Dark</x:String>
<x:String>Black</x:String>
<x:String>Automatic (device theme)</x:String>
</x:Array>
</Picker.ItemsSource>
</Picker>
Android:
Android picker example
Windows: Windows picker example
I have an app with Ionic 3 and in your app.component.ts, i using the Statusbar ionic plugin to hide that, but, this occurs only after platform ready is fired.
How do i hide that during splashscreen? I tried:
– Not hide during splashscreen, only after this hide
– Not change background color during splashscreen
Solutions?
Android
It seems that there is not elegant way to hide statusbar on app launch.
But there is an way to do that.
Find MainActivity.java (maybe platforms/android/src/io/ionic/starter)
Add the below code
import android.view.WindowManager;
public class MainActivity extends CordovaActivity
{
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
// enable Cordova apps to be started in the background
Bundle extras = getIntent().getExtras();
if (extras != null && extras.getBoolean("cdvStartInBackground", false)) {
moveTaskToBack(true);
}
// [Hyuck] add this two line below
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
// Set by <content src="index.html" /> in config.xml
loadUrl(launchUrl);
}
// [Hyuck] onStart() is totally new.
#Override
public void onStart()
{
super.onStart();
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);
}
}
IOS
I can only test Android device. So, I just leave the link which may solve your issue
After addition of your code in MainActivity page
I run the command to build apk
I got this error
Task :app:compileDebugJavaWithJavac FAILED
E:\Ionic\AIOU_Solutions1\platforms\android\app\src\main\java\io\ionic\starter\MainActivity.java:38: error: package WindowManager does not exist
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);
I got the same problem with a Cordova based app. I couldn't figure out how to hide the status bar during the Splashcreen (tried many things) until I found this solution.
Hide status bar during splashcreen
Option 1 - Edit files yourself
Find the file platforms/android/app/src/main/res/values/strings.xml
Add a custom theme with specific rules by editing the XML
<?xml version='1.0' encoding='utf-8'?>
<resources>
<string name="app_name">My App Name</string>
<string name="launcher_name">#string/app_name</string>
<string name="activity_name">#string/launcher_name</string>
<!-- Add your custom theme rules -->
<style name="MyCustomTheme" parent="#style/Theme.AppCompat.NoActionBar">
<item name="android:windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
</style>
</resources>
Find the file platforms/android/app/src/main/AndroidManifest.xml
Find the <activity> tag and add the reference to "MyCustomTheme"
<activity android:theme="#style/MyCustomTheme" ...etc...
Option 2 - Edit files from the Cordova config.xml
You may prefer to manage this custom theme directly from your config.xml file without having to edit yourself the AndroidManifest.xml and strings.xml. It can be helpful in case of cordova platform remove android and cordova platform add android which will delete your changes.
Add this in your config.xml
<platform name="android">
<!-- Edit the activity tag fo your AndroidManifest.xml -->
<edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application/activity">
<activity android:theme="#style/MyCustomTheme"/>
</edit-config>
<!-- Edit the strings.xml file -->
<edit-config file="strings.xml" mode="add" target="/resources">
<style name="MyCustomTheme" parent="#style/Theme.AppCompat.NoActionBar">
<item name="android:windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
</style>
</edit-config>
</platform>
Last step, remember that for being able of using <edit-config> tag from your config.xml file, you need to add this xmlns attribute to your <widget> tag.
<?xml version='1.0' encoding='utf-8'?>
<widget xmlns:android="http://schemas.android.com/apk/res/android" ...etc...
If you have better options, I'm curious to heard about it!
I've got a JavaScript fix specifically for IE9 and want to load it into my project only for that browser. I thought I might be able to do something like this in my .gwt.xml:
<script src="ie9svgfix.js">
<when-property-is name="user.agent" value="ie9"/>
</script>
But unfortunately this doesn't work. Does anybody know a clean way to do this in GWT?
Thanks,
Jon
You can try conditional comments:
<!--[if IE 9]>
<script src="ie9svgfix.js"></script>
<![endif]-->
The cleanest way in GWT would be to use deferred-binding and inject the script with the ScriptInjector in the IE9 permutation; or have the script loaded by the host page, in which case you can use conditional comments (as suggested by Stano).
With deferred-binding, you'd have to create a class to "deferred-bind" with a specific implementation for IE9.
class SvgFix {
public void fix() { /* no op */ }
}
class SvgFixIE9 {
#Override
public void fix() {
ScriptInjector.fromUrl(GWT.getModuleBaseForStaticFiles() + "ie9svgfix.js")
.setWindow(ScriptInjector.TOP_WINDOW)
.inject();
}
}
And in your EntryPoint, inject the script:
GWT.<SvgFix>create(SvgFix.class).fix();
And finally then choose the appropriate implementation based on permutation:
<replace-with class="com.example.client.SvgFixIE9">
<when-type-assignable class="com.example.client.SvgFix" />
<when-property-is name="user.agent" value="ie9" />
</replace-with>
BTW, note that <script> in gwt.xml files is not supported with the xsiframe linker, and I'd encourage you to use it going forward (it has all the advantages of all the other linkers, and none of their drawbacks, plus it adds Super Dev Mode, flexibility/configurability, etc.)
Is there a common way to implement videos on the web that will also work on iPhone/iPad?
My idea is to provide two versions (Flash and HTML5) and check with JavaScript if HTML5 is supported — if so, then play Flash; if not, play HTML5. Maybe there’s a better way?
Dive into HTML5 nails it here : http://diveintohtml5.ep.io/video.html
The final markup uses a
element for HTML5 video, a nested
element for Flash fallback,
and a small bit of script for the
benefit of Android devices:
<video id="movie" width="320" height="240" preload controls>
<source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"' />
<source src="pr6.mp4" />
<object width="320" height="240" type="application/x-shockwave-flash"
data="flowplayer-3.2.1.swf">
<param name="movie" value="flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"clip": {"url": "http://wearehugh.com/dih5/pr6.mp4", "autoPlay":false, "autoBuffering":true}}' />
<p>Download video as MP4, WebM, or Ogg.</p>
</object>
</video>
<script>
var v = document.getElementById("movie");
v.onclick = function() {
if (v.paused) {
v.play();
} else {
v.pause();
}
};
</script>
You can use HTML5 video tag as a default option and put a fallback object tag inside it.
You can read about HTML5 video tag usage in Safari (including Mobile Safari) here: https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Introduction/Introduction.html
You can present videos either from your app's resource bundle or streamed via the internet, using this class: MPMoviePlayerController
Apple docs:
http://developer.apple.com/library/ios/#documentation/mediaplayer/reference/MPMoviePlayerController_Class/MPMoviePlayerController/MPMoviePlayerController.html
I found this to be very helpful:
http://camendesign.com/code/video_for_everybody
It uses HTML5 but gracefully fails to flash.