When I create WebView in xamarin, it is not visible when the application is launched. It gets visible when the view is readjusted.
How can I resolve the above issue.
Here is sample code that I am using
var browser = new WebView();
var htmlSource = new HtmlWebViewSource ();
public SamplePage()
{
InitializeComponent();
StackLayout stackLayout = new StackLayout
{
VerticalOptions = LayoutOptions.FillAndExpand,
Children =
{
sometextbox,
browser
}
}
}
//Code within some button's event
htmlSource.Html = #"<html><body>
<h1>Xamarin.Forms</h1>
<p>Welcome to WebView.</p>
</body></html>";
browser.Source = htmlSource;
It seems like the FillAndExpand should be on the webview, not on the StackLayout
The issue is that WebView has no idea how big it needs to be and so it is probably there but has no size. What I do is to assign a Width and Height in SizeChanged like so:
public SamplePage()
{
InitializeComponent();
StackLayout stackLayout = new StackLayout
{
VerticalOptions = LayoutOptions.FillAndExpand,
Children =
{
sometextbox,
browser
}
}
SizeChanged += (sender, args) => {
browser.WidthRequest = Width;
browser.HeightRequest = Height * 0.75;
}
}
If the browser still does not show up, keep the SizeChanged() code since it will update the WebView on rotation but also add the same code to OnAppearing():
protected override void OnAppearing() {
base.OnAppearing();
browser.WidthRequest = Width;
browser.HeightRequest = Height * 0.75;
}
If you needed to do that upon button click you could do that or you could even leave the above code in place and just change WebView.IsVisible.
Related
I am using the example here, but I am struggeling to fill in the right size parameter here so that it represents the same size as the forms view.
https://michaelridland.com/xamarin/creating-native-view-xamarin-forms-viewpage/
public static UIView ConvertFormsToNative(Xamarin.Forms.View view, CGRect size)
{
var renderer = RendererFactory.GetRenderer(view);
renderer.NativeView.Frame = size;
renderer.NativeView.AutoresizingMask = UIViewAutoresizing.All;
renderer.NativeView.ContentMode = UIViewContentMode.ScaleToFill;
renderer.Element.Layout(size.ToRectangle());
var nativeView = renderer.NativeView;
nativeView.SetNeedsLayout();
return nativeView;
}
And for Android:
public static ViewGroup ConvertFormsToNative(Xamarin.Forms.View view, Rectangle size)
{
var vRenderer = RendererFactory.GetRenderer (view);
var viewGroup = vRenderer.ViewGroup;
vRenderer.Tracker.UpdateLayout ();
var layoutParams = new ViewGroup.LayoutParams ((int)size.Width, (int)size.Height);
viewGroup.LayoutParameters = layoutParams;
view.Layout (size);
viewGroup.Layout (0, 0, (int)view.WidthRequest, (int)view.HeightRequest);
return viewGroup;
}
}
What values from my Xamarin Forms should be put in, so that it will represent the CGRect required to have the same on the Native View.
var rect = new CGRect();
rect.X = (nfloat)view.X;
rect.Y = (nfloat)view.Y;
rect.Width = (nfloat)view.Width;
rect.Height = (nfloat)view.Height;
Solved it, where "view" is the Xamarin Forms view.
I am working on Xamarin.iOS, I want to display UIPopViewController in iphone and iPad in center Screen. The below way I try the code :
public override void ViewDidLoad()
{
base.ViewDidLoad();
showButton.TouchUpInside += (sender, e) => {
// Create a UIImage view to show in the popover
UIImageView monkeyIcon = new UIImageView(new CGRect(20, 20, 200, 200));
monkeyIcon.Image = UIImage.FromFile("Abc.png");
monkeyIcon.UserInteractionEnabled = true;
// Create a view controller to act as the popover
UIViewController popover = new UIViewController();
popover.View = monkeyIcon;
popover.ModalPresentationStyle = UIModalPresentationStyle.Popover;
// Grab Image
var image = UIImage.FromFile("298-circlex.png");
// Add a close button
var closeButton = new UIButton(new CGRect(0, 20, 200, 200));
closeButton.UserInteractionEnabled = true;
closeButton.SetTitle("Close", UIControlState.Normal);
monkeyIcon.AddSubview(closeButton);
// Wireup the close button
closeButton.TouchUpInside += (button, e2) => {
popover.DismissViewController(true, null);
};
// Present the popover
PresentViewController(popover, true, null);
// Configure the popover for the iPad, the popover displays as a modal view on the
//iPhone
UIPopoverPresentationController presentationPopover = popover.PopoverPresentationController;
if (presentationPopover != null)
{
presentationPopover.SourceView = this.View;
presentationPopover.PermittedArrowDirections = 0;
presentationPopover.SourceRect = showButton.Frame;
presentationPopover.Delegate = this;
}
};
}
[Export("adaptivePresentationStyleForPresentationController:")]
public UIModalPresentationStyle GetAdaptivePresentationStyle(UIPresentationController forPresentationController)
{
return UIModalPresentationStyle.None;
}
public override void DidReceiveMemoryWarning()
{
base.DidReceiveMemoryWarning();
// Release any cached data, images, etc that aren't in use.
}
I tried all the answer in SO and google but nothing is help to me.
Problem 1 :
- In Iphone the PopViewController is displaying in the full Screen, but I want to center and small PopView.
Problem 2 :
- In Ipad the PopViewController is displaying in the LeftSide I want to display it Center.
Any Help will be Appreciated.
If you don't want this PopoverPresentationController to be shown full screen, you should set a size to its owner Controller: popover.PreferredContentSize = new CGSize(200, 200);. Also you should set the PopoverPresentationController's configuration firstly before you present the popover.
In Ipad the PopViewController is displaying in the LeftSide I want to
display it Center.
SourceRect means the rectangle in the specified view in which to anchor the popover. You want to show this pop in the center, set this to your View.Frame. Here is my code for you referring to:
UIPopoverPresentationController presentationPopover = popover.PopoverPresentationController;
if (presentationPopover != null)
{
presentationPopover.SourceView = this.View;
presentationPopover.PermittedArrowDirections = 0;
presentationPopover.SourceRect = View.Frame;
//Configure this Delegate first before presenting.
presentationPopover.Delegate = this;
}
PresentViewController(popover, true, null);
I work on a xamarin.iOS project and I need to convert a Xamarin.Forms.View to an UIView. I managed to do what I want on Android, but not on iOS.
I have tried to use this method found here:
public static UIView ConvertFormsToNative(Xamarin.Forms.View view, CGRect size)
{
var renderer = RendererFactory.GetRenderer (view);
renderer.NativeView.Frame = size;
renderer.NativeView.AutoresizingMask = UIViewAutoresizing.All;
renderer.NativeView.ContentMode = UIViewContentMode.ScaleToFill;
renderer.Element.Layout (size.ToRectangle());
var nativeView = renderer.NativeView;
nativeView.SetNeedsLayout ();
return nativeView;
}
But it's not work in my project ...
Thank you in advance for your help !
Don't forget using Xamarin.Forms.Forms.Init(); in the appdelegate.
I tried with a Xamarin map control but it does not work. I use this and voila!
public partial class ViewControllerCliente : UIViewController........
var map = new Map(
MapSpan.FromCenterAndRadius(
new Position(37, -122), Distance.FromMiles(0.3)))
{
IsShowingUser = true,
HeightRequest = 200,
WidthRequest = 200,
VerticalOptions = LayoutOptions.FillAndExpand
};
var stack = new StackLayout { Spacing = 0 };
stack.Children.Add(map);
this.Add(ConvertFormsToNative(stack,new CGRect(0, 180,
UIScreen.MainScreen.Bounds.Width,360)));
I wanted chat application type user interface in my app & i am targeting android and iOS.
I am using Xamarin.Forms.Editor for reply
Editor _replyEntry = new Editor
{
HorizontalOptions = LayoutOptions.FillAndExpand,
TextColor = Color.Black
}
in this case the editor height remains constant and allows scrolling and editor does not expands
Then i used InvalidateMeasure()
_replyEntry .TextChanged += (sender, e) => { this.InvalidateMeasure(); };
in this case editor expands as when the text requires more space but does not allow scroll inside editor and if user types long message then editor does not allows scroll and text goes behind the keyboard and not visible to user
Is there any way to enable scroll and give max height to edit either in xamarin.forms of by writing custom renderer
Thanks
Here is my code
public class abc : ContentPage
{
public abc()
{
Image attchment = new Image
{
Source = "attachment.png",
HorizontalOptions = LayoutOptions.Start
};
Editor _replyEntry = new Editor
{
HorizontalOptions = LayoutOptions.FillAndExpand,
TextColor = Color.Black,
};
Button _sendButton = new Button
{
Text = "Send",
TextColor = Color.Black,
BackgroundColor = Color.Transparent,
HorizontalOptions = LayoutOptions.End
};
StackLayout replyStack = new StackLayout
{
Orientation = StackOrientation.Horizontal,
Padding = new Thickness(10),
Spacing = 10,
VerticalOptions = LayoutOptions.End,
Children = { attchment, _replyEntry, _sendButton }
};
Content = replyStack;
}
}
It looks like you will have to use a custom renderer to achieve what you are wanting.
There is a post here that has pretty much the same thing with what you are trying to achieve for Android.
In that demo it has an expanding multi-line EditText control (android:singleLine="false"), with only vertical scrollbars (android:scrollbars="vertical"), whilst disabling the horizontal scrollbars (android:scrollHorizontally="false").
You need to ensure the Editor' parent is expanding, then the editor will automatically expand too. If you make an empty contentpage and add an Editor, the is will just expand. If you place it inside a stacklayout, the you need to ensure that the stacklayout is expanding.
I know there are many about this topic (Scroll horizontally in Xamarin.Forms ScrollView), but I could not implement the horizontal scrollview which scrolls horizontally.
public class DetailView : ContentPage
{
public DetailView ()
{
StackLayout stack = new StackLayout {
Orientation = StackOrientation.Horizontal,
};
for (int i = 0; i < 40; i++)
stack.Children.Add (new Button { Text = "Button" });
var scrollView = new ScrollView
{
Orientation = ScrollOrientation.Horizontal,
Content = stack
};
Content = scrollView;
}
}
Any ideas?
try this:
public DetailView()
{
var scrollableContent = new StackLayout()
{
Orientation = StackOrientation.Horizontal,
HorizontalOptions = LayoutOptions.Fill,
Children =
{
new BoxView(){HeightRequest=40, WidthRequest=40, BackgroundColor = Color.Red},
new BoxView(){HeightRequest=40, WidthRequest=40, BackgroundColor = Color.Green},
new BoxView(){HeightRequest=40, WidthRequest=40, BackgroundColor = Color.Blue},
new BoxView(){HeightRequest=40, WidthRequest=40, BackgroundColor = Color.Maroon},
}
};
Content = new ScrollView()
{
HorizontalOptions = LayoutOptions.FillAndExpand,
Orientation = ScrollOrientation.Horizontal,
Content = scrollableContent,
};
}