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

Unplanned

Last Updated: 30 Jan 2023 13:10 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

1 comment

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;
        }
    }
}