Unplanned
Last Updated: 22 Jul 2025 06:07 by ADMIN

Ran into this issue - which seems to be dependent on how the content gets rendered, so it will fail 100% of the time on specific configurations, resulting in unusable applications.

I've found this issue on Android but there's no telling if the issue is cross platform - as it may depend on item sizings and layout, it may also be reproducible on other platforms, I just haven't hit it yet. The device you run it on may also influence the result, as different resolutions and scalings will impact how items are rendered on screen. I've reproduced this on a Pixel 7 (real device), Samsung A21s (real device) and Pixel 7 Pro (emulator).

Repro steps

  1. Create a new maui sample app, with the relevant Telerik components/initialisation.
  2. Add the xaml and code shown below to the MainPage.
  3. Run the application
  4. OBSERVE
    1. ArgumentOutOfRangeException will be thrown in RadWrapLayoutManager.ArrangeChildren
  5. Stop the app. Comment out the last item being added to the wrap layout and run the app again.
  6. OBSERVE
    1. It will run fine.

MainPage.xaml - use this as the page content:

    <ScrollView Padding="15,0,15,15">
        <VerticalStackLayout Spacing="25">
            <telerik:RadWrapLayout
                x:Name="BrokenLayout"
                Margin="-5"
                SizeChanged="BrokenLayout_SizeChanged"
                StretchLastChild="False">
                <BindableLayout.ItemTemplate>
                    <DataTemplate>
                        <Grid
                            Margin="3.75"
                            Padding="3.75"
                            BackgroundColor="LightGreen">
                            <Label
                                FontAttributes="Bold"
                                FontSize="11"
                                LineBreakMode="TailTruncation"
                                MaxLines="2"
                                Text="{Binding}"
                                VerticalOptions="End" />
                        </Grid>
                    </DataTemplate>
                </BindableLayout.ItemTemplate>
            </telerik:RadWrapLayout>
        </VerticalStackLayout>
    </ScrollView>

MainPage.xaml.cs code

    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            List<string> items = new List<string>();

            items.Add("TSONE");
            items.Add("N ANCETOIDO");
            items.Add("ADDKNEDEGO LW");
            items.Add("A EFCTTLIAH");
            items.Add("OHACP HTATTO");
            items.Add("AASESII NAYXB/RFKL");
            items.Add("EMIQULENOCE PTCTL");
            items.Add("SCNSTUGRRIOEMA TEU");
            items.Add("EPEENSX");
            items.Add("BRUXEROL TAA");
            items.Add("TVLRETAAX ER");
            items.Add("SMA SELISD");
            items.Add("NIAEGOEEATIRUPR SVT");
            items.Add("CTPLRCELT AO");
            items.Add("REAREPTIRDQ U");
            items.Add("ASEDP TUR");
            items.Add("CJTEUT ORPDEAP");
            items.Add(" CECCRNTARODTO");
            items.Add("- FLEOUTEQRUOPWSL");
            items.Add("PINTRNMEU REEQTU");
            items.Add("RE LWSRANKOGIO TNT");
            items.Add("KAREBTA KE");
            items.Add("ITTANIW MIEG"); // comment out this one and it'll run fine. keep it and it'll fail.

            BindableLayout.SetItemsSource(this.BrokenLayout, items);
        }

        private double _width = 0;
        private double minItemWidth = 110.0;
        private double maxItemWidth = 160.0;

        private void BrokenLayout_SizeChanged(object sender, EventArgs e)
        {
            if (sender is RadWrapLayout wl
                && wl.Width > 0 
                && (int)Math.Floor(wl.Width) is int widthInt
                && widthInt != this._width)
            {
                this._width = widthInt;

                double? candidateItemWidth = null;
                var itemCount = wl.Children.Count;

                if (itemCount > 0 && itemCount * maxItemWidth >= widthInt)
                {
                    var columnCount = (int)Math.Ceiling(widthInt / maxItemWidth);

                    candidateItemWidth = (int)Math.Floor((double)widthInt / columnCount);

                    if (candidateItemWidth > 1.25 * maxItemWidth)
                    {
                        columnCount += 1;
                        candidateItemWidth = (int)Math.Floor((double)widthInt / columnCount);
                    }
                    else if (candidateItemWidth < minItemWidth)
                    {
                        columnCount -= 1;
                        candidateItemWidth = (int)Math.Floor((double)widthInt / columnCount);
                    }
                }

                wl.ItemWidth = candidateItemWidth ?? maxItemWidth;
            }
        }
    }

Error:

System.ArgumentOutOfRangeException: 'Index was out of range. Must be non-negative and less than the size of the collection. (Parameter 'index')'

 	0xFFFFFFFFFFFFFFFF in Android.Runtime.RuntimeNativeMethods.monodroid_debugger_unhandled_exception	C#
 	0x1A in Android.Runtime.JNINativeWrapper._unhandled_exception at /Users/runner/work/1/s/xamarin-android/src/Mono.Android/Android.Runtime/JNINativeWrapper.g.cs:12,5	C#
 	0x26 in Android.Runtime.JNINativeWrapper.Wrap_JniMarshal_PPZIIII_V at /Users/runner/work/1/s/xamarin-android/src/Mono.Android/Android.Runtime/JNINativeWrapper.g.cs:441,26	C#
 	0x8 in System.ThrowHelper.ThrowArgumentOutOfRange_IndexMustBeLessException	C#
 	0x9 in System.Collections.Generic.List<double>.get_Item	C#
 	0x205 in Telerik.Maui.RadWrapLayoutManager.ArrangeChildren	C#

 
Unplanned
Last Updated: 21 Jul 2025 07:16 by ADMIN
Create a blank telerik project (I've not used shell);
Update maui to 9.0.50 (for more relevance with current code);
Replace the contents of MainPage.xaml with the xaml shown below;
Remove unnecessary code from MainPage.xaml.cs to allow app to build and run;
OBSERVE:
Test 1.2 fails - items are shown on a single row when they should not fit.
Test 1.3 fails - items are shown on a single row when they should not fit, and the wrap layout is extended to two rows.
Test 2.1 fails - items are show on two rows when they should fit a single one.
Completed
Last Updated: 11 Oct 2023 08:10 by ADMIN
Release 6.3.0
Created by: Brett
Comments: 0
Category: WrapLayout
Type: Feature Request
1

Hi Team,

The RadWrapLayout is missing from the Visual Studio Toolbox:

Can you please add it in an upcoming update?

Thank you,

Brett