UI for .NET MAUI Forum RSS

Latest Online Resources about UI for .NET MAUI

Hello everyone,

Here are the highlights of the new online resources we published this week from 10 Nov 2025 to 17 Nov 2025:

Article: https://www.telerik.com/maui-ui/documentation/ai/changelog
Summary: Use this changelog to track versioned updates to the Telerik UI for .NET MAUI AI features, including new functionality, bug fixes, API changes, and breaking changes across AI components and integrations. Refer to it to plan upgrades, verify .NET MAUI and platform compatibility, and adjust your code for updated properties, methods, and configuration options.

Article: https://www.telerik.com/maui-ui/documentation/controls/chat/events
Summary: The article documents the RadChat events in Telerik UI for .NET MAUI, including their signatures and EventArgs, and shows how to wire them up. You will use these events to handle user interactions such as sending a message, tapping a message item, and selecting suggestions, enabling custom message processing and UI updates.

Article: https://www.telerik.com/maui-ui/documentation/controls/scheduler/date
Summary: Learn how the Scheduler Date property in Telerik UI for .NET MAUI controls the displayed range per view—day shows the specified date, week shows the week containing it, and month shows the corresponding month. The article covers setting and binding Date to navigate programmatically, and explains how the control normalizes the value to the view’s start (for example, the first visible day of the week or month).

Article: https://www.telerik.com/maui-ui/documentation/controls/skeleton/styling
Summary: You can style the Telerik RadSkeleton for .NET MAUI by defining XAML Styles and overriding the control’s theme resource keys to customize brushes, corner radius, and shimmer animation. The article lists the relevant properties and resource keys and shows how to apply per-control or app-wide changes via ResourceDictionary for consistent light/dark theming.

Article: https://www.telerik.com/maui-ui/documentation/controls/skeleton/overview
Summary: Use the Skeleton control in Telerik UI for .NET MAUI to display placeholder shapes with optional shimmer animation while your views load data. Define skeleton items yourself or wrap existing content in a SkeletonContainer to auto-generate placeholders, and configure animation, colors, layout, and visibility through the available properties. The article covers setup, key APIs, and examples for pages and item templates to help you add predictable loading skeletons to your UI.

Article: https://www.telerik.com/maui-ui/documentation/controls/chat/styling/entry
Summary: This article shows you how to style the message input Entry in the Telerik UI for .NET MAUI Chat (RadChat) using XAML Styles. You’ll target the chat’s Entry to set placeholder text, font, text and placeholder colors, background, border thickness, corner radius, and padding, with sample XAML demonstrating the applied style.

Article: https://www.telerik.com/maui-ui/documentation/controls/skeleton/animation
Summary: This article shows you how to enable and configure animation for the Telerik .NET MAUI Skeleton control, including choosing a built-in animation type, adjusting duration/speed, and toggling animation on or off. It provides XAML and C# examples for starting and stopping the animation at runtime and setting repeat behavior and related options.

Article: https://www.telerik.com/maui-ui/documentation/controls/chat/styling/buttons
Summary: Learn how to style the buttons in Telerik RadChat for .NET MAUI, including the composer’s Send and Attachment buttons and the Suggested Action buttons. The article covers setting the chat’s button style properties, applying XAML styles through resource dictionaries, customizing icons, colors, size, and typography, and using VisualStateManager to define Normal, Pressed, and Disabled states.

Article: https://www.telerik.com/maui-ui/documentation/controls/skeleton/custom-view
Summary: This article shows how to provide a custom view for the Telerik UI for .NET MAUI RadSkeleton, letting you define the exact placeholders displayed while data loads. You’ll learn the XAML setup to wrap your content, build a skeleton layout that mirrors your view, control the loading state from your view model, and adjust shapes, sizes, colors, and animation.

Article: https://www.telerik.com/maui-ui/documentation/controls/chat/styling/messages
Summary: Learn how to style messages in Telerik RadChat for .NET MAUI, including distinct appearance for incoming vs outgoing and system messages, avatars, and timestamps. You will use XAML styles and templates to customize bubble colors, typography, corner radius, spacing, and alignment, applying global styles or conditionally varying per-message appearance based on message metadata or selectors.

Feel free to check them out and share your thoughts!

The Telerik Team

---------------------------------------------------------------------------------------------------------------------------------------------------------

Hello everyone,

Here are the highlights of the new online resources we published this week from 29 Oct 2025 to 05 Nov 2025:

