Custom Panels

'First measure all children and return available size of panel 
Protected Overloads Overrides Function MeasureOverride(ByVal availableSize As Size) As Size

    'Measure first 9 children giving them space up to 100x100, remaining children get 0x0 
    Dim i As Integer = 0
    For Each child As FrameworkElement In Children
        If i < 9 Then
            child.Measure(New Size(100, 100))
        Else
            child.Measure(New Size(0, 0))
        End If

        i += 1
    Next


    'return the size available to the whole panel, which is 300x300 
    Return New Size(300, 300)
End Function

// First measure all children and return available size of panel
protected override Size MeasureOverride(Size availableSize)
{

    // Measure first 9 children giving them space up to 100x100, remaining children get 0x0 
    int i =0;
    foreach (FrameworkElement child in Children)
    {
        if (i < 9)
        {
            child.Measure(new Size(100, 100));
        }
        else
        {
            child.Measure(new Size(0, 0));
        }

        i++;
    }


    // return the size available to the whole panel, which is 300x300
    return new Size(300,300);
}

'Second arrange all children and return final size of panel 
Protected Overloads Overrides Function ArrangeOverride(ByVal finalSize As Size) As Size
    'Get the collection of children 
    Dim mychildren As UIElementCollection = Children

    'Get total number of children 
    Dim count As Integer = mychildren.Count

    'Arrange children 
    'We're only allowing 9 children in this panel. More children will get a 0x0 layout slot. 
    Dim i As Integer
    For i = 0 To 8

        'Get (left, top) origin point for the element in the 3x3 block 
        Dim cellOrigin As Point = GetOrigin(i, 3, New Size(100, 100))

        'Arrange child 
        'Get desired height and width. This will not be larger than 100x100 as set in MeasureOverride. 
        Dim dw As Double = mychildren(i).DesiredSize.Width
        Dim dh As Double = mychildren(i).DesiredSize.Height


        mychildren(i).Arrange(New Rect(cellOrigin.X, cellOrigin.Y, dw, dh))
    Next
    For i = 9 To count - 1

        'Give the remaining children a 0x0 layout slot 
        mychildren(i).Arrange(New Rect(0, 0, 0, 0))
    Next


    'Return final size of the panel 
    Return New Size(300, 300)
End Function

'Calculate point origin of the Block you are in 
Protected Function GetOrigin(ByVal blockNum As Integer, ByVal blocksPerRow As Integer, ByVal itemSize As Size) As Point
    'Get row number (zero-based) 
    Dim row As Integer = CInt(Math.Floor(blockNum / blocksPerRow))

    'Get column number (zero-based) 
    Dim column As Integer = blockNum - blocksPerRow * row

    'Calculate origin 
    Dim origin As New Point(itemSize.Width * column, itemSize.Height * row)
    Return origin

End Function

// Second arrange all children and return final size of panel
protected override Size ArrangeOverride(Size finalSize)
{
    // Get the collection of children
    UIElementCollection mychildren = Children;

    // Get total number of children
    int count = mychildren.Count;

    // Arrange children
    // We're only allowing 9 children in this panel.  More children will get a 0x0 layout slot.
    int i;
    for (i = 0; i < 9; i++)
    {

        // Get (left, top) origin point for the element in the 3x3 block
        Point cellOrigin = GetOrigin(i, 3, new Size(100, 100));

        // Arrange child
        // Get desired height and width. This will not be larger than 100x100 as set in MeasureOverride.
        double dw = mychildren[i].DesiredSize.Width;
        double dh = mychildren[i].DesiredSize.Height;

        mychildren[i].Arrange(new Rect(cellOrigin.X, cellOrigin.Y, dw, dh));

    }

    // Give the remaining children a 0x0 layout slot
    for (i = 9; i < count; i++)
    {
        mychildren[i].Arrange(new Rect(0, 0, 0, 0));
    }


    // Return final size of the panel
    return new Size(300, 300);
}

// Calculate point origin of the Block you are in
protected Point GetOrigin(int blockNum, int blocksPerRow, Size itemSize)
{
    // Get row number (zero-based)
    int row = (int)Math.Floor(blockNum / blocksPerRow);

    // Get column number (zero-based)
    int column = blockNum - blocksPerRow * row;

    // Calculate origin
    Point origin = new Point(itemSize.Width * column, itemSize.Height * row);
    return origin;

}

 <UserControl x:Class="BlockPanel.Page"
 xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
 xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" 
 xmlns:my="clr-namespace:BlockPanel;assembly=BlockPanel"
>

<Grid x:Name="LayoutRoot" Background="Black">

    <my:BlockPanel Background="Black" HorizontalAlignment="Left" VerticalAlignment="Top" >
        <Rectangle Fill="Red" Height="500" Width="500" Margin="2"/>
        <Rectangle Fill="Salmon" Height="500" Width="500" Margin="2"/>
        <Rectangle Fill="Orange" Height="500" Width="500" Margin="2"/>
        <Rectangle Fill="Yellow" Height="500" Width="500" Margin="2"/>
        <Rectangle Fill="Lime" Height="500" Width="500" Margin="2"/>
        <Rectangle Fill="Green" Height="500" Width="500" Margin="2"/>
        <Rectangle Fill="Turquoise" Height="500" Width="500" Margin="2"/>
        <Rectangle Fill="Blue" Height="500" Width="500" Margin="2"/>
        <Rectangle Fill="Purple" Height="500" Width="500" Margin="2"/>
        <TextBlock Text="This Text Does Not Appear"/>
    </my:BlockPanel>

</Grid>