Questions on UI for .NET MAUI Forum

0 answers

126 views

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.

General Discussions

updated question on 27 Nov 2024

1 answer

9 views

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.

CollectionView

answered on 24 Apr 2025

1 answer

11 views

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>

AutoComplete

answered on 23 Apr 2025

2 answers

246 views

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.

General Discussions

Installer and VS Extensions

updated answer on 18 Apr 2025

1 answer

12 views

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>

CollectionView

answered on 17 Apr 2025

1 answer

14 views

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,

TreeView

answered on 15 Apr 2025

1 answer

26 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

19 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

18 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

26 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