Article: https://www.telerik.com/blogs/crypto-financial-charts-net-maui-apps
Summary: You’ll implement crypto and financial charts in .NET MAUI using the Telerik UI for .NET MAUI Chart by configuring candlestick and OHLC series, binding time-series price/volume data with MVVM, and adding indicators (SMA/EMA), DateTime axes, trackball tooltips, and pan/zoom behaviors. The article walks you through fetching market data, mapping models, enabling real-time updates, and provides XAML/C# examples for series, axes, behaviors, and indicator configuration.

Feel free to check them out and share your thoughts!

The Telerik Team

---------------------------------------------------------------------------------------------------------------------------------------------------------

Hello everyone,

Here are the highlights of the new online resources we published this week from 20 Oct 2025 to 27 Oct 2025:

Article: https://www.telerik.com/blogs/net-maui-masked-entry-secure-input-credit-cards-pins-account-numbers
Summary: Learn how to use Telerik UI for .NET MAUI RadMaskedEntry to capture sensitive numeric input—credit cards, PINs, and account numbers—with masking, obfuscation, and validation. The article shows how to define mask patterns and tokens, configure password and prompt characters, control literals in the bound value, handle paste and keyboard input, and react to events like ValueChanged and MaskCompleted with XAML and C# examples. After reading, you can enforce formats (e.g., 0000 0000 0000 0000), hide entered characters, and reliably validate and parse the underlying value in an MVVM setup.

Feel free to check them out and share your thoughts!

The Telerik Team

Error MSB4216: Could not run the "ResolveTelerikProducts" task because MSBuild could not create or connect to a task host with runtime "NET" and architecture "x64"

Starting today, I get a build error when building a project that includes Telerik MAUI controls. This happens on an Azure hosted build agent, also locally when running the dotnet build command. The same build worked before, i.e. there are no changes on my part.

the following error messages occur:

error MSB4216: Could not run the "TelerikThemingTask" task because MSBuild could not create or connect to a task host with runtime "NET" and architecture "x64".  Please ensure that (1) the requested runtime and/or architecture are available on the machine, and (2) that the required executable "C:\Program Files\dotnet\sdk\9.0.307\MSBuild.dll" exists and can be run.

error MSB4216: Could not run the "ResolveTelerikProducts" task because MSBuild could not create or connect to a task host with runtime "NET" and architecture "x64".  
Please ensure that (1) the requested runtime and/or architecture are available on the machine, and (2) that the required executable "C:\Program Files\dotnet\sdk\9.0.307\MSBuild.dll" exists and can be run.

Telerik NuGet Server v2 is Obsolete - Use v3 Instead

The old https://nuget.telerik.com/nuget server is obsolete since November 2024. If you use it the following error occurs:

Failed to retrieve information about 'Telerik.UI.for.Maui' from remote source 'https://nuget.telerik.com/nuget/FindPackagesById()?id='Telerik.UI.for.Maui'&semVerLevel=2.0.0'.

As a solution use the v3 server. To redirect your feed to the NuGet v3 protocol, all you have to do is to change your NuGet package source URL to https://nuget.telerik.com/v3/index.json The new v3 API is faster, lighter, and reduces the number of requests from NuGet clients. The new v3 protocol offers faster package searches and restores, improved security, and more reliable infrastructure. For more details about the Telerik NuGet Server review the Telerik MAUI NuGet Server documentation.

Is it possible to split a DataForm into sections using TabView inside a Popup in .NET MAUI?

Hi everyone,
I'm currently using a RadDataForm inside a Popup to handle client creation in a .NET MAUI application. The form includes quite a few fields, and I’d like to improve the user experience by organizing them into thematic sections (e.g., Personal Info, Address, Contact) using a RadTabView or a similar approach.
My goal is to either:
• Display subsets of the same DataForm fields across different tabs, or
• Use multiple DataForm—one per tab—while maintaining consistent validation and a unified save process.
Is this kind of layout supported within a Popup? Any recommendations or best practices for structuring this scenario?
Thanks in advance for your guidance!

Using Expression Builders to handle Search, Sort, and Cascading Filters in a MAUI DataGrid with Load-On-Demand ?

I am developing a .NET MAUI application using a Telerik RadDataGrid bound to a very large database via Entity Framework.

Because I am using the Load-On-Demand feature to fetch data incrementally as the user scrolls, the grid only holds a partial subset of the data in memory. Therefore, I cannot rely on the grid's built-in client-side filtering or sorting or search.

I need an architecture where:

Grid State to LINQ: Changes to the Grid's FilterDescriptors or SortDescriptors trigger a reset of the Auto-Load collection and invoke an Expression Builder. This builder must generate dynamic LINQ-to-Entities queries to sort and filter the data at the database level before it is paged back to the UI.

