We Keep Coding

Microsoft Android Emulator Shows Blank Form When Debugging

I am trying to run a Xamarin form called 'FormsApp' on my andriod emulator in visual studio. The Emulator boots up fine and renders. However, after clicking "start debugging" the form deploys to the emulator but only shows a blank white from.
https://i.imgur.com/AbkqDyJ.png
https://i.imgur.com/VttMKfh.png
I have tried playing around with my OpenGL ES Renderer settings and OpenGL ES API level settings as well. Switching to swiftshader/ANGLE D3D9/ and Compatibility (OpenGL ES 1.1/2.0) did not work. It's Still a blank white Screen when debugging.
namespace FormsApp
{
class ContentPageExample : ContentPage
{
public ContentPageExample()
{
Label labelLarge = new Label
{
Text = "Label",
FontSize = 40,
HorizontalOptions = LayoutOptions.Center
};
Label labelSmall = new Label
{
Text = "This control is great for\n" +
"displaying one or more\n" +
"lines of text.",
FontSize = 20,
HorizontalOptions = LayoutOptions.CenterAndExpand
};
Button button = new Button
{
Text = "Make It So",
FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Button)),
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Fill
};
button.Clicked += (sender, args) =>
{
button.Text = "It is so!";
};
Entry entry = new Entry
{
Placeholder = "Username",
VerticalOptions = LayoutOptions.Center,
Keyboard = Keyboard.Text
};
BoxView boxView = new BoxView
{
Color = Color.Silver,
WidthRequest = 150,
HeightRequest = 150,
HorizontalOptions = LayoutOptions.StartAndExpand,
VerticalOptions = LayoutOptions.Fill
};
Image image = new Image
{
Source = "monkey.png",
Aspect = Aspect.AspectFit,
HorizontalOptions = LayoutOptions.End,
VerticalOptions = LayoutOptions.Fill
};
var tapGestureRecognizer = new TapGestureRecognizer();
tapGestureRecognizer.Tapped += async (sender, e) =>
{
image.Opacity = .5;
await Task.Delay(200);
image.Opacity = 1;
};
image.GestureRecognizers.Add(tapGestureRecognizer);
StackLayout stackLayout = new StackLayout
{
Children =
{
labelLarge,
labelSmall,
button,
entry,
boxView,
image
},
HeightRequest = 1500
};
ScrollView scrollView = new ScrollView
{
//BackgroundColor = Color.White,
VerticalOptions = LayoutOptions.FillAndExpand,
Content = stackLayout
};
//this.BackgroundColor = Color.Black; //White
// Accomodate iPhone status bar.
this.Padding = new Thickness(10, Device.OnPlatform(20, 0, 0), 10, 5);
this.Content = scrollView;
}
}
}
No error messages..

Did you set the ContentPageExample as MainPage? I just test the ContentPageExample and it works well.
For example in class App:
public partial class App : Application
{
public App()
{
InitializeComponent();
MainPage = new ContentPageExample();
}
}

c# xamarin unable to expand the web view using xamarin cross platform project

Actual screenshot of the problem
See the attached image here, I have 4 buttons in a gird when any of them are clicked they show me a webview, but for some reason I am unable to expand the web view so that it covers rest of the screen. As you can see in the picture , webview is in a single column and buttons are in 1 row. I would really appreciate help. Thanks.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace LocalDataAccess
{
public partial class RecipeSites : ContentPage
{
public RecipeSites()
{
this.Content = gridlayout();
}
public Grid gridlayout()
{
BackgroundColor = Color.White;
Button allrecipes = new Button
{
BackgroundColor = Color.Transparent,
};
allrecipes.Clicked += new EventHandler(allrecipes_Click);
allrecipes.Image = "alrecipe.png";
Button delia = new Button
{
BackgroundColor = Color.Transparent,
};
delia.Clicked += new EventHandler(delia_Click);
delia.Image = "delia.gif";
Button bbc = new Button
{
BackgroundColor = Color.Transparent,
};
bbc.Clicked += new EventHandler(bbc_Click);
bbc.Image = "bbc.jpg";
Button food = new Button
{
BackgroundColor = Color.Transparent,
};
food.Clicked += new EventHandler(food_Click);
food.Image = "food.jpg";
var grid = new Grid();
RowDefinition gridRow1 = new RowDefinition();
gridRow1.Height = new GridLength(7, GridUnitType.Star);
grid.RowDefinitions.Add(gridRow1);
grid.Children.Add(allrecipes, 0, 1);
grid.Children.Add(delia, 1, 1);
grid.Children.Add(bbc, 2, 1);
grid.Children.Add(food, 3, 1);
return grid;
}
public void food_Click(object sender, EventArgs e)
{
Grid sl = gridlayout();
WebView webView = new WebView
{
Source = new UrlWebViewSource
{
Url = " http://www.food.com/",
},
VerticalOptions = LayoutOptions.FillAndExpand,
};
var grid1 = new Grid()
{ VerticalOptions = LayoutOptions.FillAndExpand };
ColumnDefinition c2 = new ColumnDefinition();
c2.Width = new GridLength(10, GridUnitType.Star);
grid1.ColumnDefinitions.Add(c2);
grid1.Children.Add(webView, 3,1 );
this.Content = sl;
}
public void allrecipes_Click(object sender, EventArgs e)
{
Grid sl = gridlayout();
WebView webView = new WebView
{
Source = new UrlWebViewSource
{
Url = "http://allrecipes.co.uk/",
},
HorizontalOptions = LayoutOptions.FillAndExpand
};
sl.Children.Add(webView);
this.Content = sl;
}
public void delia_Click(object sender, EventArgs e)
{
Grid sl = gridlayout();
WebView webView = new WebView
{
Source = new UrlWebViewSource
{
Url = "http://www.deliaonline.com/recipes",
},
VerticalOptions = LayoutOptions.FillAndExpand
};
sl.Children.Add(webView);
this.Content = sl;
}
public void bbc_Click(object sender, EventArgs e)
{
Grid sl = gridlayout();
WebView webView = new WebView
{
Source = new UrlWebViewSource
{
Url = "http://www.bbc.co.uk/food/recipes/",
},
VerticalOptions = LayoutOptions.FillAndExpand
};
sl.Children.Add(webView);
this.Content = sl;
}
}
}

