Hi..
I created a simple custom Telerik Maui Combox control. With a similiar style as the Telerik documentation:  [Telerik Maui Controls Combobox Styling][1]


  [1]: https://docs.telerik.com/devtools/maui/controls/combobox/styling

    <Style TargetType="telerik:RadButton" x:Key="DropDownButtonStyle">
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="HorizontalOptions" Value="Center"/>
        <Setter Property="VerticalOptions" Value="Center"/>
        <Setter Property="WidthRequest" Value="24"/>
        <Setter Property="HeightRequest" Value="24"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="BackgroundColor" Value="Transparent"/>             
        <Setter Property="TextColor" Value="Blue"/>
        <Setter Property="Padding" Value="{OnPlatform Android='8, 2, 4, 2', iOS='4, 2, 12, 2', MacCatalyst='4, 0, 8, 0', WinUI='6, 0, 10, 0'}"/>
    </Style>

I just want to change the dropdown button to use a custom Icon. So I added:

    <Setter Property="BackgroundImage" Value="downarrow.png">

When I add the custom control to a view. It works!  But on initial load - the dropdown icon does not appear. Even after binding.  If I start selecting drop downs and perform other actions, the icons appear!  Why doesn't the icon appear on load/init?  It does finally appear.  How can I force it to show?  Here's the code for the control.

    <?xml version="1.0" encoding="utf-8" ?>
    <ContentView
        x:Class="ABC.CustomControls.CustomDropdown"
        xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:eventToCommand="http://ABC.com/schemas/ToolKits"
        xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
        xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
        xmlns:Image="http://ABC.com/schemas/Image"   
        x:Name="CustomDdUnique">
        <ContentView.Resources>
            <ResourceDictionary>
                <Style x:Key="DropDown_ButtonStyle" TargetType="telerik:RadButton">
                    <Setter Property="FontSize" Value="14" />
                    <Setter Property="HorizontalOptions" Value="Center" />
                    <Setter Property="VerticalOptions" Value="Center" />
                    <Setter Property="WidthRequest" Value="15" />
                    <Setter Property="HeightRequest" Value="11"/>
                    <Setter Property="Padding" Value="0" />
                    <Setter Property="Margin" Value="0,0,10,0" />
                   <Setter Property="BackgroundImage" Value="arrow_down_1.png"/>
                    <Setter Property="BackgroundColor" Value="Transparent" />
                    <Setter Property="TextColor" Value="Transparent" />
                    <!--<Setter Property="Padding" Value="{OnPlatform Android='8, 2, 4, 2', iOS='4, 2, 12, 2', MacCatalyst='4, 0, 8, 0', WinUI='-20, 0, 0, 0'}" />-->
                </Style>
            </ResourceDictionary>
        </ContentView.Resources>
        <Grid
            ColumnDefinitions="*"
            HorizontalOptions="{Binding HorizontalOptionsDD, Source={x:Reference CustomDdUnique}}"
            VerticalOptions="{Binding VerticalOptionsDD, Source={x:Reference CustomDdUnique}}"
            WidthRequest="{Binding WidthRequestDD, Source={x:Reference CustomDdUnique}}">
    
            <Border
                HeightRequest="{Binding HeightRequestDD, Source={x:Reference CustomDdUnique}}"
                Stroke="#D9D9D9"
                StrokeThickness="1"
                WidthRequest="{Binding WidthRequestDD, Source={x:Reference CustomDdUnique}}">
                <Border.StrokeShape>
                    <RoundRectangle CornerRadius="5" />
                </Border.StrokeShape>
                <telerik:RadComboBox
                    x:Name="CustomDd"       
                    BackgroundColor="{Binding BackgroundColor, Source={x:Reference CustomDdUnique}}"
                    DisplayMemberPath="{Binding DisplayMemberPath, Source={x:Reference CustomDdUnique}}"
                    DropDownButtonStyle="{StaticResource DropDown_ButtonStyle}"
                    FlowDirection="LeftToRight"
                    FontFamily="{Binding FontFamily, Source={x:Reference CustomDdUnique}}"
                    FontSize="{Binding FontSize, Source={x:Reference CustomDdUnique}}"
                    HeightRequest="{Binding HeightRequestDD, Source={x:Reference CustomDdUnique}}"
                    HorizontalOptions="Start"
                    IsClearButtonVisible="False"
                    IsDropDownOpen="{Binding IsDropDownOpen, Source={x:Reference CustomDdUnique}}"
                    ItemsSource="{Binding ItemsSource, Source={x:Reference CustomDdUnique}}"
                    MinimumWidthRequest="50"
                    Opacity="1"                
                    SelectedIndex="{Binding SelectedIndex, Source={x:Reference CustomDdUnique}, Mode=TwoWay}"
                    SelectedItem="{Binding SelectedItem, Source={x:Reference CustomDdUnique}, Mode=TwoWay}"
                    TextColor="{Binding TextColor, Source={x:Reference CustomDdUnique}}"
                    VerticalOptions="Start"
                    WidthRequest="{Binding WidthRequestDD, Source={x:Reference CustomDdUnique}}">
    
                    <telerik:RadComboBox.Behaviors>
                        <eventToCommand:EventToCommandBehavior Command="{Binding Source={x:Reference CustomDdUnique}, Path=SelectionChangedCommand}" EventName="SelectionChanged" />
                    </telerik:RadComboBox.Behaviors>
    
                </telerik:RadComboBox>
            </Border>
            <Polygon
                x:Name="ChangeIndicator"
                Fill="#B43218"
                HeightRequest="13"
                HorizontalOptions="Start"
                IsVisible="{Binding HasChanges, Source={x:Reference CustomDdUnique}}"
                Points="0,0 0,13 14,0"
                StrokeThickness="0"
                VerticalOptions="Start"
                WidthRequest="14" />
        </Grid>
    </ContentView>