Cascading Distinct Values: Since the component doesn't have all the data, the 'Distinct Values' list for column filters must also be queried from the server. These lists need to be context-aware (cascading), showing only values relevant to the currently active filters of other columns.

Can you please help ?

Crash IndexOutOfRangeException `RadCollectionView+ScrollIndexIntoViewCore`

Hi. During the scroll into view (easy to repro with more or less large lists) the user can affect the RadCollectionView ItemsSource applying the search filter as DelegateFilterDescriptor and IFilter as a function. We would like to know the way how to synchronize both processes or cancel the scrolling.

Or would be good to make scroll into view as async.

ScrollItemIntoView(item, false)

The following crash happened:

System.IndexOutOfRangeException

Message: Arg_IndexOutOfRangeException
Telerik.Maui.Data.IndexStorage.ValueForIndex(Int32 index, Boolean approximate)
Telerik.Maui.Controls.RadCollectionView+<ScrollIndexIntoView>d__170.MoveNext()
System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task, ConfigureAwaitOptions options)
Telerik.Maui.Controls.RadCollectionView+<>c__DisplayClass168_0+<<ScrollIndexIntoViewCore>b__0>d.MoveNext()
System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
System.Threading.Tasks.Task+<>c.<ThrowAsync>b__128_0(Object state)
Android.App.SyncContext+<>c__DisplayClass2_0.<Post>b__0()
Java.Lang.Thread+RunnableImplementor.Run()
Java.Lang.IRunnableInvoker.n_Run(IntPtr jnienv, IntPtr native__this)
Android.Runtime.JNINativeWrapper.Wrap_JniMarshal_PP_V(_JniMarshal_PP_V callback, IntPtr jnienv, IntPtr klazz)

how to set pie chart series colors?

I don't want to use the colors in the them. I want to set them myself for each DataItem. How is that done in a pie chart?

Scheduler custom appointment fontimage update issues

Hello,

We are having some issues figuring out why our custom appointments are missing icons(fontimage) whose visibility is controlled by a boolean.

First off, notice the book icon is only showing on the 2nd appointment, when it should be active on the first 3 appointments.

Then after going back and forth a few days without change or updating my list or any items on it we get the following:

The icon is now active on the 1st appointment for the same day, but not active for the 2nd anymore, and still not active for appointment 3.

We have checked the customAppointment and the boolean does get its boolean set to true for the relevant appointments. We do have the Copy and CopyFrom methods covering the boolean.

public bool showHomeworkIcon { get; set; }

public override IAppointment Copy()
{
    var task = new kmdAppointment();
    task.CopyFrom(this);
    return task;
}

public override void CopyFrom(IAppointment other)
{
    var task = other as kmdAppointment;
    if (task != null)
    {
        this.Rooms = task.Rooms;
        this.attachments = task.attachments;
        this.Teachers = task.Teachers;
        this.Description = task.Description;
        this.SubjectCourses = task.SubjectCourses;
        this.IsCancelled = task.IsCancelled;
        this.AppointmentColor = task.AppointmentColor;
        this.AppointmentSecondaryColor = task.AppointmentSecondaryColor;
        this.homeworkList = task.homeworkList;
        this.LessonAssignment = task.LessonAssignment;


        this.hasHomework = task.hasHomework;
        this.startEndString = task.startEndString;
        this.showHomeworkIcon = task.showHomeworkIcon;
        this.showLessonAssignmentIcon = task.showLessonAssignmentIcon;
    }
    base.CopyFrom(other);
}

Our day template uses a radborder with a grid

 <telerik:RadBorder CornerRadius="4"
                    Margin="1"
                    IsClippedToBounds="True"
                    BorderBrush="{Binding Occurrence.Appointment.AppointmentSecondaryColor}"
                    BorderThickness="4,0,0,0"
                    BackgroundColor="{Binding Occurrence.Appointment.AppointmentColor}">
     <Grid RowSpacing="0">
         <Grid.RowDefinitions>
             <RowDefinition Height="auto"></RowDefinition>
             <RowDefinition Height="auto"></RowDefinition>
             <RowDefinition Height="auto"></RowDefinition>
             <RowDefinition Height="*"></RowDefinition>
             <RowDefinition Height="auto"></RowDefinition>
         </Grid.RowDefinitions>
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="*"></ColumnDefinition>
             <ColumnDefinition Width="Auto"></ColumnDefinition>
             <ColumnDefinition Width="Auto"></ColumnDefinition>
         </Grid.ColumnDefinitions>

