How to create an array of stacked 'VisualElements' in Xamarin.Forms C# Code Behind?

Question

I need to keep track of 20 "Tiles" that's being created in Xamarin.Forms xaml like this:

<AbsoluteLayout x:Name="tileBoardAbsoluteLayout">

    <!-- Second Tile -->
    <Grid x:Name="tileGrid[0]" AbsoluteLayout.LayoutBounds = ".20, .25, 0.2, 0.33" AbsoluteLayout.LayoutFlags = "All">
        <Frame x:Name=tileOuterFrame" BorderColor="#777777" CornerRadius="8" HasShadow="True" Padding="2" BackgroundColor="#777777">
            <Frame x:Name=tileInnerFrame" BorderColor="#FFDEAD" CornerRadius="7" HasShadow="False" Padding="0" BackgroundColor="#E57407" IsClippedToBounds="True">
                <AbsoluteLayout x:Name="tileImageAbsoluteLayout">
                    <Image x:Name="tileImage" Source="{local:ImageResource Resources.Logo.png}" AbsoluteLayout.LayoutBounds = "0, 0, 4.18, 5.24" AbsoluteLayout.LayoutFlags="All" Aspect="Fill" />
                </AbsoluteLayout>
            </Frame>
        </Frame>
    </Grid>

    <!-- Second Tile -->
    <Grid x:Name="tileGrid[1]" AbsoluteLayout.LayoutBounds = ".40, .25, 0.2, 0.33" AbsoluteLayout.LayoutFlags = "All">
    ....

The easiest would be if I can access them as an array i.e. tileGrid[] (an array of 20 Grids).

How can I create an array like this in Xamarin.Forms xaml or in Xamarin.Forms C# code behind?

Answer 1

create a custom ContentView for your tile

then in code

List<CustomTile> tileGrid = new List<CustomTile>();

for (int ndx = 0; ndx < 20; ndx++)
{
  var tile = new CustomTile() { ... };

  // add them to the visual grid
  myGrid.Children.Add(tile,col,row);

  // also add to your grid list
  tileGrid.Add(tile);

}

Answer 2

I managed to get it to work using C# code behind.

But I still think it would have being easier to read if it was possible to create arrays using xaml instead of C# code behind.

The solution is to add the following code after InitializeComponent(); in your Main Page.

Grid[] tileGrid = new Grid[20];
Frame[] tileOuterFrame = new Frame[20];
Frame[] tileInnerFrame = new Frame[20];
AbsoluteLayout[] tileImageAbsoluteLayout = new AbsoluteLayout[20];
Image[] tileImage = new Image[20];

for (int i = 0; i < 20; i++)
{
    // <Image> tileImage
    tileImage[i] = new Image()
    {
        Source = ImageSource.FromResource("Resources.Logo.png"),
        Aspect = Aspect.Fill
    };
    AbsoluteLayout.SetLayoutBounds(tileImage[i], new Rectangle(0 + .3333 * (i % 4), 0 + .25 * (i / 4), 4.18, 5.24));
    AbsoluteLayout.SetLayoutFlags(tileImage[i], AbsoluteLayoutFlags.All);

    // <AbsoluteLayout> tileImageAbsoluteLayout
    tileImageAbsoluteLayout[i] = new AbsoluteLayout();
    tileImageAbsoluteLayout[i].Children.Add(tileImage[i]);

    // <Frame> tileInnerFrame
    tileInnerFrame[i] = new Frame()
    {
        BorderColor = Color.FromHex("#FFDEAD"),
        CornerRadius = 7f,
        HasShadow = false,
        Padding = new Thickness(0),
        BackgroundColor = Color.FromHex("#E57407"),
        IsClippedToBounds = true
    };
    tileInnerFrame[i].Content = tileImageAbsoluteLayout[i];

    // <Frame> tileOuterFrame
    tileOuterFrame[i] = new Frame()
    {
        BorderColor = Color.FromHex("#777777"),
        CornerRadius = 8f,
        HasShadow = true,
        Padding = new Thickness(2),
        BackgroundColor = Color.FromHex("#777777")
    };
    tileOuterFrame[i].Content = tileInnerFrame[i];

    // <Grid> tileGrid
    tileGrid[i] = new Grid();
    AbsoluteLayout.SetLayoutBounds(tileGrid[i], new Rectangle(.20 + .15 * (i % 4), .25 + .10 * (i / 4), 0.2, 0.33));
    AbsoluteLayout.SetLayoutFlags(tileGrid[i], AbsoluteLayoutFlags.All);
    tileGrid[i].Children.Add(tileOuterFrame[i]);

    // <AbsoluteLayout> tileBoardAbsoluteLayout from xaml
    tileBoardAbsoluteLayout.Children.Add(tileGrid[i]);
}