Questions on UI for .NET MAUI Forum

1 answer

53 views

Unable to get Hot Reload to work on ListView

On a simple project with Telerik installed, I can change the FontSize on a simple standard label and Hot Reload works. If I try to change the FontSize on a column in a ListView (in another project), Hot Reload does not work. Settings in Tools\Options all appear to be the same between the projects. Screen Print attached.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
             xmlns:viewModels="clr-namespace:peMove.Maui.LookupViewModels"
             x:Class="peMove.Maui.Pages.MainPage">

    <telerik:RadListView x:Name="listView" ItemsSource="{Binding Source}" MinimumWidthRequest="100" >
        <telerik:RadListView.BindingContext>
            <viewModels:ViewModel_L />
        </telerik:RadListView.BindingContext>

        <telerik:RadListView.ItemTemplate>
            <DataTemplate>
                <telerik:ListViewTemplateCell>
                    <telerik:ListViewTemplateCell.View>

                        <telerik:RadBorder x:Name="border01" BorderThickness="0, 0, 0, 1"
                                               BackgroundColor="White"
                                               BorderColor="#b1b1b1">
                            <Grid RowDefinitions="Auto" 
                                      ColumnSpacing="5"
                                      ColumnDefinitions="Auto,*,Auto" Margin="10,10">

                                <!--Column 1: Icon-->
                                <telerik:RadBorder x:Name="border02" 
                                                       Grid.Column="0"
                                                       CornerRadius="20"
                                                       WidthRequest="40" 
                                                       VerticalOptions="Center"
                                                       HorizontalOptions="Center"
                                                       BackgroundColor="{Binding Color}"
                                                       Padding="12,6"
                                                       Margin="10"
                                                       HeightRequest="40">
                                    <Label FontSize="20"
                                               Text="{Binding TypeShort}"
                                               TextColor="#FFFFFFDE"
                                               VerticalOptions="Center" 
                                               HorizontalOptions="Center"/>
                                </telerik:RadBorder>

                                <!--Column 2: Data-->
                                <VerticalStackLayout Grid.Column="1" 
                                                         Spacing="3"
                                                         Margin="0,6,0,6"
                                                         VerticalOptions="Center">
                                    <Label Text="{Binding Id}" 
                                               VerticalOptions="Center"
                                               HorizontalOptions="Start"
                                               FontSize="14"
                                               FontAttributes="Bold"
                                               TextColor="Black"/>
                                    <Label Text="{Binding Name}"
                                               HorizontalOptions="Start"
                                               VerticalOptions="Start"
                                               TextColor="{AppThemeBinding Light='#99000000'}" 
                                               FontSize="16"/>
                                    <Label Text="{Binding Status}"
                                               HorizontalOptions="Start"
                                               VerticalOptions="Start"
                                               TextColor="Black" 
                                               FontSize="10"/>
                                </VerticalStackLayout>

                                <!--Column 3: Quantity-->
                                <Label Grid.Column="2"
                                       Text="{Binding Quantity, StringFormat='{0:F2}'}"
                                       HorizontalOptions="Start"
                                       VerticalOptions="Start"
                                       TextColor="{AppThemeBinding Light='#7E7E7E'}" 
                                       FontSize="16"/>
                            </Grid>
                        </telerik:RadBorder>

                    </telerik:ListViewTemplateCell.View>
                </telerik:ListViewTemplateCell>
            </DataTemplate>
        </telerik:RadListView.ItemTemplate>

    </telerik:RadListView>

</ContentPage>

ListView

updated answer on 19 Oct 2023

1 answer

232 views

Get all music files from device using .NET MAUI

I am creating a music player app so what i want to automatically load all songs from phone or windows computer and display them in a listView so that I can use them to play from selecting them.

I am kind of a beginner :)

Thanks

General Discussions

ListView

Path

updated answer on 05 Sep 2023

1 answer

54 views

Can still change selection in RadListView when IsEnabled is False

So I have a problem,

when i do this:

<telerik:RadListView IsEnabled="false" SelectionMode="Single" SelectionGesture="Tap">

I can still select/deselect item even though the component is disabled. It just changes color, but behaves like enabled component.

Is this a bug, or am I missing something??

ListView

answered on 04 Sep 2023

1 answer

158 views

RadListView EmptyView

Good morning,

Is there a way to format/customize what the empty view looks like? Currently it just says "No data", I wasn't sure if it was possible to add a custom message/style.

Thank you!

ListView

answered on 04 Aug 2023

1 answer

96 views

Problem in the RadListView control when the collection of items is emptied.