<label Grid.Row="0"
Grid.ColumnSpan="3"/> //repeat labels for 1,3 2,3 and 4,3. 3 is * to force the rows below to be near the end.


     <Image  Grid.Row="4"
         Grid.Column="1"
     </Image>

     <Image Grid.Row="4"
                           Grid.Column="2"
                           Margin="4, 0, 4, 4"
                           IsVisible="{Binding Occurrence.Appointment.showHomeworkIcon}">
                        <Image.Source>
                            <FontImageSource FontFamily="Material"
                                             Glyph="{x:Static materialDesign:MaterialDesignIcons.BookOpenBlankVariantOutline}"
                                             Color="{StaticResource BrandPrimary}"
                                             Size="16" />
                        </Image.Source>
      </Image>
  </Grid>
</telerik:RadBorder>

My guess is that the issue lies with the reusing of cells in whatever collectionview you build the appointments on, but I'm not sure.

dotnet sdk is 10.0.100-rc.2.25502.107 & 9.0.306 targeting dotnet 9, workload list says ios 26.0.10970-net10-rc.2, android 36.0.0-rc.2.332

using Telerik.UI.for.Maui 11.1.0

RadChat scroll event / position detection

We are investigating functionality of MAUI controls before buying the kit and are stuck with the problem with RadChat/RadChatListView: we need to load more messages when user scrolled to top (or if it is already at the top), but there are no events/hooks that can be used to trigger page-loading method.

There are no events or attachable actions, and the only class ScrollMediator's members are fully consealed by internal directive and cannot be overriden/inherited/created either.

1. How to detect scroll position at the top/bottom?
2. How to initially scroll to certain message (aka unread one) instead of straight to bottom?

Please, help us in this matter or point out where it is discussed.

PDF Viewer Scroll Not Working on iOS (Telerik UI for MAUI 11.1.0)

Hi everyone,

I'm running into an issue with the Telerik PDF Viewer in a .NET MAUI project.

Environment:

Telerik.UI.for.Maui: 11.1.0
.NET MAUI: 9.0.111
.NET version: net9.0-ios

Platform: iOS

Problem:
Scrolling inside the RadPdfViewer does not work on iOS. The same code works as expected on Android — I can scroll through the PDF content normally. On iOS, the viewer loads and displays the first page correctly, but it’s completely static: no vertical scroll or swipe works. However, navigation using PdfViewerNavigateToNextPageToolbarItem or PdfViewerNavigateToPreviousPageToolbarItem still functions as expected.

<ContentPage>
    <Grid RowDefinitions="Auto, *">
        <telerik:RadPdfViewerToolbar x:Name="pdfViewerToolbar"
                                     OverflowMode="Scroll"
                                     PdfViewer="{x:Reference pdfViewer}">
            <telerik:PdfViewerFitToWidthToolbarItem />
            <telerik:PdfViewerNavigateToPreviousPageToolbarItem />
            <telerik:PdfViewerNavigateToNextPageToolbarItem />
            <telerik:PdfViewerZoomInToolbarItem />
            <telerik:PdfViewerZoomOutToolbarItem />
            <telerik:PdfViewerSearchNavigationToolbarItem />
            <telerik:PdfViewerToggleLayoutModeToolbarItem />
        </telerik:RadPdfViewerToolbar>
        <telerik:RadPdfViewer x:Name="pdfViewer"
                              Grid.Row="1"
                              AutomationId="pdfViewer"
                              BackgroundColor="{StaticResource White}"
                              IgnoreSafeArea="False"
                              IsClippedToBounds="True"                              
                              LayoutMode="ContinuousScroll"
                              Source="{Binding PdfFile}" />
    </Grid>
</ContentPage>

Has anyone else encountered this issue, or is there a known workaround/fix for iOS?

Thanks in advance!

Jeff

RadScheduler landscape mode

When im using the RadScheduler on landscape mode, and im also having some items on the upper part of the page (lets say 50%), then when i click to open the month dropdown to select the day in the month, not all the month is visible (due to lack of vertical space) (which is fine) and the month dropdown isnt scrollable, so some days cant be reached (which isnt fine)...

Any help regarding this?

Background Image for SignaturePad

Is there a way to set a captured photo as the background image for the SignaturePad? I want users to be able to hand draw things on the photo and then save the "signature" and the background image as a new image.

RadScheduler auto month shift

When clicking the month dropdown and opening the month view,
there are those grey days (prev\next month days), clicking them sometimes shift the whole month to the new month (previous or next one) and sometimes it doesnt... maybe its about the line, im not completely sure whats the rule for this.

Its unclear.

How to affect alignment on NumericInput control

Notice the 'arrows' are left aligned. How can I center these (I am working on a custom control based on NumericInput). I also want to center the numeric text.

