Develop Reference

Xamarin - Image overflowing StackLayout

I am trying to make a gallery style grid view in Xamarin forms for iOS and Android but have an issue where layout options seem to be ignored and I get different results for iOS and Android.
Basic layout is:
frame with a border(red) containing a stack layout (pink) set to FillAndExpand for both horizontal and vertical options which contains a label at the top and an image below set to fill the rest of the stack.
The image seems to just expand outside of the stack and the frame and ignore the vertical options set.
I have tried setting these vertical options to Fill, FillAndExpand, CentreAndExpand but all have the same result.
If i remove the Stack layout and label and have the image as the only child element in the frame then it works as expected but I am required to also show a label.
The result is the same in landscape and portrait orientations.
Results on platform with iOS being the main issue here:
Code for adding an image to the grid:
var imageSource = ImageSource.FromStream(() => new MemoryStream(imageData));
var framedImage = new Frame
{
Padding = 0,
Margin = 3,
GestureRecognizers = { tapGesture },
Content = new StackLayout
{
Padding = 10,
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
BackgroundColor = Color.Pink,
Children =
{
textLabel,
new Image
{
VerticalOptions = LayoutOptions.FillAndExpand,
HorizontalOptions = LayoutOptions.CenterAndExpand,
Source = imageSource,
Aspect = Aspect.AspectFit
},
}
},
BackgroundColor = StyleSheet.BackgroundColorLight,
BorderColor = StyleSheet.OutlineColorDark,
CornerRadius = 5,
HasShadow = false
};
grid.Children.Add(framedImage, columnCounter, rowCounter);
Thanks in advance!

Fixed it by doing this:
var image = new Image
{
VerticalOptions = LayoutOptions.FillAndExpand,
HorizontalOptions = LayoutOptions.FillAndExpand,
Source = imageSource,
Aspect = Aspect.AspectFit
};
var framedImage = new Frame
{
Padding = 2,
Margin = 1,
GestureRecognizers = { tapGesture },
Content = image,
HasShadow = false,
VerticalOptions = LayoutOptions.FillAndExpand,
HorizontalOptions = LayoutOptions.FillAndExpand
};
var innergrid = new Grid
{
RowDefinitions =
{
new RowDefinition {Height = new GridLength(20, GridUnitType.Auto)},
new RowDefinition {Height = new GridLength(20, GridUnitType.Star)},
}
};
innergrid.Children.Add(textLabel, 0, 0);
innergrid.Children.Add(framedImage, 0, 1);
var frame = new Frame
{
Padding = 5,
Margin = 3,
GestureRecognizers = { tapGesture },
Content = innergrid,
BackgroundColor = StyleSheet.BackgroundColorLight,
BorderColor = StyleSheet.OutlineColorDark,
CornerRadius = 5,
HasShadow = true
};
grid.Children.Add(frame, columnCounter, rowCounter);
I might have a go with the new FlexLayout to see if i can have simpler code

Xamarin forms RelativeLayout not appearing

I am following some pretty standard Xamarin forms tutorials and I am really struggling to get the RelativeLayout to work. Ultimately I want to have an ActivityIndicator overlaid on top of the mainContent:
BindingContext = new LoginViewModel(this);
Padding = new Thickness(20);
Title = "Login";
var image = new Image
{
Source = ImageSource.FromFile("logo.png"),
HeightRequest = 50
};
var label = new Label
{
Text = "...",
FontSize = 20,
HorizontalTextAlignment = TextAlignment.Center
};
var errorLabel = new Label
{
Text = "",
TextColor = Color.Red,
FontSize = 20,
HorizontalTextAlignment = TextAlignment.Center
};
var loginButton = new Button
{
Text = "Log In",
BackgroundColor = Color.Black,
TextColor = Color.White,
FontSize = 20,
HeightRequest = 50
};
var loginEntry = new Entry
{
Placeholder = "Username"
};
var passwordEntry = new Entry
{
Placeholder = "Password"
};
var copywrite = new Label
{
Text = "© 2016",
FontSize = 15,
HorizontalTextAlignment = TextAlignment.Center
};
var loadingIndicator = new ActivityIndicator
{
BackgroundColor = Color.Blue,
IsVisible = true
};
...
var topLayer = new StackLayout
{
Spacing = 10,
Children = { image, label, loginEntry, passwordEntry, loginButton, errorLabel },
VerticalOptions = LayoutOptions.Start
};
var bottomLayer = new StackLayout
{
Spacing = 10,
Children = { copywrite },
VerticalOptions = LayoutOptions.End
};
var mainContent = new StackLayout
{
Children =
{
topLayer,
new StackLayout
{
VerticalOptions = LayoutOptions.CenterAndExpand,
},
bottomLayer
},
VerticalOptions = LayoutOptions.FillAndExpand,
BackgroundColor = Color.Green
};
var r = new RelativeLayout()
{
BackgroundColor = Color.Pink
};
r.Children.Add(mainContent,
Constraint.RelativeToParent((parent) =>
{
return parent.Width;
}),
Constraint.RelativeToParent((parent) =>
{
return parent.Height;
})
);
Content = r;
When I set Content = mainContent I see everything fine, but with the above code I get a white screen. I have been looking here.
When I try this:
var overlay = new AbsoluteLayout()
{
BackgroundColor = Color.Pink
};
AbsoluteLayout.SetLayoutFlags(mainContent, AbsoluteLayoutFlags.PositionProportional);
AbsoluteLayout.SetLayoutBounds(mainContent, new Rectangle(0f, 0f, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));
AbsoluteLayout.SetLayoutFlags(loadingIndicator, AbsoluteLayoutFlags.PositionProportional);
AbsoluteLayout.SetLayoutBounds(loadingIndicator, new Rectangle(0.5, 0.5, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));
overlay.Children.Add(mainContent);
overlay.Children.Add(loadingIndicator);
Content = overlay;
I can see the Green and Pink views, but they may as well be stacked (as opposed to being overlaid) - but also I cannot see the Activity Indicator inside the Pink Absolute layout.

