Hello there! I'm quite new to Xamarin, yet I highly enjoy it to use and build an app myself. However, I've stumbled across a problem I can't solve, which is related to the FillAndExpand VerticalOption. This is the relevant XAML code I'm using (stripped down):
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="HexGridEdit2.Views.Main"
NavigationPage.HasNavigationBar="False"
BackgroundImageSource="Achtergrond.png">
<StackLayout BackgroundColor="Transparent">
<ContentView Margin="20,0,20,0">
<Button HorizontalOptions="End" Text="Save" />
</ContentView>
<Frame Padding="1.5" BorderColor="DarkSlateGray" Margin="20,0,20,10" VerticalOptions="FillAndExpand"
BackgroundColor="LightGray">
<RelativeLayout IsClippedToBounds="True" BackgroundColor="Aqua" x:Name="MainGrid" />
</Frame>
<Grid Margin="20,0,20,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<some other elements>
</Grid>
<!-- Navigation bar (custom) -->
<ContentView HorizontalOptions="Fill" VerticalOptions="End">
<RelativeLayout HorizontalOptions="Fill">
<Image Source="Main_buttons.png" />
</RelativeLayout>
</ContentView>
</StackLayout>
</ContentPage>
Here, the problem is within the Frame. Without any content, it works like a charm, and does what it should do. However, now I'm adding children via the main class in the C# code, using something like this:
public Main()
{
InitializeComponent();
// Setup custom menu bar height
// This is not done automatically, as it's a RelativeLayout
var mainDisplayInfo = DeviceDisplay.MainDisplayInfo;
var xamarinWidth = mainDisplayInfo.Width / mainDisplayInfo.Density;
CustomNavigationBar.HeightRequest = xamarinWidth / 2254 * 391;
// Fill some hexagons :)
var center = new Coords(TILE_SIZE, TILE_SIZE);
var path = new PointCollection();
for (var j = 0; j < 6; j++)
{
var newCoord = HexagonCorner(center, TILE_SIZE, j);
path.Add(new Point(newCoord.X, newCoord.Y));
}
for (var r = 0; r < 10; r++)
{
for (var c = 0; c < 12; c++)
{
Random rnd = new Random();
SolidColorBrush brush =
new SolidColorBrush(
Color.FromRgb(
(byte)rnd.Next(255),
(byte)rnd.Next (255),
(byte)rnd.Next (255)
)
);
var polygon = new Polygon
{
Points = path,
Fill = brush,
Stroke = Brush.DarkGray,
StrokeThickness = 1,
};
var x = -TILE_SIZE + TILE_SIZE * Math.Sqrt(3) * c;
if (r % 2 == 1)
{
x += TILE_SIZE / 2 * Math.Sqrt(3);
}
MainGrid.Children.Add(polygon, Constraint.Constant(x), Constraint.Constant(-TILE_SIZE + TILE_SIZE * 1.5 * r));
}
}
}
It still works when r loops from 0 to 9, but when it loops from 0 to, say, 20, the frame gets expanded and expanded, and you won't see the bottom elements anymore. Is there any way to prevent this happening? So, on initial load, set the height as much as possible, and then add the children (polygons) without worrying it will overflow?
Here are 2 example pictures to help: https://imgur.com/a/Wx09fk7. The top one shows what it should look like, but with more hexagons. And the bottom one how it currently looks like (20 rows).
Thanks in advance!