Hello
As you can see in my image, I have Images (As buttons) the buttons are inside an horizontal layout, the width of the buttons is determined by the width of the screen size, since they are 3 the widht = screensize/3.
My concern here is that I have a main stack layout (vertical), but is not filling all my screen, and my buttons look terrible, How can I achieve this?
Here a code snippet
var screenSize = DependencyService.Get<IScreen>();
double width = screenSize.Width;
double height = screenSize.Height;
StackLayout mainStackLayOut = new StackLayout{
BackgroundColor = Color.Blue,
HorizontalOptions = LayoutOptions.FillAndExpand,
Orientation = StackOrientation.Vertical
};
StackLayout buttonsStackLayOut = new StackLayout
{
BackgroundColor = Color.White,
//VerticalOptions = LayoutOptions.Fill,
HorizontalOptions = LayoutOptions.Fill,
Orientation = StackOrientation.Horizontal,
Spacing = 0
};
mainStackLayOut.Children.Add(buttonsStackLayOut);
Image doctorImage = new Image
{
WidthRequest = width / 3,
HeightRequest = 50,
BackgroundColor = Color.Gray,
Source = ImageSource.FromFile ("about.png")
};
buttonsStackLayOut.Children.Add(doctorImage);
Image patientImage = new Image
{
WidthRequest = width / 3,
HeightRequest = 50,
BackgroundColor = Color.Gray,
Source = ImageSource.FromFile("twitternav.png")
};
buttonsStackLayOut.Children.Add(patientImage);
Image sellerImage = new Image
{
WidthRequest = width / 3,
HeightRequest = 50,
BackgroundColor = Color.Gray,
Source = ImageSource.FromFile("refresh.png")
};
sellerImage.GestureRecognizers.Add(profileTapRecognizer);
buttonsStackLayOut.Children.Add(sellerImage);
// Build the page.
this.Content = mainStackLayOut;