For the RelativeLayout, the Add method you are calling is setting a constraint on X and Y, not on width and height. The order of the parameters for that variant of Add is:
Child View
X constraint
Y constraint
Width constraint
Height constraint
With all constraints being optional.
To explicitly place it over the entire screen, do something like this:
r.Children.Add(mainContent,
Constraint.Constant(0),
Constraint.Constant(0),
Constraint.RelativeToParent((parent) =>
{
return parent.Width;
}),
Constraint.RelativeToParent((parent) =>
{
return parent.Height;
})
);
For the AbsoluteLayout, try a slightly different set of constraints:
AbsoluteLayout.SetLayoutFlags(mainContent, AbsoluteLayoutFlags.All);
AbsoluteLayout.SetLayoutBounds(mainContent, new Rectangle(0f, 0f, 1f, 1f));
This explicitly specifies that mainContent is to occupy the entire AbsoluteLayout rather than relying on the actual layout size of mainContent.

How to implement method of sub item of DataTemplate of ListView in Xamarin.Forms

I have ListView and I assigned DataTemplate to it. Now I have some controls in it like Button, Images and Labels. Now I want some actions on click event of that controls.
My ListView is like this-
listof_ingredients_and_lifestyleDiets = new ListView
{
BackgroundColor = Color.FromHex ("#CDBA96"),
ItemTemplate = preferenceTableCell,
SeparatorColor =Color.FromHex("#CDBA96"),
RowHeight=40,
HeightRequest=200
};
My DataTemplate is like this-
DataTemplate preferenceTableCell = new DataTemplate (() => {
var itemName = new Label {
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center,
WidthRequest=80,
FontSize=14,
TextColor=ColorResources.TextColor,
};
itemName.SetBinding (Label.TextProperty, "Name");
var radiobtn_allergen = new CircleImage {
BorderColor = ColorResources.commonButtonBackgroundColor,
HeightRequest = 25,
WidthRequest = 25,
Aspect = Aspect.AspectFill,
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center,
Source="radio_Check.png"
};
radiobtn_allergen.SetBinding(CircleImage.IsVisibleProperty,"isExcluded");
var radiobtn_preference = new CircleImage {
BorderColor = ColorResources.commonButtonBackgroundColor,
HeightRequest = 25,
WidthRequest = 25,
Aspect = Aspect.AspectFill,
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center,
Source="radio_uncheck.png",
};radiobtn_preference.SetBinding (CircleImage.IsVisibleProperty, "isExcluded");
var btnDelete=new Button{
Image="deleteBtn.png",
HorizontalOptions=LayoutOptions.EndAndExpand,
HeightRequest=50,
WidthRequest=30
};
StackLayout stacklayout = new StackLayout {
Spacing = 60,
Orientation = StackOrientation.Horizontal,
HorizontalOptions = LayoutOptions.FillAndExpand,
Children = { itemName,radiobtn_allergen,radiobtn_preference,btnDelete }
};
return new ViewCell { View = stacklayout };
});
Now My question is, I want implement tap gesture for image tap and button click event for button control. How to do this?

