How to style RadListView with rounded corners

2 posts, 0 answers
  1. Lynette Anderson
    Lynette Anderson avatar
    10 posts
    Member since:
    Jun 2005

    Posted 10 Apr 2019 Link to this post

    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>
  2. Lance | Manager Technical Support
    Admin
    Lance | Manager Technical Support avatar
    1168 posts

    Posted 10 Apr 2019 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top