Questions on UI for .NET MAUI Forum

1 answer

103 views

WrapLayout miscalculates its layout and presents blank rows or items inside rows where they shouldn't fit

using Telerik 10.1.0, Maui 9.0.50
this issue was very obvious when using Windows as resizing the app's window made the layouts render incorrectly at certain sizes
reproduced this on Windows, but unsure if the same will apply to other platforms.
if the calculations are incorrect across platforms the same issues could happen on Android and iOS if you hit the issue straight away at your device screen size or if you use resizeable windows (which I cannot test myself).
I've created a couple of test scenarios, one where the item size (255) is defined via its Width (253) and a Margin (1,1,1,1), and another where the Margin is 0 and the Width is 255.
see attached screenshots of app running on my pc (Windows 11 build 10.0.26100.3476)

Repro steps:

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:
1. Test 1.2 fails - items are shown on a single row when they should not fit.
2. 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.
3. Test 2.1 fails - items are show on two rows when they should fit a single one.

Xaml to use

    <ContentPage.Resources>
        <ResourceDictionary>
            <Style TargetType="Button">
                <Setter Property="WidthRequest" Value="253" />
                <Setter Property="HeightRequest" Value="77" />
                <Setter Property="Background" Value="Green" />
                <Setter Property="TextColor" Value="White" />
                <Setter Property="Margin" Value="1,1,1,1" />
                <Setter Property="Text" Value="Witdh 253, Margin 1,1,1,1" />
            </Style>

            <Style x:Key="NoMargin" TargetType="Button">
                <Setter Property="WidthRequest" Value="255" />
                <Setter Property="Margin" Value="0" />
                <Setter Property="Text" Value="Witdh 255, Margin 0" />
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>

    <ScrollView>
        <VerticalStackLayout Margin="30,0" VerticalOptions="Center">
            <!--  FIRST TEST  -->
            <Label Margin="30" HorizontalOptions="Center" Text="The layout below at width 765 should fit all its items on a single row" />
            <telerik:RadWrapLayout Background="DarkGreen" StretchLastChild="False" WidthRequest="765">
                <Button />
                <Button />
                <Button />
            </telerik:RadWrapLayout>
            <Label Margin="30" HorizontalOptions="Center" Text="The layout below at width 764.5 shows items in a single row (when they shouldn't fit)" />
            <telerik:RadWrapLayout Background="DarkRed" StretchLastChild="False" WidthRequest="764.5">
                <Button />
                <Button />
                <Button />
            </telerik:RadWrapLayout>
            <Label Margin="30" HorizontalOptions="Center" Text="The layout below at width 764.4 shows items in a single row (when they shouldn't fit) and presents a blank row" />
            <telerik:RadWrapLayout Background="DarkRed" StretchLastChild="False" WidthRequest="764.4">
                <Button />
                <Button />
                <Button />
            </telerik:RadWrapLayout>
            <Label Margin="30" HorizontalOptions="Center" Text="The layout below at width 764.3 shows items in two rows, as expected" />
            <telerik:RadWrapLayout Background="DarkGreen" StretchLastChild="False" WidthRequest="764.3">
                <Button />
                <Button />
                <Button />
            </telerik:RadWrapLayout>

            <!--  SECOND TEST  -->
            <Label Margin="30" HorizontalOptions="Center" Text="Second test" />
            <Label Margin="30" HorizontalOptions="Center" Text="The layout below at width 765 should fit all its items on a single row, but doesn't" />
            <telerik:RadWrapLayout Background="DarkRed" StretchLastChild="False" WidthRequest="765">
                <Button Style="{StaticResource NoMargin}" />
                <Button Style="{StaticResource NoMargin}" />
                <Button Style="{StaticResource NoMargin}" />
            </telerik:RadWrapLayout>
            <Label Margin="30" HorizontalOptions="Center" Text="The layout below at width 764.5 shows items in two rows" />
            <telerik:RadWrapLayout Background="DarkGreen" StretchLastChild="False" WidthRequest="764.5">
                <Button Style="{StaticResource NoMargin}" />
                <Button Style="{StaticResource NoMargin}" />
                <Button Style="{StaticResource NoMargin}" />
            </telerik:RadWrapLayout>
            <Label Margin="30" HorizontalOptions="Center" Text="The layout below at width 764.4 shows items in two rows" />
            <telerik:RadWrapLayout Background="DarkGreen" StretchLastChild="False" WidthRequest="764.4">
                <Button Style="{StaticResource NoMargin}" />
                <Button Style="{StaticResource NoMargin}" />
                <Button Style="{StaticResource NoMargin}" />
            </telerik:RadWrapLayout>
            <Label Margin="30" HorizontalOptions="Center" Text="The layout below at width 764.3 shows items in two rows" />
            <telerik:RadWrapLayout Background="DarkGreen" StretchLastChild="False" WidthRequest="764.3">
                <Button Style="{StaticResource NoMargin}" />
                <Button Style="{StaticResource NoMargin}" />
                <Button Style="{StaticResource NoMargin}" />
            </telerik:RadWrapLayout>
        </VerticalStackLayout>
    </ScrollView>