Thanks.

RadPdfViewer - best way to release the stream of the PDF

I'm running into issues where the RadPdfViewer does not want to let go of the file stream. What is the best way to clear the viewer and prepare for a refresh of the document?

How to change text color of selected row

My background is dark. The selected row uses dark text. How do I change that?

.NET MAUI Scheduler Day Styling with Appintments

Hello. Would be interested in migration .NET MAUI Scheduler from Xamarin with the following UI:

1. Selectable days and days with more customizable styles, like height etc.

2. Appointments indicators in days views

Everything achieved in xamarin using RadCalendar

Already checked Scheduler WeekHeader and Slot in UI for .NET MAUI | Telerik Forums

Thanks.

RadCollectionView item long tap gesture

Would like to add long tap handler for the item view of RadCollectionView.

Adding long tap effect breaks SelectionChanged functionality. Both gestures (long and single tap) added seems does not working.

Probably any in-box solution possible?

How can I make DataGrid's on-demand loading work fully, even with search, sorting, and filtering?

Hello,

Could someone explain to me how to make on-demand loading, searching, sorting, and filtering work well together?

Note that I use MVVM in my application.

Thanks!

RadSpeechToTextButton use speech capabilities of device while offline?

I saw where the community toolkit had microphone to textbox wired up to use the local speech capabilities for capturing speech to text. My app will work largely completely disconnected from a network of any kind. Am I stuck with disabling the microphone when this occurs?

SpeechToTextButton crashes

This happens in your samples using the Windows Machine option to launch the app. In your samples, it does a really good job of translating the voice and putting it in the textbox but ultimately crashes with unhandled exceptions and VS.NET tries to bring up its own debugger.

RadComboBox does not allow selection of an item nor use its bound value in Android

Happens in my app as well as your Examples app. I'm debugging with my local table Samsung SM-X218U Android 15.0 - API 35.

Any idea what I can to make this work?

Is it possible to completely disable mousehover on windows?

Other than using InputTransparent = true, which also blocks scrolling.

This is to avoid the interaction of mousehover and cellcontentselector.

RadTabView - Cannot select another Tab after update to 8.0

Hi,

After upgradingTelerik to 8.0.0 and MAUI to 9.0, RadTabView doesnt change to another Tab when i click on it.

Do you have the same issue ?

I am using RadListPicker in MAUI application and the popup touches the screen n mobile app on left and right.

Hi Telerik,

I am I am using RadListPicker in MAUI application, and the popup touches the screen n mobile app on left and right.

I tried adding margin to PopupViewStyle, but i could not see any space on the left and right, it still touches the screen.

Can you provide the solution for this.

Thanks,

Mohammed Rameez Raza (Rameez).

AutoComplete hide popup when no data is available

Hi,

Is it possible when using the autocomplete to not show the popup when there is no data available. I'm aware that there's the no-data template but that still shows the popup even if nothing is attached.

I was considering using the open/close event functionality which might work but I don't think it fully suits the use case. Hii hii

Customizable Button in Maui and Blazor web

We have requirement of Customizable Button in Maui (Android and iOS) and Blazor web assembly, attached video reference.

Button UI customizable as attached
When click the button show the animation (Video)
When touch and swipe same gesture allowed

Will the above scenarios achievable using Button control? in Maui (Android and iOS) and Blazor web.

Customizable Calendar in Maui (Android, iOS) and Blazor Web

We have requirement of customizable calendar with Dates as mentioned below,

Minimum and Maximum Dates (Disable other dates)
Selected Date customizable (Black color background and white color text)
Highlight specific dates (Blue border color) - it can be multiple dates
Current Date (Today) highlighted,

Will this above cases achievable in Maui (Android and iOS) and Blazor web as well?

[iOS] RadDataGrid - Exception "Platform cannot be null here"

I have encountered a problem with a page with RadDataGrid on it. On iOS when pressing back from this page app crashes with this error:

I'm suspecting a RadDataGrid because when I remove it from the page exception no longer occurs. It works on android without any issues.

version used: Telerik.UI.for.Maui 6.6.0
dotnet version: net9.0-ios

Change culture?

I am using Localization using ResourceManager. I have created various TelerikResource resx files with various languages.

I have added various Localization keys from various Telerik controls in there and translated them.

In App.xaml.cs constructor I call:

            TelerikLocalizationManager.Manager.ResourceManager = TelerikResource.ResourceManager;
            InitializeComponent();

This works fine and my Telerik controls are translated.