Click handler for a button
btnDelete.Clicked += ((sender, args) => {
// perform actions here
});
attach a gesture recognizer to an Image
TapGestureRecognizer tapped = new TapGestureRecognizer();
tapped.Tapped += ((o2, e2) =>
{
// perform actions here
});
img.GestureRecognizers.Add(tapped);

Button on top of the Scrollview does not show up

I have something like this so far for my view:
public StackLayout OffersSlideViewCarouselChild(Offer offer)
{
Image productImage = new Image
{
Source = ImageSource.FromUri(new Uri(offer.Image.Replace("https://", "http://"))),
HeightRequest = 270,
WidthRequest = 270,
Aspect = Aspect.AspectFit
};
var topStackLayout = new StackLayout
{
Spacing = 0
};
topStackLayout.Children.Add(productImage);
StackLayout contentStackLayout = new StackLayout
{
Spacing = 0,
Padding = new Thickness(5, 10, 5, 10),
Orientation = StackOrientation.Vertical
};
var savedBtn = SavedButtonLayout(offer.IsSelected, offer.Id);
var redeemBtn = RedeemBtnLayout(offer.Id);
var timeRemainingLabel = TimeRemainingLayout(offer, offer.Id);
contentStackLayout.Children.Add(new UILabel(16) {
Text = offer.ProductName,
TextColor = ColorHelper.FromHex(CoreTheme.COLOR_OFFERCELL_PRODUCT_TEXT),
FontFamily = CoreTheme.FONT_FAMILY_DEFAULT_BOLD,
WidthRequest = DeviceDisplaySettings.defaultwidth,
VerticalTextAlignment = TextAlignment.Center
});
contentStackLayout.Children.Add(new UILabel(14)
{
Text = offer.Headline,
TextColor = ColorHelper.FromHex(CoreTheme.COLOR_OFFERCELL_PRODUCT_TEXT),
FontFamily = CoreTheme.FONT_FAMILY_DEFAULT_BOLD,
WidthRequest = DeviceDisplaySettings.defaultwidth,
VerticalTextAlignment = TextAlignment.Center
});
contentStackLayout.Children.Add(new UILabel(14) {
Text = offer.LongRewardsMessage,
TextColor = ColorHelper.FromHex(CoreTheme.COLOR_DEAL_PAGE_LONG_REWARD_MESSAGE_RED),
FontFamily = CoreTheme.FONT_FAMILY_DEFAULT_BOLD,
WidthRequest = DeviceDisplaySettings.defaultwidth,
VerticalTextAlignment = TextAlignment.Center
});
if (!string.IsNullOrEmpty(offer.PowerMessage)) {
var htmlText = string.Format("<html><body style='color:#9b9b9b'>{0}</body></html>", offer.PowerMessage.Replace(#"\", string.Empty));
var browser = new WebView() {
//HeightRequest = (DeviceDisplaySettings.defaultheight > 600) ? 500 : 400,
HeightRequest = 800,
Source = new HtmlWebViewSource() { Html = htmlText },
};
browser.Navigating += OnNavigating;
contentStackLayout.Children.Add(browser);
}
var nestedStackLayout = new StackLayout()
{
VerticalOptions = LayoutOptions.FillAndExpand
};
nestedStackLayout.Children.Add(topStackLayout);
nestedStackLayout.Children.Add(timeRemainingLabel);
nestedStackLayout.Children.Add(contentStackLayout);
var mainScrollView = new ScrollView()
{
Padding = new Thickness(0, 0, 0, 10),
VerticalOptions = LayoutOptions.FillAndExpand,
Orientation = ScrollOrientation.Vertical,
Content = nestedStackLayout
};
var mainStackLayout = new StackLayout()
{
Spacing = 5,
Padding = new Thickness(0, 0, 0, 0),
VerticalOptions = LayoutOptions.Fill,
HorizontalOptions = LayoutOptions.Fill,
Orientation = StackOrientation.Vertical,
Children = { savedBtn, mainScrollView, redeemBtn }
};
return mainStackLayout;
}
private StackLayout SavedButtonLayout(bool isSelected, int offerid)
{
int buttonsToShow = 2;
bool displaySaveButton = true;
if (IsPremisesOffer (offerid)) {
buttonsToShow = 3;
displaySaveButton = false;
}
btnShare = new UIFieldDefinition(_pageFieldDefinition.ShareButtonDefinition);
btnShare.Text = "SHARE";
btnShare.ClassId = offerid.ToString();
btnShare.WidthRequest = (DeviceDisplaySettings.defaultwidth / buttonsToShow) - 40;
btnShare.BackgroundColor = Color.FromRgb(167, 188, 33);
btnShare.VerticalContentAlignment = TextAlignment.Center;
btnShare.HandleClick(btnShare_Clicked);
btnSave = new UIFieldDefinition(_pageFieldDefinition.SaveButtonDefinition);
btnSave.Text = isSelected ? "UNSAVE" : "SAVE";
btnSave.ClassId = offerid.ToString();
btnSave.WidthRequest = (DeviceDisplaySettings.defaultwidth / buttonsToShow) - 40;
btnSave.BackgroundColor = Color.FromRgb(167, 188, 33);
btnSave.VerticalContentAlignment = TextAlignment.Center;
btnSave.HandleClick(btnSave_Clicked);
rl = new StackLayout {
Spacing = 10,
Orientation = StackOrientation.Horizontal,
BackgroundColor = Color.FromRgb(196, 221, 57),
Padding = new Thickness(40, 5, 5, 5),
WidthRequest = DeviceDisplaySettings.defaultwidth
};
rl.Children.Add(btnShare);
if (displaySaveButton) rl.Children.Add(btnSave);
return rl;
}
public UIFieldDefinition RedeemBtnLayout(int offerid)
{
int buttonsToShow = 1;
btnRedeem = new UIFieldDefinition(_pageFieldDefinition.RedeemButtonDefinition);
btnRedeem.Text = "REDEEM NOW";
btnRedeem.ClassId = offerid.ToString();
btnRedeem.WidthRequest = (DeviceDisplaySettings.defaultwidth / buttonsToShow) - 10;
// btnRedeem.HorizontalOptions = LayoutOptions.FillAndExpand;
// btnRedeem.VerticalOptions = LayoutOptions.EndAndExpand;
btnRedeem.HandleClick(btnRedeem_Clicked);
return btnRedeem;
}
However, I am noticing that the Redeem button does not even display on the view (It's supposed to be fixed on the bottom).
The scrollview works but the buttom is missing. Why?
Please let me know if you need further code details.

Moving here from comments above. There are two separate issues from what I can tell, and as far as I can tell, are unrelated:
The WebView, nested inside the ScrollView, is not big enough to fully display the content.
The button that is supposed to be at the bottom of the screen is not displaying.
For both of them, the answer is probably in how you are setting HeightRequest. There have been a lot of suggestions by myself and other commenters to change or get rid of some of the HeightRequest settings, and I'm not sure of the current state of your source code. So assuming those are still there:
For solving the WebView issue, read How can I add HTML to a Stacklayout inside a Scrollview in Xamarin forms?. This will let you figure out the right HeightRequest to use. The short answer is that depending on exactly what you want to happen, you may need a custom renderer. Note that the HeightRequest for the WebView will not affect any layout outside of the ScrollView.
For solving the issue of the button not appearing, get rid of the HeightRequest setting on the ScrollView, and the VerticalOptions on the StackLayout created in SavedButtonLayout.
I am assuming you did the experiment suggested above to make sure that the redeemBtn will render if placed before the ScrollView, and it does show up then. If not, you first need to fix that.

If you have "fixed" this by changing the HeightRequest then your real problem is the fixed pixel size of all your views and layouts, I recommend you DON'T use fixed pixel sizes for different screen resolution this will be a bigger problem later, What you can do is get the Screen size and do the math to fit all your elements of the view, one way to get the width and height of the screen is on the OnSizeChanged event of Pages (Like ContentPage), something like this:
SizeChanged += SizeChanged;
void SizeChanged (object sender, EventArgs e)
{
Layout.WidthRequest = Width * 0.3;
Layout.HeightRequest = Height * 0.35;
}

Your layout is pretty busy. A few things:
Set VerticalOptions to EndAndExpand for redeemBtn.
Set VerticalOptions to StartAndExpand for savedBtn.
Set VerticalOptions to Fill for mainScrollView.
Set VerticalOptions to FillAndExpand for mainRelLayout.
Set VerticalOptions and HorizontalOptions to Fill for
mainStackLayout.
I think that will get you to where you want to be.
The options that include "Expand" will grow the element to accommodate the desired height of its contents.

XamarinForms RelativeLayout: Can't get relative layout to resize correctly in a row

Here is my issue:
The red block is meant to be the avatar for the person sometime, and the blue balloon a chat message. The chat message object is a RelativeLayout with a Label and an Image positioned one of top of each other, but not matter what I do, I can't get it to be centered. I only have one View:
using System;
using System.Collections.Generic;
using Xamarin.Forms;
namespace TestChat
{
public partial class ChatPage : ContentPage
{
public ChatPage ()
{
this.Title = "Chat page";
InitializeComponent ();
}
void OnChatClick (object sender, EventArgs args) {
Image pic = new Image {
Source = "bubble.png",
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
Aspect = Aspect.Fill
};
Label textLabel = new Label {
Text = "Hello",
TextColor = Color.White,
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.EndAndExpand
};
Frame picFrame = new Frame {
HasShadow = false,
BackgroundColor = Color.Red,
Padding = new Thickness (0),
Content = pic
};
Frame textFrame = new Frame {
HasShadow = false,
BackgroundColor = Color.Transparent,
Padding = new Thickness (0,0,15,0),
Content = textLabel
};
RelativeLayout overlayLayout = new RelativeLayout { BackgroundColor = Color.Blue, HorizontalOptions = LayoutOptions.FillAndExpand, VerticalOptions = LayoutOptions.FillAndExpand };
overlayLayout.Children.Add (picFrame,
xConstraint: Constraint.RelativeToParent((parent) => parent.X),
yConstraint: Constraint.RelativeToParent((parent) => parent.Y),
widthConstraint: Constraint.RelativeToParent((parent) => parent.Width-2),
heightConstraint: Constraint.RelativeToParent((parent) => parent.Height-2)
);
overlayLayout.Children.Add (textFrame,
xConstraint: Constraint.RelativeToParent((parent) => parent.X),
yConstraint: Constraint.RelativeToParent((parent) => parent.Y),
widthConstraint: Constraint.RelativeToParent((parent) => parent.Width-2),
heightConstraint: Constraint.RelativeToParent((parent) => parent.Height-2)
);
Frame overlayContainerFrame = new Frame {
HasShadow = false,
BackgroundColor = Color.Red,
Padding = new Thickness(1),
HeightRequest = 100,
HorizontalOptions = LayoutOptions.CenterAndExpand,
Content = overlayLayout
};
StackLayout horizontalLayout = new StackLayout {
Orientation = StackOrientation.Horizontal
};
BoxView avatarImage = new BoxView {
Color = Color.Red,
HeightRequest = 50,
WidthRequest = 50
};
horizontalLayout.Children.Add (avatarImage);
horizontalLayout.Children.Add (overlayContainerFrame);
ChatScrollViewStackLayout.Children.Add (horizontalLayout);
//ChatStackLayout.Children.Add (pic);
}
void CreateChatBubble() {
}
}
}
Does anyone have any ideas why I can't get the relative layout to resize accordingly so it doesn't go out of range of the screen? I tried setting its WidthConstraint to parent.With-52 to make up for the avatar taking up 50 units horizontally, but instead I get this:
I've been stuck at this for at least 8 hours now, and I'm pretty much out of ideas. Any tips would be greatly appreciated. Here is the project's git repo so you can clone it if you would like to test anything:
https://github.com/sgarcia-dev/xamarin-chat.git
Any help would be greatly appreciated, and feel free to completely ignore my code if it looks messy if you can replicate what I want. (One image on the left, and a message bubble on the right with an underlying image background)

Check out this implementation
void OnChatClick (object sender, EventArgs args) {
var pic = new Image {
Source = "bubble.png",
Aspect = Aspect.Fill
};
var textLabel = new Label {
Text = "Hello",
TextColor = Color.White,
VerticalOptions = LayoutOptions.Center,
LineBreakMode = LineBreakMode.WordWrap
};
var relativeLayout = new RelativeLayout {
BackgroundColor = Color.Navy,
// HeightRequest = 1000
};
var absoluteLayout = new AbsoluteLayout {
VerticalOptions = LayoutOptions.Center,
BackgroundColor = Color.Blue
};
var frame = new Frame {
BackgroundColor = Color.Red
};
absoluteLayout.Children.Add (pic,
new Rectangle (0, 0, 1, 1),
AbsoluteLayoutFlags.All);
absoluteLayout.Children.Add (textLabel,
new Rectangle (0.5, 0.5, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize),
AbsoluteLayoutFlags.PositionProportional);
// textLabel.SizeChanged += (object label, EventArgs e) => {
// relativeLayout.HeightRequest = textLabel.Height + 30;
// absoluteLayout.HeightRequest = textLabel.Height + 30;
// };
relativeLayout.Children.Add (frame,
heightConstraint: Constraint.RelativeToParent (parent => parent.Height),
widthConstraint: Constraint.RelativeToParent (parent => parent.Width * 0.3));
relativeLayout.Children.Add (absoluteLayout,
xConstraint: Constraint.RelativeToParent (parent => parent.Width * 0.3),
widthConstraint: Constraint.RelativeToParent (parent => parent.Width * 0.7));
ChatScrollViewStackLayout.Children.Add (relativeLayout);
}
If you need to auto-adjust height of the chat message for long text uncomment all five commented lines.