WrapLayout

answered on 14 Apr 2025

1 answer

116 views

Please provide the current default templates for RadTabView

Hello! I have seen various answers in the forum around templates for RadTabView, and some have shown the then-current defaults for some of the TabView templates.

Could you please provide the default templates here, and eventually update the documentation to show the defaults, similar to how the Xamarin documentation does? I'm referring to this documentation:

https://docs.telerik.com/devtools/maui/controls/tabview/templates

I'd love to be able to see the default HeaderTemplate, HeaderItemTemplate, ContentTemplate, etc.

Thank you!

TabView

answered on 09 Apr 2025

1 answer

120 views

ListPicker does not show if called from a Popup in MAUI

Hello,

We have a MAUI app that we are transitioning from Xamarin Forms. In the app we have a popup page that appears, which has a RadListPicker control in it.

In Xamarin.Forms we used to use rg.plugins.popups and would add the RadListPicker control there. Everything would work fine, it would appear ok on both platforms.

Since MAUI, on iOS, we have not been able to replicate that behavior. We have tried using Mopups, and CommunityToolkit.MAUI Popups with no success.

Using Mopups, the ListPicker is shown behind the popup page, and using the CommunityToolkit, the Picker does not show up at all.

Steps to reproduce:

1. Install CommunityToolkit.MAUI package

2. Create a Popup page and add a ListPicker with any data

3. Navigate to the popup and try to open the picker

Any help would be greatly appreciated.

Thank you!

answered on 03 Apr 2025

0 answers

104 views

telerik:RadNumericInput MAUI and double values

Hello,

In my MAUI application I want to use:

 <telerik:RadNumericInput Value="{Binding Gamma, Mode=TwoWay}"  StringFormat="{}{0:F1}" Minimum="0" Maximum="4.0" Step="0.1" />

The problem is, I can't type in e.g. "2.1", I type "2." and after I type 1 it make a 4.0 out of it. But I can type "2 " in it and use the buttons to select "2.1".

That's a pretty simple use case, what am I doing wrong?

Thanks,

Harald

NumericInput

asked on 31 Mar 2025

1 answer

125 views

Chart Pan and Zoom Events

I'm currently using a chart bar series within a ScrollView. The reason it's within a ScrollView is because I have a CollectionView of 4 cards displaying relevant data to the charts at the bottom of the ScrollView. Natively when I'm pinch zooming or panning (any tap or drag gesture on the chart), I can disable the ScrollView with the chart pan and pinch gestures using MPAndroidChart so that it doesn't interfere with the pinch zoom. I managed to figure out a way on iOS to disable the ScrollView. I add Pan and Pinch Gestures to the chart which prevents the scrolling but this doesn't work on Android. For it to be uniform, Can you suggest a way where we can disable the ScrollView when I Pan or Pinch Zoom on the bar chart? Thank you.

Chart

answered on 11 Mar 2025

1 answer

76 views

How to get the default style for items in a TreeView?

Hi,

I have a project in .NET 9 and I'm using Telerik 10.0.0, I'm trying to display a TreeView with the default style, but I only have the text displayed.

Here is the XAML code:

<telerik:RadTreeView Grid.Row="1"
                        ItemsSource="{Binding Catalog.Children}"
                        BackgroundColor="#FFFFFF"
                        ItemTapped="OnTreeItemTapped"
                        LoadChildrenOnDemandCommand="{Binding LoadOnDemandCommand}"
                        VerticalOptions="FillAndExpand">
    <telerik:TreeViewDescriptor DisplayMemberPath="Name"
                                ItemsSourcePath="Children"
                                TargetType="{x:Type viewModel:CatalogParentItemViewModel}" />
    <telerik:TreeViewDescriptor DisplayMemberPath="Name"
                                TargetType="{x:Type viewModel:CatalogItemViewModel}" />
</telerik:RadTreeView>

In the screenshot, the "Sans nom" item is of type CatalogParentItemViewModel and it does have children.

In the console, I have the following error which may be related:

