Image overtaking entire screen? - image

Question

I have this code to create my page, but for some reason the image os taking the entire page and not displaying any of the other content
here is the picture of what i am getting. the image lays on top of all the other content despite the image being inside of the stacklayout
namespace GarageSale.Views
{
public class abcChapterPage : basePage
{
myDataTypes.abcChapter abc;
StackLayout baseStack;
#region Views
Label lblName = new Label
{
Text = "",
VerticalOptions = LayoutOptions.StartAndExpand,
HorizontalOptions = LayoutOptions.CenterAndExpand
};
Label lblSchool = new Label
{
Text = "",
VerticalOptions = LayoutOptions.StartAndExpand,
HorizontalOptions = LayoutOptions.CenterAndExpand
};
Label lblLocation = new Label
{
Text = "",
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.CenterAndExpand
};
Image profImg = new Image
{
Scale = .1f,
Aspect = Aspect.AspectFit,
};
Button viewItems = new Button
{
Text = " View Items ",
BorderRadius = 0,
//Margin = 0,
HorizontalOptions = LayoutOptions.FillAndExpand,
};
Button viewMembers = new Button
{
Text = "View Members",
BorderRadius = 0,
//Margin = 0,
HorizontalOptions = LayoutOptions.FillAndExpand,
};
#endregion
public abcChapterPage(myDataTypes.abcChapter o)
{
abc = o;
populateProfileFields();
}
public abcChapterPage()
{
shouldGetChapter = true;
abcid = int.Parse(App.CredManager.GetAccountValue("abc_chapter_id"));
}
StackLayout makeGUI()
{
viewItems.Command = new Command(() =>
{
Navigation.PushAsync(new viewListPage(new itemListView(), abc.id, 1, "Items for sale by " + abc.school));
});
viewMembers.Command = new Command(() =>
{
Navigation.PushAsync(new viewListPage(new userListView(), abc.id, 2, " abc Members " + abc.school));
});
#region basestack
return new StackLayout
{
VerticalOptions = LayoutOptions.Fill,
HorizontalOptions = LayoutOptions.Fill,
Children = {
//lblName,
profImg,
lblSchool,
lblLocation,
new StackLayout {
Orientation = StackOrientation.Horizontal,
Padding = 0,
// Margin = 0,
Spacing = 0,
Children = {
viewItems,
viewMembers
}
}
}
};
#endregion
}
public void populateProfileFields()
{
baseStack = makeGUI();
Title = abc.school + " abc";
lblSchool.Text = abc.school;
lblLocation.Text = abc.city +", "+ abc.state;
profImg.Source = ImageSource.FromStream(() => new MemoryStream(abc.picture));
Content = baseStack;
//TODO: do this if user is admin
//if (Constants.AdminUsers.Contains(App.CredManager.GetAccountValue("G_id")) && !adminAlert)
//{
// await Task.Delay(5000);
// DisplayAlert("Admin Notice:", "You are logged in as an administrative user!", "Dismiss");
// adminAlert = true;
//}
}
bool shouldGetChapter = false;
int abcid;
protected async override void OnAppearing()
{
if (shouldGetChapter)
{
abc = await App.MANAGER.YSSI.GetabcChapter(abcid);
populateProfileFields();
}
}
}

Answer 1

Since default TextColor is black like your background Color its not visible.
The reason that image goes center is might be the Scale = .1f, you should remove that.

Answer 2

You may misunderstood the use of Aspect in Xamarin.Forms, the Image control either fills container without keeping aspect ratio, clips the image or letter-boxing it. It doesn't resize itself, the image keeps its aspect ratio.
In your case, your image's container is the entire StackLayout, so the image covers the other controls. If you want to resize the the image, there are many ways, besides changing the image source itself, the most simple ways here should be setting a fixed size to the image control, but if you want to create a adapt layout for most different sizes of device, in this scenario, I suggest to put a Xamarin.Forms.Grid, and set RowDefinitions and ColumnDefinitions for it.