I use the control like this:  Why doesn't my dropdown icon show when loaded?          

    <controls:CustomDropdown
            Margin="10,10,0,0"   
                                                        Width="30"
                                                           ItemsSource="{Binding Mapping.ListOptions}"
                                                           SelectedItem="{Binding Mapping.List, Mode=TwoWay}"
                                                           DisplayMemberPath="Name">
                                                     </controls:CustomDropdown>             


thx

Hi,

Since migrating to MAUI .NET8 GA 8.0.3 (and Telerik 6.5) - on iOS the RadListView keeps repeatedly triggering the defined LoadOnDemand command to get more items even though list has not been scrolled by user (and there are still plenty of items off screen / bottom of list has not been reached).

I also refer to this previous post which describes how we are using the RadListView  - Grouped mode and based on advice using <Grid RowDefinitions="Auto" ...> wrapped around items to ensure items with multiple heights are rendered correctly : 
https://www.telerik.com/forums/telerik-radlistview-failing-to-render-grouped-list-items-correctly-on-ios-maui-net7

For example we have RadListView where 10 items are loaded initially - and then we load additional sets of 10 items each time from API when the LoadOnDemand command is triggered : 

- On iOS .NET8 MAUI - even when list is not even scrolled by user it & there are still plenty of items off screen it just keeps triggering the LoadOnDemand command every few seconds to ask for more items.

- On Android .NET8 MAUI, and the previous .NET7 MAUI releases (both Android/iOS) - we were not seeing this behaviour.

Note that (as per recommended implementation in docs) we have LoadOnDemandMode set to 'Automatic', IsLoadOnDemandEnabled to 'True' and a ListViewUserCommand of id = 'LoadOnDemand' defined under the Commands property.

Can please advise when a fix can be provided for this.

thanks

Niall

 

Hello,

I'm looking for a control for .net maui for cross-platform desktop development that lets you resize the different sections of your user interface like the GridSplitter control does in WinUI.

Does one exist?

I need to implement an indent for the group headers based on level to better show the hierarchy. Is there anything built-in for this or a recommended method? The only thing I can see to do would be to create a converter to read the level of the GroupHeader and set the margin property of it based on that value.

I have tried the Entry control (RadEntry) this seems to be single line text

I have tried the RadRichTextEditor, this is only html, does this have a plain text mode?

I have tried RadDataForm with DataFormMultiLineEditor which has multi line text but cant seem to get a text selection.

Is there no a multi line text box that we can use in MAUI?
I have tried the standard Editor but the Text Selection seems odd and cannot figure that out?

This seems like an obvious control to have in the suite? Any ideas?

Do tooltips for windows and macos work on Telerik controls?

As per this blog post: https://www.telerik.com/blogs/improving-desktop-applications-tooltips-dotnet-maui

I am trying this on a ListPickerButtonToolbarItem


ToolTipProperties.Text ="Some text"

I just seem to get the selected item text

Hi,

I updated VS to the last version and now everytime i add a datagrid to the Xaml it crashes everything. In a past project i could add all the datagrids i wanted no problem, but now even in a new Maui project with only a MainPage i can't even just putting a <telerik:RadDataGrid and pressing / to close the tag because it crashes.

I guess this could be more a visual studio problem, but it's there a work around?

I'm trying the 6.5 trial controls in a MAUI project on net 8.0.

 

Thanks

 

EDIT: Reinstalled VS and repair it after, it works now. Admin can close the question

Is the version 6.4.0 of MAUI compatible with .NET 8?

Hi,

I am using a DockLayout in my app.

Initially only a content is shown which occupies the whole screen. upon button click the "right" panel of docklayout is visible and the main content is resized. This works great on desktop.

On smaller screen (tablet, mobiles) I would like to "overlay" the right dock panel on top of the main content and dont want to resize it as there is not much space for the resized (main) content.

I created similar layout manually using Grid and frame and "onIdiom" which works.

I was wondering if Docklayout has some similar functionality? 

We use a Maui RadTimePicker. We regulary update the Time Property from code behind to provide the user with a meaningful starting value.

But if the popup is open, an Update of the Time Property currently changes the current user selection. It's confusing for the user if his selection get's magically changed. Potentially right before he hits ok.

From my point of view the current behaviour is a bug. 

Workaround for us would be to try to detect if the popup is open and not update the Time Property in this case. But how can we detect in code if the popup is showing?

 

Thanks,

 Karsten