you need to set a span value if you want a control to go across multiple rows or columns
// add button to col 0 row 4
controlGrid.Children.Add (zeroButton, 0, 4);
// make the button span 2 columns
Grid.SetColumnSpan (zeroButton, 2);

Entry control expands beyond StackLayout container

I'm using the following (test) code to dynamically create a Page Content. I'm expecting the Entry control to stay within the StackLayout bounds and clip its large Text value. Somehow this doesn't work like I want.
What am I doing wrong here?
public MyPage() {
InitializeComponent();
var stackMain = new StackLayout() {
Orientation = StackOrientation.Vertical,
Spacing = 2,
BackgroundColor = Color.Yellow
};
Content = stackMain;
Padding = new Thickness(15, Device.OnPlatform(25, 5, 5), 15, 10);
var label = new Label() {
Text = "Test:"
};
stackMain.Children.Add(label);
var stackEntry = new StackLayout() {
Orientation = StackOrientation.Horizontal
};
stackMain.Children.Add(stackEntry);
var entry = new Entry() {
Text = "Blaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
IsEnabled = false,
HorizontalOptions = LayoutOptions.FillAndExpand
};
stackEntry.Children.Add(entry);
var button = new Button() {
Text = "Click me"
};
stackEntry.Children.Add(button);
}

What you need is an editor, Entries are one line only, the code below is tested and it fixes the Height by the size of the text:
public class App : Application
{
public App()
{
// The root page of your application
var content = new ContentPage
{
Padding = new Thickness(15, Device.OnPlatform(25, 5, 5), 15, 10),
Title = "test",
Content = new StackLayout
{
Spacing = 2,
BackgroundColor = Color.Yellow,
Children = {
new Label {
Text = "Test:"
},
new Editor {
Text = "Blaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
IsEnabled = false,
HorizontalOptions = LayoutOptions.Fill,
VerticalOptions = LayoutOptions.Fill
},
}
}
};
MainPage = new NavigationPage(content);
}
}
Hope this helps.

I just solved the same problem on an editor control!
The problem is here Orientation = StackOrientation.Horizontal,
you need to set orientation as StackOrientation.Vertical and it will wrap properly.
Note that I'm using Editor instead of Entry.

How to add TapGestureRecognizer to StackLayout?

So I have this following code:
foreach (var a in abc)
{
var viewCell = new ViewCell
{
View = new StackLayout()
{
//// I want to add TapGestureRecognizer on this outer stacklayout
Padding = new Thickness(20, 0, 20, 0),
HorizontalOptions = LayoutOptions.FillAndExpand,
Children = {
new StackLayout() {
Orientation = StackOrientation.Horizontal,
VerticalOptions = LayoutOptions.CenterAndExpand,
Children = {
new StackLayout() {
HorizontalOptions = LayoutOptions.StartAndExpand,
Children = {
new Label { Text = a.Name}}
},
new StackLayout() {
HorizontalOptions = LayoutOptions.EndAndExpand,
Orientation = StackOrientation.Horizontal,
Children = {
new Label { Text = a.Count},
new Image { Source = "right1.png" }
}
}
}
}
}
}
};
tableSection.Add(viewCell);
}
What this code basically do is repeat the rows(ViewCell) of my TableView depending on the number of objects in the abc. I want to add a tap event on the outer (first Stacklayout) but I can't seem to find out how to do it with my how my ViewCell is set up. Anyone has any idea?