Hello I hope you can help me.
I have a RadListView that gets populated from a collection provided in the ViewModel. Within the template there is a button to delete the selected element and it works fine, but when there is only one element left and I delete it, the application crashes.

The xaml of the list

<telerik:RadListView ItemsSource="{Binding SelectedProducts, Mode=TwoWay}"  SelectionMode="None" >
                        <telerik:RadListView.ItemTemplate>
                            <DataTemplate  x:DataType="modles:ProductExhibitionDTO">
                                <telerik:ListViewTemplateCell>
                                    <telerik:ListViewTemplateCell.View>
                                        <Grid BackgroundColor="#FAFAFA" RowDefinitions="auto, auto, *, auto, auto, auto">
                                            <Grid Grid.Row="0" ColumnDefinitions="auto, *, auto">
                                                <Label Grid.Column="0" Text="{Binding ProductNumber}" Margin="8" FontSize="14" FontFamily="RobotoBold" TextColor="#000" />
                                                <Button Grid.Column="2" HorizontalOptions="End" Margin="8" ImageSource="delete_out_6" HeightRequest="24" WidthRequest="24" Command="{Binding Source={RelativeSource AncestorType={x:Type viewModel:NegotiatedExhibitionViewModel}}, Path=DeleteProductCommand}" CommandParameter="{Binding .}" BackgroundColor="Transparent" />
                                            </Grid>
                                            <Grid Grid.Row="1" RowDefinitions="auto, auto, auto" ColumnDefinitions="auto, 3*, *" >
                                                <Image Grid.Row="0" Grid.RowSpan="3" Grid.Column="0"  Source="{Binding ProductImageURL}" HeightRequest="100" WidthRequest="100" Margin="8"/>
                                                <Label Grid.Row="0" Grid.Column="1" VerticalOptions="Start" Margin="8,4" FontSize="12" TextColor="#000" FontFamily="RobotoRegular" Text="{Binding BrandName}" />
                                                <Label Grid.Row="1" Grid.Column="1" VerticalOptions="Start" HorizontalOptions="Fill" Margin="8,4" FontSize="14" TextColor="#000" FontFamily="RobotoBold" Text="{Binding ProductName}" LineBreakMode="WordWrap" />
                                                <Label Grid.Row="2" Grid.Column="1" VerticalOptions="Start" Margin="8,4" FontSize="14" TextColor="#000" FontFamily="RobotoRegular" Text="{Binding GTIN}" />
                                            </Grid>
                                            <Grid Grid.Row="2" ColumnDefinitions=".5*,.5*" RowDefinitions="auto, auto">
                                                <HorizontalStackLayout Grid.Row="0" Grid.Column="0">
                                                    <Label Grid.Row="0" Grid.Column="0" TextTransform ="Uppercase" Margin="8" Text="Frentes" TextColor="#757575" FontSize="10" FontFamily="RobotoRegular" />
                                                    <Image Source="warning_out" IsVisible="{Binding IsFrontRequired,Mode=TwoWay}" Margin="8" HeightRequest="15" WidthRequest="15"/>
                                                </HorizontalStackLayout>
                                                <HorizontalStackLayout Grid.Row="0" Grid.Column="1">
                                                    <Label Grid.Row="0" Grid.Column="1" TextTransform ="Uppercase" Margin="8" Text="Fondos" TextColor="#757575" FontSize="10" FontFamily="RobotoRegular"/>
                                                    <Image Source="warning_out" IsVisible="{Binding IsFundRequired,Mode=TwoWay}" Margin="8" HeightRequest="15" WidthRequest="15"/>
                                                </HorizontalStackLayout>
                                                <telerik:RadBorder Grid.Row="1" Grid.Column="0" Margin="8,4">
                                                    <telerik:RadEntry  Text="{Binding Front}"  Keyboard="Numeric" BackgroundColor="#FFFFFF" FontSize="14" FontFamily="RobotoRegular" WidthRequest="80" HorizontalOptions="Start" ClearButtonVisibility="Never" FocusedBorderBrush="Transparent" IsReadOnly="{Binding IsReadOnly}" />
                                                </telerik:RadBorder>
                                                <telerik:RadBorder Grid.Row="1" Grid.Column="1"  Margin="8,4" >
                                                    <telerik:RadEntry  Text="{Binding Fund}"  Keyboard="Numeric" BackgroundColor="#FFFFFF"  FontSize="14" FontFamily="RobotoRegular" WidthRequest="80" HorizontalOptions="Start" ClearButtonVisibility="Never" FocusedBorderBrush="Transparent" IsReadOnly="{Binding IsReadOnly}" />
                                                </telerik:RadBorder>
                                            </Grid>
                                        </Grid>
                                    </telerik:ListViewTemplateCell.View>
                                </telerik:ListViewTemplateCell>
                            </DataTemplate>
                        </telerik:RadListView.ItemTemplate>
                    </telerik:RadListView>

