Set of assets showing how to create `ListView` with space between elements

.SpacingBetweenItemsInListView_EditorWindow.cs.md

Set of assets showing how to create ListView with space between elements

Source files with missing meta files that makes them reference each other: https://discussions.unity.com/uploads/short-url/tVRpheCsIGKFpdfuNtjX38zuUfy.zip

Spacing-between-items-in-ListView_Item-Template.uxml

<engine:UXML xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:engine="UnityEngine.UIElements" xmlns:editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
    <Style src="project://database/Assets/SpacingBetweenItemsInListViewV2/Spacing-between-items-in-ListView_Layout-style.uss?fileID=7433441132597879392&amp;guid=dcb05e881e742d146870517ff170d074&amp;type=3#Spacing-between-items-in-ListView_Layout-style" />
    <engine:VisualElement style="flex-grow: 1;">
        <engine:Label text=" text text text text text text text text text text text text text text text text text text text text text" name="selectable" style="-unity-text-align: middle-center; white-space: pre-wrap; font-size: 16px; flex-grow: 1;" />
    </engine:VisualElement>
</engine:UXML>

Spacing-between-items-in-ListView_Layout-style.uss

.unity-list-view__item > VisualElement {
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-left-color: rgb(0, 0, 0);
    border-right-color: rgb(0, 0, 0);
    border-top-color: rgb(0, 0, 0);
    border-bottom-color: rgb(0, 0, 0);
    margin-top: 6px;
    margin-right: 12px;
    margin-bottom: 6px;
    margin-left: 12px;
}

.unity-list-view__item #selectable {
    border-left-color: rgb(77, 77, 77);
    border-right-color: rgb(77, 77, 77);
    border-top-color: rgb(106, 106, 106);
    border-bottom-color: rgba(43, 43, 43, 0.84);
    border-top-width: 3px;
    border-right-width: 2px;
    border-bottom-width: 4px;
    border-left-width: 2px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    min-height: 44px;
}

.unity-list-view__item #selectable:hover {
    background-color: rgba(255, 255, 255, 0.07);
}

.unity-list-view__item:hover {
    background-color: rgba(255, 255, 255, 0);
}

.unity-list-view__item:checked {
    background-color: rgba(0, 0, 0, 0);
}

.unity-list-view__item:checked #selectable {
    background-color: rgba(255, 255, 255, 0.34);
    color: rgb(24, 24, 24);
    border-top-color: rgba(255, 255, 255, 0.89);
    border-right-color: rgba(255, 255, 255, 0.33);
}

Spacing-between-items-in-ListView_Window-Layout.uxml

<engine:UXML xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:engine="UnityEngine.UIElements" xmlns:editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
    <Style src="project://database/Assets/SpacingBetweenItemsInListViewV2/Spacing-between-items-in-ListView_Layout-style.uss?fileID=7433441132597879392&amp;guid=dcb05e881e742d146870517ff170d074&amp;type=3#Spacing-between-items-in-ListView_Layout-style" />
    <engine:ListView item-template="project://database/Assets/SpacingBetweenItemsInListViewV2/Spacing-between-items-in-ListView_Item-Template.uxml?fileID=9197481963319205126&amp;guid=c95ed6b5b0c64eb408b0885185c0f8eb&amp;type=3#Spacing-between-items-in-ListView_Item-Template" virtualization-method="DynamicHeight" binding-source-selection-mode="AutoAssign" style="flex-grow: 1; background-color: rgb(56, 56, 56);" />
</engine:UXML>

SpacingBetweenItemsInListView_EditorWindow.cs

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

public class SpacingBetweenItemsInListView_EditorWindow : EditorWindow
{
    [SerializeField] VisualTreeAsset m_VisualTreeAsset = default;
    const string k_lorem_ipsum = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut ligula feugiat, egestas ante quis, ornare nulla. Cras semper eu felis mattis blandit. Quisque at metus id nibh convallis efficitur. Sed erat diam, porttitor eu est eget, consequat lobortis odio. Aenean sollicitudin, massa eget feugiat ornare, diam nisl venenatis arcu, ut consequat sapien tellus a justo. Nullam id libero vestibulum, tempor leo venenatis, facilisis nisl. Sed molestie urna a euismod maximus. Suspendisse pellentesque, massa vel commodo posuere, ex lorem mattis lacus, a vehicula nunc lectus ac massa. Curabitur hendrerit nisi est, id venenatis felis venenatis vel.";
    static byte[] fakeItemData = new byte[k_lorem_ipsum.Length];

    [MenuItem("Window/UI Toolkit/"+nameof(SpacingBetweenItemsInListView_EditorWindow))]
    public static void ShowExample()
    {
        var window = GetWindow<SpacingBetweenItemsInListView_EditorWindow>();
        window.titleContent = new GUIContent(nameof(SpacingBetweenItemsInListView_EditorWindow));
    }

    public void CreateGUI()
    {
        VisualElement root = rootVisualElement;
        root.Add(m_VisualTreeAsset.Instantiate());
        root.Query<ListView>().ForEach( (list) => {
            list.itemsSource = fakeItemData;
            list.bindItem = (ve,i) => ve.Q<Label>().text = k_lorem_ipsum.Substring( 0 , i+1 );
            list.RegisterCallback<PointerDownEvent>(evt => { if( (evt.target as VisualElement).name!="selectable" ) list.selectedIndex = -1; });
        } );
    }
}