I am creating an app using Xamarin Forms using PCL project. In ios, a black line is shown at the bottom of the web view only. I don't experience the same issue in android or windows 10.
As noted in the comments, I dealt with this before. It has to do with the background color of the webview. I have tried several things, the only thing that worked was setting this:
webView.Opaque = false;
webView.BackgroundColor = UIColor.Clear;
In a custom renderer on the UIWebView.
A complete implemented custom renderer would then look like this:
[assembly: ExportRenderer (typeof (WebView), typeof (WebViewRenderer))]
namespace YourApp.iOS.Renderers
{
public class WebViewRenderer : Xamarin.Forms.Platform.iOS.WebViewRenderer
{
protected override void OnElementChanged (VisualElementChangedEventArgs e)
{
base.OnElementChanged (e);
if (NativeView != null) {
var webView = (UIWebView)NativeView;
webView.Opaque = false;
webView.BackgroundColor = UIColor.Clear;
}
}
}
}
Related
I'm working on Embedded Images Tint color in xamarin forms using with this nuget package, working fine in android but not in iOS.
As per my search I used rendering mode to AlwaysTemplate but in my scenario I'm unable to use rendering mode.
what I'm doing is using the image references from solution file not from iOS assets.
Below is my code snippet.
<controls:TintedImage
x:Name="ColorChange"
Aspect="AspectFit"
HeightRequest="17"
Source="{local:ImageResource AppName.Images.dot.png}"
TintColor="{StaticResource PlaceholderColor}"
VerticalOptions="Center"
WidthRequest="17" />
I want to change TintColor if an image without rendering image for iOS in xamarin forms.
You can write a custom renderer of Image to change the tint color and UIImageRenderingMode.
In Xamarin.forms:
public class myImage : Image
{
}
In iOS project:
[assembly: ExportRenderer(typeof(myImage), typeof(myImageRenderer))]
namespace WorkingWithImages.iOS
{
public class myImageRenderer : ImageRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Image> e)
{
base.OnElementChanged(e);
Control.TintColor = UIColor.Red;
}
protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
if (Control.Image != null)
{
UIImage image = Control.Image;
image = image.ImageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate);
Control.Image = image;
}
}
}
}
I'm using Xamarin.Forms to load an internet's webpage (requirements of the client, please don't judge me), the problem is that in iOS the webpage appears to be bigger that it is.
I don't have any custom render on iOS.
Here is the website loaded on safari on a iPhone 6 iOS 11.1.2
And here is loaded on the webview
MainPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Juppie"
x:Class="Juppie.MainPage">
<Grid>
<WebView x:Name="Navegador" Source="http://empleosapp.caonainteractive.com/"
WidthRequest="1000" HeightRequest="1000" IsVisible="{Binding Path=HayInternet}" ></WebView>
<ActivityIndicator IsRunning="{Binding Path=Navegando}" IsVisible="{Binding Path=Navegando}"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height,
Factor=0.33}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height,
Factor=0.33}"/>
</Grid>
</ContentPage>
MainPage.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Plugin.Connectivity;
using System.ComponentModel;
namespace Juppie
{
public partial class MainPage : ContentPage, INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public MainPage()
{
InitializeComponent();
Navegador.Navigating += Navegador_Navigating;
Navegador.Navigated += (sender, e) => { Navegando = false; };
HayInternet = true;
BindingContext = this;
}
bool hayInternet;
public bool HayInternet
{
get
{
return hayInternet;
}
set
{
hayInternet = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("HayInternet"));
EvaluarInternet();
}
}
bool navegando;
public bool Navegando
{
get
{
return navegando;
}
set
{
navegando = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Navegando"));
}
}
public async void EvaluarInternet(){
if (!HayInternet)
{
await DisplayAlert("Aviso","Se requiere conexion a internet para emplear esta aplicacion", "OK");
}
}
protected override void OnAppearing()
{
HayInternet = CrossConnectivity.IsSupported && CrossConnectivity.Current.IsConnected;
CrossConnectivity.Current.ConnectivityChanged += (sender, args) =>
{
HayInternet = args.IsConnected;
};
base.OnAppearing();
}
protected override bool OnBackButtonPressed()
{
if (Navegador.CanGoBack)
{
Navegador.GoBack();
return false;
}
return base.OnBackButtonPressed();
}
void Navegador_Navigating(object sender, WebNavigatingEventArgs e)
{
Navegando = true;
if (e.Url.Contains("/banner"))
{
e.Cancel = true;
var uri = new Uri(e.Url.Replace("/banner", ""));
Device.OpenUri(uri);
}
}
}
}
I tried with a custom render and set the scalePageToFit = false, without success.
If anyone knows how can I fix this, please let me know.
Xaml: - VerticalOptions="FillAndExpand" seems to fill the HeightRequest and WidthRequest property specification requirements for the WebView to render in a StackLayout - in a Grid it seems to render anyway:
<Grid>
<WebView x:Name="webView"
VerticalOptions="FillAndExpand"
Source="https://www.xamarin.com/"/>
</Grid>
Renderer, ScalesPageToFit is false by default (at least in the simulator with iPhone SE 11.2)
[assembly: ExportRenderer(typeof(WebView), typeof(MyWebViewRenderer))]
namespace MyNamespace.iOS
{
public class MyWebViewRenderer : WebViewRenderer
{
protected override void OnElementChanged(VisualElementChangedEventArgs e)
{
base.OnElementChanged(e);
if (NativeView != null && e.NewElement != null)
{
var webView = ((UIWebView)NativeView);
webView.ScalesPageToFit = true;
}
}
}
}
The screenshots below are from the simulator with iPhone SE.
ScalesPageToFit = true:
ScalesPageToFit = false:
Tested on my iPhone 6 and the app was showing the same size of font as Safari.
I also tested with larger system font in the font size in the app and it was not affected with the app font size.
But I did notice that when the activity indicator was running, my font size became smaller and it turned normal after the activity indicator disappear.
Maybe the font size issue was cause by the side effect of any additional stuff like a Nuget packages or Activity indicator?
You could try to use a new empty form and load only the Webview to compare the differences.
By the way, your app appearance is very alike with iPhone with turned on Display Zoom function.
Before turn on Display Zoom:
After turned on Display Zoom:
Is it possible that the sizing is overwritten by the accessability-settings from the iPhone?
See Settings-App -> General -> Accessability -> Bigger Text
(freely translated from german, actual menu entries may be named different)
I have faced the same issue.
In Xamarin.Forms App resolution is based on the Launch screen. If you are using Assets (LaunchImage) for Launch screen. Then your app resolution is set as per LaunchImage.
The best solution is: use storyboard (LaunchScreen.storyboard) or XIB for Launch screen. This improves your App UI. like font size and App resolution
I try to create a custom dialog with nativescript using this link https://docs.nativescript.org/angular/code-samples/modal-page.html
All work great. But I don't know how to make the modal dialog transparent. The property backgroundcolor doesn't works with ios
Any help will be fine
Apple recommends that you don't make modals transparent, see this issue on nativescript's issue tracker: https://github.com/NativeScript/NativeScript/issues/2086#issuecomment-220629191
Nativescript's built-in modal is always fullscreen on iOS and cannot be transparent.
BUT you can workaround that if you (like us) need to.
Here is how we did it with nativescript-angular:
First inject Page in the modal-component.
On iOS override the function _showNativeModalView on the page-object like this:
import { Page } from 'ui/page';
const pageCommon = require('ui/page/page-common').Page;
import { Color } from 'color';
import * as utils from 'utils/utils';
......
in the constructor:
if (page.ios) {
// iOS by default won't let us have a transparent background on a modal
// Ugly workaround from: https://github.com/NativeScript/nativescript/issues/2086#issuecomment-221956483
page.backgroundColor = new Color(50, 0, 0, 0);
(<any>page)._showNativeModalView = function(parent, context, closeCallback, fullscreen) {
pageCommon.prototype._showNativeModalView.call(this, parent, context, closeCallback, fullscreen);
let that = this;
this._modalParent = parent;
if (!parent.ios.view.window) {
throw new Error('Parent page is not part of the window hierarchy. Close the current modal page before showing another one!');
}
if (fullscreen) {
this._ios.modalPresentationStyle = 0;
} else {
this._ios.modalPresentationStyle = 2;
this._UIModalPresentationFormSheet = true;
}
pageCommon.prototype._raiseShowingModallyEvent.call(this);
this._ios.providesPresentationContextTransitionStyle = true;
this._ios.definesPresentationContext = true;
this._ios.modalPresentationStyle = UIModalPresentationOverFullScreen;
this._ios.modalTransitionStyle = UIModalTransitionStyleCrossDissolve;
this._ios.view.backgroundColor = UIColor.clearColor;
parent.ios.presentViewControllerAnimatedCompletion(this._ios, utils.ios.MajorVersion >= 9, function completion() {
that._ios.modalPresentationStyle = UIModalPresentationCurrentContext;
that._raiseShownModallyEvent(parent, context, closeCallback);
});
};
}
You could also override that prototype of Page, but I think it's much cleaner to override it on the instance of Page instead.
I'm writing Webview renderer in Xamarin for Windows Desktop project by following guide in Xamarin HybridWebView
[assembly: ExportRenderer(typeof(Xamarin.Forms.WebView), typeof(ProApp.Windows.Helpers.CustomWebViewRenderer))]
namespace ProApp.Windows.Helpers
{
public class CustomWebViewRenderer : ViewRenderer<Xamarin.Forms.WebView, global::Windows.UI.Xaml.Controls.WebView>
{
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.WebView> e)
{ //Debug Point
base.OnElementChanged(e);
if (this.Control == null)
{
}
}
}
}
I've similarly defined WebView Renderer in Android also. I'm running a Xamarin.Form Content page with WebView. The android WebView renderer is getting executed/debug but I'm not getting any debugger for Windows and code in Xamarin.Forms is running.
I also tried to add var t = new Windows.Helpers.CustomWebViewRenderer(); in App.xaml.cs to avoid any non-inclusion after build (to have some reference to class), but didn't work. Is there anything I'm missing?
The easier way to do it is to let the XF framework implement its webview code. Inherit from WebViewRenderer instead.
[assembly: ExportRenderer(typeof(WebView), typeof(CustomWebViewRenderer))]
namespace Mobile.WinRT.Renderers
{
public class CustomWebViewRenderer: WebViewRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
{
base.OnElementChanged(e);
if (Control != null)
{
}
}
}
}
Also I recommend just creating a simple control in your XF project called something like CustomWebView that just inherits from WebView. Then you can render for this instead of every possible WebView in the app.
I want to use Webview in Xamarin gtk Form. The problem is that i can't find Webview in toolbox.
Looking at this example i added some code in default MainWindow.cs code.
using System;
using Gtk;
using Xamarin.Forms;
public partial class MainWindow: Gtk.Window
{
public MainWindow () : base (Gtk.WindowType.Toplevel)
{
Build ();
WebView webView = new WebView
{
Source = new UrlWebViewSource
{
Url = "http://blog.xamarin.com/",
},
VerticalOptions = LayoutOptions.FillAndExpand
};
vbox2.Add (webView); //giving error since it webview is not widget.
}
protected void OnDeleteEvent (object sender, DeleteEventArgs a)
{
Gtk.Application.Quit ();
a.RetVal = true;
}
}
I am new to Xamarin and i don't know i can i create a xamarin gtk# tool that can run on OSX and windows.
I also want to fill htmlDocument and invoke click. Is it possible with xamarin gtk# webview