The DeleteItem command in the viewModel,

 [RelayCommand]
        void DeleteProduct(Object obj) //ProductExhibitionDTO productExhibitionDTO
        {
            ProductExhibitionDTO productExhibitionDTO = obj as ProductExhibitionDTO;
            if (productExhibitionDTO != null)
            {
                SelectedProducts.Remove(productExhibitionDTO);
            }
        }

And finally, the error:

ListView

answered on 04 Aug 2023

1 answer

55 views

Exception in ListView when defining ItemStyle and SelectedItemStyle BackgroundColor in C# instead of XAML

If I set ListView Background colors in XAML, they work, but if I set them in code, they don't.

This works:

<telerik:RadListView x:Name="MyList">
    <telerik:RadListView.ItemStyle>
        <telerik:ListViewItemStyle BackgroundColor="Transparent"/>
    </telerik:RadListView.ItemStyle>
    <telerik:RadListView.SelectedItemStyle>
        <telerik:ListViewItemStyle BackgroundColor="DarkRed"/>
    </telerik:RadListView.SelectedItemStyle>
    <telerik:RadListView.ItemTemplate>
        <DataTemplate>
            <telerik:ListViewTemplateCell>
                <telerik:ListViewTemplateCell.View>
                    ...
                </telerik:ListViewTemplateCell.View>
            </telerik:ListViewTemplateCell>
        </DataTemplate>
    </telerik:RadListView.ItemTemplate>
</telerik:RadListView>

This does not:

<telerik:RadListView x:Name="MyList">
    <telerik:RadListView.ItemTemplate>
        <DataTemplate>
            <telerik:ListViewTemplateCell>
                <telerik:ListViewTemplateCell.View>
                    ...
                </telerik:ListViewTemplateCell.View>
            </telerik:ListViewTemplateCell>
        </DataTemplate>
    </telerik:RadListView.ItemTemplate>
</telerik:RadListView>

// Constructor
public MyListView()
{
    InitializeComponent();

    MyList.ItemStyle.BackgroundColor = Colors.Transparent;
    MyList.SelectedItemStyle.BackgroundColor = Colors.DarkRed;
}

Defining the BackgroundColor in code in this way generates an exception. What am I doing wrong?

(Using: Telerik.UI.for.Maui 5.1.0)

ListView

updated answer on 17 Jul 2023

1 answer

170 views

How-to create a templateSelector programatically?

Hello, I find myself in need of creating a RadListView that uses templateSelector depending on the data it presents, in addition to this, for the creation of the itemTemplate I need to do it dynamically since some will present 4 radioButton or sometimes n radioButton. The question is: can I just create the item template in code form or is it necessary to create the whole RadListView? Do you have any examples or where I can see documentation of generating these elements by code?
Greetings!!

ListView

answered on 08 Jun 2023

0 answers

565 views

MAUI - UI Freezing on Nagivation

Hello everyone, I write this post in the hope that someone can help me with this problem.

I'm newbie with this MAUI framework. I'm trying to create a simple Android / iOS application but I'm experiencing navigation performance issues.

Whenever I navigate to a page with more "heavy" information, the UI simply freezes until the information is loaded. For example if I use a ListView with only 13 elements the UI freezes for at least one/two seconds, this in release mode cannot be acceptable. I tried to put a Busy Indicator to simulate the loading of the page but it freezes until the information is loaded. It is a very bad user experience.

All my services are running on background threads. I'm currently using Telerik components and I'm also using Shell and the CommunityToolkit.Mvvm package.

On Windows the application works perfectly, without any problem but on Android it is very bad.

I've looked everywhere for a solution. I found some similar problems and most of the proposed solutions were to avoid ListViews nested in scroll views and so on, I already checked all that but nothing changed.

Has anyone here ever faced a problem like this? If yes, how did you manage to solve it?

Thank you in advance for your attention!

BusyIndicator

ListView

asked on 29 May 2023

1 answer

377 views

Right Justification in Listview

I am using a RadListView with a Horizontal Linear layout.
While I can make the entire listview right justified with HorizontalOptions set to End, the individual items with in the list are still left aligned.
Is there a way to change this?

ListView

answered on 24 May 2023

0 answers

103 views

Bug with ListView item background color on certain Android versions

I have a listview using templatecells.

With android API >= 31, everything looks fine (default background is transparent)

On androd API 28, the background defaults to white, you can manually set it to other colors which work, but if set to transparent, the background stays white

ListView