PuppyClient/Assets/Resources/Shopping/ShoppingUI.uxml

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
    <ui:Template name="Item" src="project://database/Assets/Resources/Shopping/Item.uxml?fileID=9197481963319205126&amp;guid=5d71c80e9fb549247af109cdc4fd0912&amp;type=3#Item" />
    <ui:Template name="back button" src="project://database/Assets/Resources/Status/backButton.uxml?fileID=9197481963319205126&amp;guid=fc166ff6c7f7d9a42be9ebce47e4f497&amp;type=3#backButton" />
    <ui:Template name="msgRoot" src="project://database/Assets/Resources/Shopping/msgRoot.uxml?fileID=9197481963319205126&amp;guid=de4effe0670cb7f40a46a8ad65fc7f3c&amp;type=3#msgRoot" />
    <Style src="project://database/Assets/Resources/Status/StatusStyle.uss?fileID=7433441132597879392&amp;guid=21d236151b567a34aafb4dd11ce02947&amp;type=3#StatusStyle" />
    <Style src="project://database/Assets/Resources/Shopping/ShoppingUI.uss?fileID=7433441132597879392&amp;guid=2061d71fe2582bb40b712ea028ae8eea&amp;type=3#ShoppingUI" />
    <ui:VisualElement name="root" class="background" style="flex-grow: 1; align-self: auto; justify-content: flex-start; visibility: visible; display: flex; background-image: url(&quot;project://database/Assets/Pictures/shop%20background.jpg?fileID=2800000&amp;guid=3389a3b2e365eca4a92ebed915cae6f8&amp;type=3#shop background&quot;);">
        <ui:VisualElement name="coinArea" style="flex-grow: initial; align-self: flex-end; align-items: flex-end; flex-direction: row-reverse; justify-content: flex-start; margin-top: 5px; overflow: visible; opacity: 1; background-color: rgb(255, 255, 255); right: 10px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px;">
            <ui:Label tabindex="-1" text="coin qty" parse-escape-sequences="true" display-tooltip-when-elided="true" name="coinQty" style="height: 22px; width: auto; -unity-font-style: bold; -unity-font: url(&quot;project://database/Assets/Font/MaoKenZhuYuanTi-MaokenZhuyuanTi-2.ttf?fileID=12800000&amp;guid=50a63638b44907e46a3fa871d63b7d39&amp;type=3#MaoKenZhuYuanTi-MaokenZhuyuanTi-2&quot;); color: rgb(237, 190, 38); -unity-text-align: middle-center; margin-top: 0; margin-right: 20px; margin-bottom: 0; margin-left: 20px; padding-top: 2px; padding-right: 0; padding-bottom: 0; padding-left: 0;" />
            <ui:VisualElement name="coin" style="flex-grow: 1; background-image: url(&quot;project://database/Assets/Packages/2D%20Casual%20UI/Sprite/GUI.png?fileID=21300042&amp;guid=1eaee135ce037439d925cee5e41ce026&amp;type=3#GUI_21&quot;); width: 22px; height: 22px;" />
        </ui:VisualElement>
        <ui:VisualElement name="mainManu" style="flex-grow: initial; flex-direction: row; height: auto; width: 90%; margin-top: 5px; margin-bottom: 3px; justify-content: space-around; align-items: flex-start; min-height: auto; flex-shrink: initial;">
            <ui:Button text="Food" name="food" class="MainManuButton" style="background-color: rgba(60, 255, 155, 0.71);" />
            <ui:Button text="Toy" parse-escape-sequences="true" display-tooltip-when-elided="true" name="toy" class="MainManuButton" style="background-color: rgba(255, 85, 85, 0.71);" />
            <ui:Button text="Others" parse-escape-sequences="true" display-tooltip-when-elided="true" name="other" class="MainManuButton" style="background-color: rgba(30, 91, 174, 0.71);" />
        </ui:VisualElement>
        <ui:ScrollView name="itemListView" horizontal-scroller-visibility="Hidden" mode="Vertical" vertical-scroller-visibility="Hidden" touch-scroll-type="Elastic" style="width: 96%; margin-top: 10px; margin-bottom: 5px; background-color: rgba(60, 255, 155, 0.71); border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; align-items: flex-start; align-self: center; max-height: 70%;">
            <ui:Instance template="Item" />
        </ui:ScrollView>
        <ui:Instance template="back button" name="backButton" style="position: absolute; bottom: 2%;" />
    </ui:VisualElement>
    <ui:Instance template="msgRoot" name="msgRoot" enabled="true" style="position: absolute; width: 100%; height: 100%; opacity: 1; display: flex; visibility: hidden;" />
</ui:UXML>