ListView: Expose CornerRadius property for ListView ItemStyle

Progress® Telerik® UI for .NET MAUI Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

Last Updated: 10 Sep 2024 08:12 by ADMIN

SturmA

Created on: 30 Jan 2023 12:18

Category: ListView

Type: Feature Request

ListView: Expose CornerRadius property for ListView ItemStyle

Provide an option to set corner radius to the ListView item style and selected item style

2 comments

ADMIN

Didi

Posted on: 10 Sep 2024 08:12

Hi all,

We have resolved this behavior by implementing a new control, CollectionView, which is a complete rewrite of the ListView from the ground up. CollectionView offers improved performance, enhanced features, and a modernized approach to managing lists of data. The CollectionView incorporates all key features of the ListView.

As this new control supersedes the ListView, this feature request will be closed. We recommend transitioning to CollectionView to take full advantage of its capabilities. Visit the following article that explains how to migrate to the new RadCollectionView.

The CollectionView Item Style is described here: https://docs.telerik.com/devtools/maui/controls/collectionview/styling/item-style

Regards,
Didi
Progress Telerik

ADMIN

Didi

Posted on: 30 Jan 2023 13:10

Solution:
Add a Border/Frame inside the ListView ItemTemplate and change its visibility on selection:

<telerik:RadListView x:Name="listView" 
                            ItemsSource="{Binding ItemsSource}" 
                            SelectionChanged="listView_SelectionChanged" 
                            SelectionMode="Single">
    <telerik:RadListView.ItemTemplate>
        <DataTemplate>
            <telerik:ListViewTemplateCell>
                <telerik:ListViewTemplateCell.View>
                    <Grid>
                        <Frame BackgroundColor="LightBlue" 
                                            CornerRadius="10" 
                                    x:Name="border"
                                            IsVisible="{Binding IsSelected}" >
                        </Frame>
                        <Label Text="{Binding Name}" TextColor="Black" />
                    </Grid>
                </telerik:ListViewTemplateCell.View>
            </telerik:ListViewTemplateCell>
        </DataTemplate>
    </telerik:RadListView.ItemTemplate>
    <telerik:RadListView.LayoutDefinition>
        <telerik:ListViewLinearLayout ItemLength="80" />
    </telerik:RadListView.LayoutDefinition>
    <telerik:RadListView.ItemStyle>
        <telerik:ListViewItemStyle BackgroundColor="Transparent"
                                BorderLocation="None" />
    </telerik:RadListView.ItemStyle>
    <telerik:RadListView.SelectedItemStyle>
        <telerik:ListViewItemStyle BackgroundColor="Transparent"
                                BorderLocation="None" />
    </telerik:RadListView.SelectedItemStyle>
    <telerik:RadListView.PressedItemStyle>
        <telerik:ListViewItemStyle BackgroundColor="Transparent"
                                BorderLocation="None" />
    </telerik:RadListView.PressedItemStyle>
</telerik:RadListView>

private void listView_SelectionChanged(object sender, NotifyCollectionChangedEventArgs e)
{
    if (e.OldItems != null)
    {
        foreach (DataItem item in e.OldItems)
        {
            item.IsSelected = false;
        }
    }

    if (e.NewItems != null)
    {
        foreach (DataItem item in e.NewItems)
        {
            item.IsSelected = true;
        }
    }
}