java.lang.RuntimeException: Font asset not found /data/user/0/com.app.test/cache/telerikfont.ttf
	at android.graphics.Typeface.createFromAsset(Typeface.java:1061)
	at crc6452ffdc5b34af3a0f.NavigationViewFragment.n_onCreateView(Native Method)
	at crc6452ffdc5b34af3a0f.NavigationViewFragment.onCreateView(NavigationViewFragment.java:39)
	at androidx.fragment.app.Fragment.performCreateView(Fragment.java:3119)
	at androidx.fragment.app.FragmentStateManager.createView(FragmentStateManager.java:577)
	at androidx.fragment.app.FragmentStateManager.moveToExpectedState(FragmentStateManager.java:286)
	at androidx.fragment.app.FragmentManager.executeOpsTogether(FragmentManager.java:2214)
	at androidx.fragment.app.FragmentManager.removeRedundantOperationsAndExecute(FragmentManager.java:2115)
	at androidx.fragment.app.FragmentManager.execPendingActions(FragmentManager.java:2052)
	at androidx.fragment.app.FragmentManager$5.run(FragmentManager.java:703)
	at android.os.Handler.handleCallback(Handler.java:959)
	at android.os.Handler.dispatchMessage(Handler.java:100)
	at android.os.Looper.loopOnce(Looper.java:232)
	at android.os.Looper.loop(Looper.java:317)
	at android.app.ActivityThread.main(ActivityThread.java:8705)
	at java.lang.reflect.Method.invoke(Native Method)
	at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:580)
	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:886)

How can I have the default style shown in the examples of the documentation?

Thanks

Julien

TreeView

answered on 26 Feb 2025

1 answer

196 views

[Solved] iOS app crashes when dimissing trial popup

I'm trialing telerik maui controls and got this issue specific to iOS.
The app launches, an alert dialog injected by telerik is shown with the "this is a trial" information.
when dismissing the alert, the app crashes:

[0:] An error occurred: 'Object reference not set to an instance of an object.'. Callstack: ' at Telerik.Maui.Controls.TelerikLicense.<>c__DisplayClass12_0.<ShowLicenseMessage>b__1()

any ideas?
it works fine on windows and android, just iOS keeps failing and stopping me from validating telerik controls.

####EDIT####

I've managed to reproduce this issue on a separate project.

Created a new default maui project in visual studio for windows.
added the telerik trial 10.0 package, updated maui to 9.0.40
Added a new blank ContentPage called Loading.xaml. changed nothing on it.
In app.xaml.cs, modified the `CreateWindow method to `return new Window(new Loading());` as we're not using Shell.
Added another new ContentPage called PageWithTelerik.xaml
on that page, simply added a telerik RadButton, which should trigger the trial popup.
- <telerik:RadButton x:Name="button" Text="Click me!" />
back on app.xaml.cs, overridden the OnStart() method:

        protected override void OnStart()
        {
            var mainPage = Application.Current.Windows[0].Page;

            if (mainPage is Loading)
            {
                Page target = new PageWithTelerik();

                MainThread.BeginInvokeOnMainThread(() => { Application.Current.Windows[0].Page = target; });
            }
        }

if you then run this app, it'll:

get to PageWithTelerik
display the trial popup (but the watermark that is usually is shown behind the popup is not visible!)
crash with a null reference exception when you dismiss the popup.

CollectionView

answered on 24 Feb 2025

1 answer

527 views

[Solved] CollectionView Refresh

I have a CollectionView with Groups which does not seem to be refreshing when groups are expanded/collapsed. If I move the control (kind of force a scroll) things seem to refresh

What can I do to force the control to refresh. Can I capture when the user Expand/Collapse and do a Load. I have looked at LoadOnDemand, but I don't see how this would work.

Example

Control before expand

After Expand (You can see Pipeline Device shows expanded, but nothing is visible)

After do a scroll on control

CollectionView

answered on 24 Feb 2025

1 answer

93 views

How to set a font for the entire html document

Using the RichTextEditor I am attempting to set a default value for font family using a style but so far have been unable to get it to work.

Here is my attempt.

StringBuilder _HtmlContent = new StringBuilder();
_HtmlContent.Append("<html><head><style>body { font-family:verdana;; font-size: 16px; }</style></head><body>");
_HtmlContent.Append("<p>This is a paragraph with Verdana font.</p>");
_HtmlContent.Append("</body></html>");

this.richTextEditor.Source = RichTextSource.FromString(_HtmlContent.ToString());

What am I doing wrong? Thanks for your help.

Daniel

RichTextEditor