How to style RadListView with rounded corners

[Lynette Anderson]

I have a RadListView with a Grid Layout (see snippet below).

This does round the corners as expected, however, there is white space surrounding the items that the missing corners reveal. Is there a way to remove this white background?

Screenshot of behavior

 

 

 

<Grid Padding="50,0,25,0">
                    <telerikDataControls:RadListView x:Name="agendaListView"
                                                    ItemsSource="{Binding AgendaItems}"
                                                    IsLoadOnDemandEnabled="{Binding ReachedAgendaEnd, Converter={StaticResource ReverseBooleanConverter}}"
                                                    IsLoadOnDemandActive="{Binding IsLoadOnDemandActive}"
                                                    LoadOnDemandBufferItemsCount="50"
                                                    LoadOnDemandMode="Automatic"
                                                    BackgroundColor="#f6f6f8"
                                                    IsVisible="{Binding IsFirstLoad, Converter={StaticResource ReverseBooleanConverter}}">
                        <telerikDataControls:RadListView.ItemTemplate>
                            <DataTemplate>
                                <telerikListView:ListViewTemplateCell>
                                    <telerikListView:ListViewTemplateCell.View>
                                        <Frame CornerRadius="10" Padding="0" IsClippedToBounds="True" HasShadow="True">
                                            <Grid ColumnSpacing="0">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="100" />
                                                    <ColumnDefinition Width="*" />
                                                </Grid.ColumnDefinitions>
                                                <StackLayout Grid.Column="0" BackgroundColor="#00AEFF">
                                                    <StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand"
                                                                    Padding="0,25,0,0">
                                                        <Label Text="{Binding DayNumber}" HorizontalTextAlignment="Center"
                                                                FontSize="48" TextColor="White" FontAttributes="Bold"></Label>
                                                    </StackLayout>
                                                    <StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand">
                                                        <Label Text="{Binding DayWord}" HorizontalTextAlignment="Center"
                                                                FontSize="16" TextColor="White"></Label>
                                                    </StackLayout>
                                                    <StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand">
                                                        <Label Text="{Binding DateMonthYear}" HorizontalTextAlignment="Center"
                                                                FontSize="10" TextColor="White"></Label>
                                                    </StackLayout>
                                                </StackLayout>
                                                <StackLayout Grid.Column="1" BackgroundColor="#fcfcfc">
                                                    <StackLayout Orientation="Horizontal"
                                                                 HorizontalOptions="CenterAndExpand"
                                                                 VerticalOptions="CenterAndExpand"
                                                                 Padding="5,0,5,0">
                                                        <Label Text="{Binding Title}" LineBreakMode="WordWrap" HorizontalTextAlignment="Center"
                                                               TextColor="#505259"></Label>
                                                    </StackLayout>
                                                </StackLayout>
                                            </Grid>
                                        </Frame>
                                    </telerikListView:ListViewTemplateCell.View>
                                </telerikListView:ListViewTemplateCell>
                            </DataTemplate>
                        </telerikDataControls:RadListView.ItemTemplate>
                        <telerikDataControls:RadListView.Commands>
                            <telerikListViewCommands:ListViewUserCommand Id="ItemTap" Command="{Binding AgendaDetailCommand}" />
                            <telerikListViewCommands:ListViewUserCommand Id="LoadOnDemand" Command="{Binding AgendaLoadOnDemandCommand}" />
                        </telerikDataControls:RadListView.Commands>
                        <telerikDataControls:RadListView.LayoutDefinition>
                            <telerikListView:ListViewGridLayout
                            ItemLength="150"
                            SpanCount="2"
                            HorizontalItemSpacing="30"
                            VerticalItemSpacing="30" />
                        </telerikDataControls:RadListView.LayoutDefinition>
                    </telerikDataControls:RadListView>
                </Grid>

[Lance | Senior Manager Technical Support]

Hi Lynette,

RadListView doesn't any UI elements to the ItemTemplate, so everything you see in the rendered item belongs to the content of that template.

In this specific case, I suspect it's the shaow of the frame, disabling the shadow and it should resolve the issue:

<Frame CornerRadius="10" Padding="0" IsClippedToBounds="True" HasShadow="False">

If you do want the shadow, you'll need to increase the margin between the Frame and the edge of the item container to give room for the shadow:

<Frame CornerRadius="10" Padding="0" IsClippedToBounds="True" HasShadow="True" Margin="10">

Performance Improvement Suggestion

If you would like better performance, I recommend not using Frame at all. You can instead use the RadBorder to achieve the rounded corners and get a nice performance boost.

<telerikListView:ListViewTemplateCell>
    <telerikPrimitives:RadBorder BorderColor="#4488F6" BorderThickness="1" CornerRadius="10">
        <Grid ColumnSpacing="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="100" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <StackLayout Grid.Column="0" BackgroundColor="#00AEFF">
                <StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Padding="0,25,0,0">
                    <Label Text="{Binding DayNumber}" HorizontalTextAlignment="Center" FontSize="48" TextColor="White" FontAttributes="Bold"></Label>
                </StackLayout>
                <StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand">
                    <Label Text="{Binding DayWord}" HorizontalTextAlignment="Center" FontSize="16" TextColor="White"></Label>
                </StackLayout>
                <StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand">
                    <Label Text="{Binding DateMonthYear}" HorizontalTextAlignment="Center" FontSize="10" TextColor="White"></Label>
                </StackLayout>
            </StackLayout>
            <StackLayout Grid.Column="1" BackgroundColor="#fcfcfc">
                <StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Padding="5,0,5,0">
                    <Label Text="{Binding Title}" LineBreakMode="WordWrap" HorizontalTextAlignment="Center" TextColor="#505259"></Label>
                </StackLayout>
            </StackLayout>
        </Grid>
    </telerikPrimitives:RadBorder>
</telerikListView:ListViewTemplateCell>

Further Assistance

I hope I was able to help provide some insight as to what's happening. If you have any futher trouble, please open a support ticket here as you have a priority support license.

You also have a Technical Phone Assistance license and can give us a call after you open the ticket to discuss the case directly with me or my colleagues.

We try our best to monitor the forums and reply in a reasonable timeframe, but this is limited by available resources and could take a few days. Whereas Support Tickets carry a guaranteed 24 hour response timeframe.

Regards,
Lance | Technical Support Engineer, Principal
Progress Telerik