Decrease space between each item of a RadListView

[Milenny]

Greetings, I would like to know how to remove margin of space between each element that I show through a RadListView, since it has a lot of margin between each item that I do not need .. I have tested with properties such as Margin or Padding but it is still the same. .. any ideas? thank you..

[Yana]

Hello Milenny,

You could customize the ListView ItemStyle in order to decrease the padding and margin as shown in the snippet below:

<data:RadListView ItemsSource="{Binding Items}">
    <data:RadListView.ItemStyle>
        <Style TargetType="listView:RadListViewItem">
            <Setter Property="Padding" Value="0"/>
            <Setter Property="Margin" Value="0"/>

            <!-- These setters are only to help you see that the above Padding and Margin values are working -->
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="VerticalAlignment" Value="Stretch"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <Setter Property="Background" Value="Blue"></Setter>
        </Style>
    </data:RadListView.ItemStyle>
</data:RadListView>

I hope this helps.

Regards,
Yana
Progress Telerik

[Milenny]

Thanks for your reply .. but the code you have put to me is not compatible with the "RadListViewItem" tag .. since it says that the term is not supported by UWP .. attached image ...

[Milenny]

The code that I show in the attached image, if it supports it, but it does not diminish the space between the RadListView items ..

01.<Custom:RadListView  ItemTemplate="{StaticResource ListReservationsDataTemplate}">
02.   <Custom:RadListView.ItemStyle>
03.       <Style TargetType="Custom:RadListView">
04.          <Setter Property="Margin" Value="0,0,0,0" />
05.          <Setter Property="Padding" Value="0,0,0,0" />
06.          <Setter Property="MinHeight" Value="20" />
07.          <Setter Property="HorizontalAlignment" Value="Stretch"/>
08.          <Setter Property="VerticalAlignment" Value="Stretch"/>
09.          <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
10.          <Setter Property="VerticalContentAlignment" Value="Stretch"/>
11.          <Setter Property="Background" Value="Blue"></Setter>
12.       </Style>
13.    </Custom:RadListView.ItemStyle>
14.</Custom:RadListView>

[Milenny]

The code that I show in the attached image, if it supports it, but it does not diminish the space between the RadListView items ..

01.<Custom:RadListView  ItemTemplate="{StaticResource ListReservationsDataTemplate}">
02.   <Custom:RadListView.ItemStyle>
03.       <Style TargetType="Custom:RadListView">
04.          <Setter Property="Margin" Value="0,0,0,0" />
05.          <Setter Property="Padding" Value="0,0,0,0" />
06.          <Setter Property="MinHeight" Value="20" />
07.          <Setter Property="HorizontalAlignment" Value="Stretch"/>
08.          <Setter Property="VerticalAlignment" Value="Stretch"/>
09.          <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
10.          <Setter Property="VerticalContentAlignment" Value="Stretch"/>
11.          <Setter Property="Background" Value="Blue"></Setter>
12.       </Style>
13.    </Custom:RadListView.ItemStyle>
14.</Custom:RadListView>

[Milenny]

The code that I show in the attached image, if it supports it, but it does not diminish the space between the RadListView items ..

01.<Custom:RadListView  ItemTemplate="{StaticResource ListReservationsDataTemplate}">
02.   <Custom:RadListView.ItemStyle>
03.       <Style TargetType="Custom:RadListView">
04.          <Setter Property="Margin" Value="0,0,0,0" />
05.          <Setter Property="Padding" Value="0,0,0,0" />
06.          <Setter Property="MinHeight" Value="20" />
07.          <Setter Property="HorizontalAlignment" Value="Stretch"/>
08.          <Setter Property="VerticalAlignment" Value="Stretch"/>
09.          <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
10.          <Setter Property="VerticalContentAlignment" Value="Stretch"/>
11.          <Setter Property="Background" Value="Blue"></Setter>
12.       </Style>
13.    </Custom:RadListView.ItemStyle>
14.</Custom:RadListView>

[Milenny]

El siguiente código si me apoya, pero no reduce el espacio entre los elementos de RadListView:

<Custom:RadListView x:Name="ReservationsListView" ItemTemplate="{StaticResource ListReservationsDataTemplate}">
     <Custom:RadListView.ItemStyle>
         <Style TargetType="Custom:RadListView">
             <Setter Property="Margin" Value="0,0,0,0" />
             <Setter Property="Padding" Value="0,0,0,0" />
             <Setter Property="MinHeight" Value="20" />
             <Setter Property="HorizontalAlignment" Value="Stretch"/>
             <Setter Property="VerticalAlignment" Value="Stretch"/>
             <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
             <Setter Property="VerticalContentAlignment" Value="Stretch"/>
             <Setter Property="Background" Value="Blue"></Setter>
        </Style>
     </Custom:RadListView.ItemStyle>
 </Custom:RadListView>

[Milenny]

Sorry, I do not know why I've been posted so many times the same message .. and I see no option to eliminate duplicates ..

[Yana]

Hello Milenny,

ItemStyle property targets the RadListViewItem as in the initial snippet - I guess the namespace definition wasn't correct, hence the error you've received.  Please add the following namespace to resolve it:

xmlns:listView="using:Telerik.UI.Xaml.Controls.Data.ListView"

I have attached a small example for a reference.

Regards,
Yana
Progress Telerik

[Milenny]

Thank you very much Yana! ... now if the code that you put me at the beginning worked perfectly ... and you were right, I just needed to define that namespace so that it took the properties of margin and padding indicated .. It was not necessary to review the example ..And thanks again ..Regards..