Now the user can change the culture from the application. I call this method:

    public void SetCulture(CultureInfo culture)
    {
        MobileGeneratedLocalization.Culture = culture;
        TelerikResource.Culture = culture;
        TelerikLocalizationManager.Manager.ResourceManager = TelerikResource.ResourceManager;
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(null));
    }

My normal translation (MobileGeneratedLocalization) reflects the selected culture but the Telerik controls keep their original culture/language? Even after reloading the page. How can I force the new culture for the Telerik controls?

RadSideDrawer is not invoking the DrawerOpening and DrawerOpened events

Hi Team,

I am using RadSideDrawer, and found that the RadSideDrawer is not invoking the DrawerOpening and DrawerOpened events when making the DrawerContent visible by sliding the screen.

CODE:

Telerik version: 7.1.0.

Device: IPad Pro (3rd generation), IOS 18.5.

Please provide if there is any workaround.

Thanks & Best Regards,

Mohammed Rameez Raza (Rameez).

Event("sideDrawer_DrawerOpening") for RadSideDrawer not calling from xaml.cs file for the IOS platfrom.

I added one Event(("sideDrawer_DrawerOpening")) for RadSideDrawer control in xaml file and I implemented that Event in xaml.cs file. That event is not calling specifically when I executed from IOS platform in the mobile app. and That same Event is calling when I Run the application from the Windows and Android platforms. It is not working for IOS platform.

Can you provide solution for this ASAP.

Scheduler interaction on user events

Hello i have a few questions regarding intercepting certain events.

I have an icon that i'd prefer would be in the same slots as the view change ikon and going to today icon, how can i add my custom view to it?
I want to make said icon visible only on dayview and only when the daypicker is not expanded to show the entire month.
Is there a way to intercept the scheduler showing the month to pick a date?

Notice the Icon on the side, it was originally added ontop of the dayname bar as a test but then we remembered that the bar gets pushed down for the picker.

Access filtered and selected items in RadDataGrid

I am using a RadDataGrid with SelectionMode set to Multiple. I have bound the SelectedItems to an observableCollection and this al works fine. I have enable filtering on colums and with the SearchPanel which works fine.
I can now selected multiple items and then apply a filter. Now I would like to access all items that are filtered and selected. The SelectedItems contains all selected items, filtered and unfiltered but only want the filtered (+ selected) ones.

Is there a property that contains the filtered items so I can intersect it with the SelectedItems?

If not can I apply the filters to the ItemsSource my self and get the filtered items this way?

Is it possible to get the list of filtered AND selected items any other (simple) way?

Change Theme Swatch at Runtime in C# Code

I configured the application to use customized Theme Colors (Swatches) following the link:

https://docs.telerik.com/devtools/maui/styling-and-themes/customize-the-theme#customizing-the-theme-colors-swatches

Next as requirement I should change the Theme Color (Swatch) at run-time based on the device, using C# code, the only link I found was:

https://docs.telerik.com/devtools/maui/knowledge-base/change-telerik-theme-runtime

But here the Telerik Theme is changed at run-time using only pre-defined Telerik Themes. So my question is: how can I change Default Theme Colors (Swatches) at run-time using C# code?

Thanks

[Scheduler] Disable interaction and allow navigation

Hi,

Is it possible to completely disable interaction while still allowing navigation on the scheduler?

I'm using custom appointments that are based on an abstract class, and when I tap on a slot, I get an exception because it can't create an appointment because the class is abstract.

I don't want to create appointments or edit them, I just want to display them and keep my class abstract

Thanks

Row Background Style Color of telerik:RadDataGrid based on Properties

I am trying to style the background color of Rows in a RadDataGrid by the following the SDKBrowser MAUI Example (from GitHub).

RowBackgroundStyleSelector seems to be obsolete/not found in new versions of telerik .net maui...

Using a class that returns a Style based on a Property value (implemeting IStyleSelector as the SDKBrowser example).

In the SDKBrowser example the binding is direct: (older version of .net maui telerik)?

How can I now bind the Row Background Style Color of a telerik:RadDataGrid in the new versions?

Customize radEntry of AutoComplete

Dear Telerik,

Can we customize radEntry of AutoComplete - like: add new button after Clear button?

RadRichTextEditor image insertion causes height glitch (Android only)

When inserting an image into the RadRichTextEditor, the height of the editor glitches where it becomes repeatedly shorter and taller. This is only happening on Android devices. Please see the attached video for reference. The editor is inside a StackLayout with a set MinimumHeightRequest.

RadToolbarResourceDictionary not found after updating to version 11

We have this in our project to customize some tool bar items. It is working in 10.1.0, but no longer works in version 11.0.0

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

<ResourceDictionary.MergedDictionaries>
    <telerik:RadToolbarResourceDictionary />