You should create your StackLayout in a variable first and then add a TapGestureRecognizer to it:
foreach (var a in abc)
{
var stackLayout = new StackLayout()
{
//// I want to add TapGestureRecognizer on this outer stacklayout
Padding = new Thickness(20, 0, 20, 0),
HorizontalOptions = LayoutOptions.FillAndExpand,
Children = {
new StackLayout() {
Orientation = StackOrientation.Horizontal,
VerticalOptions = LayoutOptions.CenterAndExpand,
Children = {
new StackLayout() {
HorizontalOptions = LayoutOptions.StartAndExpand,
Children = {
new Label { Text = a.Name}}
},
new StackLayout() {
HorizontalOptions = LayoutOptions.EndAndExpand,
Orientation = StackOrientation.Horizontal,
Children = {
new Label { Text = a.Count},
new Image { Source = "right1.png" }
}
}
}
}
}
};
var tgr = new TapGestureRecognizer();
tgr.Tapped += (s,e) => OnTgrClicked();
stackLayout.GestureRecognizers.Add(tgr);
var viewCell = new ViewCell
{
View = stackLayout;
};
tableSection.Add(viewCell);
}

xamarin.forms scrollview keyboard appears and button also scroll

Hi i have a weird problem.
I defined few labels and textbox for data entry purpose using xamarin.forms.
I wrapped them into scroll view so that when keyboard appears, they should scroll.
It is working fine. The control which has focus scroll to top and the keyboard appears when it get focus. but i also have couple of buttons at the bottom of my form. Now, the problem is, whenever keyboard appears, my bottom buttons are also scrolled. which looks weird. As button are for submit or cancel, it should be stay there in bottom.
following is my code:
var firstNameLabel = new Label { HorizontalOptions = LayoutOptions.Fill };
firstNameLabel.Text = "First Name";
var firstName = new Entry() { HorizontalOptions = LayoutOptions.FillAndExpand };
firstName.SetBinding (Entry.TextProperty,MyViewModel.FirstNamePropertyName);
var lastNameLabel = new Label { HorizontalOptions = LayoutOptions.Fill};
lastNameLabel.Text = "Last Name";
var lastName = new Entry() { HorizontalOptions = LayoutOptions.FillAndExpand };
lastName.SetBinding (Entry.TextProperty, MyViewModel.LastNamePropertyName);
---- other fields
Button btnSubmit = new Button
{
HorizontalOptions = LayoutOptions.Fill,
BackgroundColor = Color.FromHex("#22498a"),
TextColor = Color.White,
Text = "Submit"
};
var cancelButton = new Button { Text = Cancel", BackgroundColor = Color.FromHex("0d9c00"), TextColor = Color.White };
contactUsButton.Clicked += (object sender, EventArgs e) =>
{
// cancel operation
};
var cotrolStakeLayout = new StackLayout () {
Padding = new Thickness(Device.OnPlatform(5, 5, 5),0 , Device.OnPlatform(5, 5, 5), 0), //new Thickness(5,0,5,0),
VerticalOptions = LayoutOptions.FillAndExpand,
HorizontalOptions = LayoutOptions.Fill,
Orientation = StackOrientation.Vertical,
Children = { firstNameLabel, firstName, lastNameLabel, lastName, -- and other fields}
};
var scrollableContentLayout = new ScrollView (){
Content = cotrolStakeLayout,
Orientation = ScrollOrientation.Vertical,
HorizontalOptions = LayoutOptions.Fill,
VerticalOptions = LayoutOptions.Fill
};
var buttonLayout = new StackLayout (){
Padding = new Thickness(Device.OnPlatform(5, 5, 5),0 , Device.OnPlatform(5, 5, 5), 0), //new Thickness(5,0,5,0),
HorizontalOptions = LayoutOptions.Fill,
VerticalOptions = LayoutOptions.Fill,
Orientation = StackOrientation.Vertical,
Children= { btnSubmit , cancelButton }
};
var nameLayout = new StackLayout()
{
HorizontalOptions = LayoutOptions.Fill,
VerticalOptions = LayoutOptions.Fill,
Orientation = StackOrientation.Vertical,
Children = {scrollableContentLayout,buttonLayout}
};
return nameLayout;
Any ideas what is wrong with it?

You have to change your layout to reach your target:
- Define a "Main-StackLayout"
- Create a "Button-StackLayout" for your Buttons (that should stay on top)
- Add your Buttons to the "Button-StackLayout"
- Add the "button-StackLayout to the "Main-StackLayout"
- Add the ScrollView to to "Main-StackLayout"
- Set content of the page to the "Main-StackLayout"
This should work: buttons stays on top, where (only) the ScrollView can be scrolled.