</ResourceDictionary.MergedDictionaries>

adding text or shapes in imageeditor for .net maui

Are there any plans to support adding text and shapes to an image in the ImageEditor for .Net MAUI like in the ASP .Net product?
See Insert Text and Draw for the ASP .Net product

How to modify the RadListPicker control as box with rounder corners and with dropdown up and down arrow when it is closed or open.

Hi Telerik,

How to modify the RadListPicker control as box with rounder corners and with dropdown up and down arrow when it is closed or open.

I need this for all the platforms.

Should look like this in all the platforms:

Thanks And Best Regards,

Mohammed Rameez Raza (Rameez).

Add linebreak mode to the Header text, Make the Tabs fit in single screen when have multiple tabs, Chnage the color of image (PNG)

Hi Telerik,

I have been using RadTabView for MAUI and have used the different style but, not able to make the header text to make to next line when it has lengthy text. and also, I need all my tabs to be visible in a single screen.

Requirements:

1. Line break for header text.

2. Make the tabs fit the screen.

3. Change the color of image (here we are using .png).

Below is the image for your reference:

Thanks & Best regards,

Mohammed Rameez Raza (Rameez).

How to change Placeholder of RadChat

Dear Telerik,

How can I change the placeholder of RadChat from 'Please entry a message' to other value binding to ViewModel like 'ABC...'. I have tried to use

<ContentPage.Resources>
<Style TargetType="telerik:ChatEntry">
<Setter Property="Placeholder" Value="ABC.." />
</Style>
</ContentPage.Resources> --> But it made the theming of RadChat failed! Can you help tell me how to solve this?

RadCollectionView two way binding?

Does the RadCollectionView support two way binding? I have a row of toggle buttons that I am trying to make work like a radio button group. Select one, and the others get toggled off.

I can tell all the logic and events to fire off the .UpdateValue on the other buttons but the UI does not recognize the change. For test purposes, also threw in some code to update a label just in case it might be the ToggleButton as the issue.

Everything seems to work but the UI is not updated. Tried wrapping a RefreshView around the RadCollectionView to no avail.

the one way binding does work.

AutoComplete Control Filters List Items It Shouldn't Be

I have the below implementation where when a user is typing in the AutoComplete control it calls API to fetch results using keyed text. But noticed that its filtering out results that our web portal (also using Blazor AutoComplete TK) is showing. I want to show all results in the list that is fetched as the user types, but it's not showing them all.

Why?

The ItemsSource is Bound to a collection that contains all results, but it's filtering some out for some reason.

<fv:AutoComplete
			x:Name="specialtyAutoComplete"
			CompletionMode="Contains"
			CornerRadius="0,0,3,3"
			FontSize="12"
			ItemsSource="{Binding SpecialtyAutocompleteList}"
			Margin="0,10,0,0"
			Padding="0,0,30,0"
			Placeholder="Search for Specialty"
			SuggestionViewBackgroundColor="#FFF"
			SuggestionViewBorderThickness=".5"
			TextSearchPath="Synonyms">
			<fv:AutoComplete.Behaviors>
				<tk:RadEventToCommandBehavior Command="{Binding SpecialtyTextChangedCommand}" EventName="TextChanged" />
				<tk:RadEventToCommandBehavior Command="{Binding SpecialtyItemSelectedCommand}" EventName="SuggestionItemSelected" />
			</fv:AutoComplete.Behaviors>
			<fv:AutoComplete.SuggestionItemTemplate>
				<DataTemplate>
					<Grid
						ColumnDefinitions="Auto, *"
						Margin="8,0"
						RowDefinitions="Auto,Auto">
						<Image
							HeightRequest="15"
							Margin="7"
							Source="med_bag"
							VerticalOptions="Center"
							WidthRequest="15" />
						<Label
							FontSize="{OnPlatform Android=12, iOS=10}"
							Grid.Column="1"
							Text="{Binding Code}"
							TextColor="Black"
							VerticalOptions="Center"
							VerticalTextAlignment="Center" />
						<Label
							FontAttributes="Italic"
							FontSize="{OnPlatform Android=11, iOS=9}"
							Grid.Column="1"
							Grid.Row="1"
							Text="{Binding Synonyms}"
							TextColor="#AAA"
							VerticalOptions="Center"
							VerticalTextAlignment="Center" />
					</Grid>
				</DataTemplate>
			</fv:AutoComplete.SuggestionItemTemplate>
			<tk:RadAutoComplete.DisplayTextFormatter>
				<local:SpecialtyTextFormatter />
			</tk:RadAutoComplete.DisplayTextFormatter>
</fv:AutoComplete>

Mac Visual Studio Code Unable to find package Telerik.UI.for.Maui.Trial

Hello,

I have installed the trial version of the Maui package [2]. After that I created an empty project: [1]

In VS Code, open the Command Palette menu by pressing Ctrl+Shift+P on Windows or Linux, or Cmd+Shift+P on Mac.
Select Telerik UI for .NET MAUI Template Wizard: Launch and press Enter

When I try to run/build it, I get this error:

NU1101: Unable to find package Telerik.UI.for.Maui.Trial. No packages exist with this id in source(s): /usr/local/share/dotnet/library-packs, NuGet

Which makes sense because there is no Telerik.UI.for.Maui.Trial at this location.

What am I doing wrong?

Thanks!

[1] https://marketplace.visualstudio.com/items?itemName=TelerikInc.telerik-maui-productivity-tools#:~:text=NET%20MAUI%20Scaffolders-,The%20Telerik%20UI%20for%20.,the%20controls%20through%20an%20UI.

[2] https://www.telerik.com/maui-ui?_gl=1*ok4989*_gcl_aw*R0NMLjE3MjY2NjE2OTkuQ2owS0NRanc5S20zQmhEakFSSXNBR1ViNG56N3NOa0NoYUF6UTlZOWREWVNiaVZBeVg4RzRqTkdJRWN3ODdJdzJmZzc0S0ZJSUd2WU9SZ2FBa1hyRUFMd193Y0I.*_gcl_dc*R0NMLjE3MjY2NjE2OTkuQ2owS0NRanc5S20zQmhEakFSSXNBR1ViNG56N3NOa0NoYUF6UTlZOWREWVNiaVZBeVg4RzRqTkdJRWN3ODdJdzJmZzc0S0ZJSUd2WU9SZ2FBa1hyRUFMd193Y0I.*_gcl_au*MTk5NjgwNjY4OS4xNzI2NjYwMDYw*_ga*MTY0MDUzNzA5Ny4xNzI2NjYwMDYx*_ga_9JSNBCSF54*MTcyNjY2MDA2MC4xLjEuMTcyNjY2NzA2OS4yMi4wLjA.

RadCollectionViewGroupView ExpandCollapseIndicatorStyle - set indicator (chevron icon) a different colour

Hello,

Is there a way to change to the colour of the indicator icon in ExpandCollapseIndicatorStyle.

This is what I have so far:

I've also included a screenshot of the area I'm trying to change. I thought TextColor would work, but that doesn't seem to have helped. I'm looking to change the colour to white or black via a dynamic resource.

<Style x:Key="GroupHeaderStyle" TargetType="telerik:RadCollectionViewGroupView">
                <Setter Property="ExpandCollapseIndicatorStyle" Value="{StaticResource ExpandCollapseIndicatorStyle}" />
                <Setter Property="BackgroundColor" Value="{DynamicResource ListSelector_SearchBarBackgroundColor}" />
                <Setter Property="BorderColor" Value="{DynamicResource ListBorderBackgroundColor}" />
                <Setter Property="BorderThickness" Value="1" />
                <Setter Property="VisualStateManager.VisualStateGroups">
                    <VisualStateGroupList>
                        <VisualStateGroup Name="CommonStates">
                            <VisualState Name="Normal" />
                            <VisualState Name="PointerOver">
                                <VisualState.Setters>
                                    <Setter Property="BackgroundColor" Value="{DynamicResource ListBorderBackgroundColor}" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateGroupList>
                </Setter>
            </Style>
            <Style x:Key="ExpandCollapseIndicatorStyle" TargetType="Label">
                <Setter Property="TextColor" Value="{DynamicResource TextColour}" />
                <Setter Property="IsVisible" Value="False"/>
            </Style>

How to implements Recursive mode with Independent mode of checkbox mode with tree view

Hi community,

We wait a long time for recursive mode feature in tree view.

But we found it has some limitations, when parent is expanded and selected and It's childs are selected .

No option to uncheck disable childs.

The support said the need to implement Recursive mode with Independent mode and add my logic inside.

I added a basic sample code and would like to add the following logic , can you help to implement these scenarios:

Scenario 1 -When the parent expanded and parent checked and have children, all it's children need to be checked :

You can check whether the child items are nodes from the parent and add them to the Checked Items collection.

Scenario 2 -When the parent not expanded and parent checked and have no children:

Just add this item to the Checked Items collection.

Scenario 3 -When I uncheck child the parent should be unchecked:

How is can be done ?

Scenario 4 - When parent unchecked, how i unchecked all its children:

How is can be done ?

Thanks in advance,

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>