Using an ux element as parameter

Hey Folks,
I want to create an element called “SwipeableItem” for my Listviews. In this class i define the left and right swipe gesture and the callbacks via userevents. But i’m struggling with inserting the “item” because of two reasons.
- when defining a background in the SwipeableItem it overlays the real item because of the way a panel works. (see code below)
- i can’t define a swiping animation for the item based on the predefined swipe gesture in my SwipeableItem. (also see code below)
So the main solution i came up with is to use the item as an parameter for the newly created ux-element and to predefine everything else. So i can simply insert my item in the element.
My question so far:

  • Is there a way to use an element in ux as parameter for another one?

The Swipeable Item is based on this fuse example: https://www.fusetools.com/examples/inbox

My Code so far:

SwipeableItem.ux:

<Panel ux:Class="SwipeableItem" ux:Name="swipeableItem">
	<!-- DEFINING SWIPINGS HERE --> 
	<SwipeGesture ux:Name="swipeLeft" LengthNode="swipeableItem" Direction="Left" Type="Active" />

	<SwipingAnimation Source="swipeLeft">
		<Set deleteText.Opacity="1" />
		<Set deleteIcon.Opacity="1" />
		<Change background.Color="SwipeDeleteBackground" Easing="ExponentialOut" />
		<Scale Target="deleteIcon" Factor="2.8" Easing="BackOut" />
	</SwipingAnimation>

	<Swiped Source="swipeLeft">
		<Callback Handler="{removeItem}" />
	</Swiped>

	<!-- ITEM WILL BE INSERTED HERE -->

	<!-- BACKGROUND TEXTS AND ICONS  --> 
	<Operation ux:Name="deleteText">Delete</Operation>
	<Icon ux:Name="deleteIcon" Alignment="CenterRight" File="../Resources/Assets/Icons/trash.png" />

	<!-- THE BACKGROUND --> 
	<Rectangle>
		<SolidColor ux:Name="background" Color="#fff0" />
	</Rectangle>

	<!-- ANIMATIONS FOR LIST HANDLING --> 
	<RemovingAnimation>
		<Move RelativeTo="Size" X="-1.2" Duration="0.4" Easing="CircularInOut" />
	</RemovingAnimation>

	<AddingAnimation>
		<Move RelativeTo="Size" X="-1" Duration="0.5" Easing="CircularInOut" />
	</AddingAnimation>

	<LayoutAnimation>
		<Move RelativeTo="LayoutChange" Y="1" Duration="0.2" Easing="CircularInOut" />
	</LayoutAnimation>

	<WhilePressed>
		<Scale Factor="0.98" Duration="0.1" Easing="QuadraticOut" />
	</WhilePressed>

</Panel>

My Item:

<Panel Background="#fff" ux:Name="item">

	<SwipingAnimation Source="swipeLeft">
		<Move X="-1.2" RelativeTo="Size"/>
	</SwipingAnimation>

	<Rectangle CornerRadius="3" Margin="0,3">
		<Stroke Width="1" Color="OutlineStrokeColor" />
			
		<SOMEUIHERE />
						
		<Clicked>
			<Callback Handler="{SOMEMETHODHERE}" />
		</Clicked>

	</Rectangle>
</Panel>

What i tried till now:

<SwipeableItem>
	<MyItemHere />
</SwipeableItem>

This won’t work, cause my Item has a SwipingAnimation defined that reacts to the the SwipingGesture called “swipeLeft” in my SwipeableItem. Commenting this part out it shows at least my items in the list but the background defined in the SwipingGestures lays over my item. So i want to insert my Item as an Parameter in the SwipeableItem.

Hi, have you looked at the <Container> class?

https://www.fusetools.com/docs/fuse/controls/container

Hey, <Container> did the trick for now, thanks! The only problem left is that i can’t define a swipe animation for the item before it gets in the container. But for my purpose it is enough to define this animations only once in the Container instead of the item.

I’ll post the code when i successfully finished to encapsulate the SwipeableItem with configurations!

Finished refactoring my code! My results:

The swipeable Item:

<Container ux:Class="SwipeableItem" ux:Name="swipeableItem" Subtree="itemPanel" AllowRightSwipe="false" AllowLeftSwipe="false" RightBackgroundText="Right Swipe" LeftBackgroundText="Left Swipe" RightBackgroundColor="#0F0" LeftBackgroundColor="#F00" RightIcon="checkmark" LeftIcon="trash">

	<bool ux:Property="AllowRightSwipe"/>
	<bool ux:Property="AllowLeftSwipe"/>

	<string ux:Property="RightBackgroundText"/>
	<string ux:Property="LeftBackgroundText"/>

	<float4 ux:Property="RightBackgroundColor"/>
	<float4 ux:Property="LeftBackgroundColor"/>

	<FileImageSource ux:Property="RightIcon" />
	<FileImageSource ux:Property="LeftIcon" />

	<UserEvent ux:Name="rightSwiped" />
	<UserEvent ux:Name="leftSwiped" />
	<UserEvent ux:Name="itemClicked" />

	<!-- Right swipe events -->
	<WhileTrue Value="{Property swipeableItem.AllowRightSwipe}">

		<SwipeGesture ux:Name="swipeRight" LengthNode="swipeableItem" Direction="Right" Type="Active" />

		<SwipingAnimation Source="swipeRight">
			<Set leftText.Opacity="0" />
			<Set rightText.Opacity="1" />
			<Set leftIcon.Opacity="0" />	
			<Set rightIcon.Opacity="1" />
			<Change background.Color="{Property swipeableItem.RightBackgroundColor}" Easing="ExponentialOut" />
			<Scale Target="rightIcon" Factor="2.8" Easing="BackOut" />
		</SwipingAnimation>

		<Swiped Source="swipeRight">
			<RaiseUserEvent EventName="rightSwiped" />
		</Swiped>

	</WhileTrue>
	
	<!-- Left swipe events -->
	<WhileTrue Value="{Property swipeableItem.AllowLeftSwipe}">

		<SwipeGesture ux:Name="swipeLeft" LengthNode="swipeableItem" Direction="Left" Type="Active" />

		<SwipingAnimation Source="swipeLeft">
			<Set leftText.Opacity="1" />
			<Set rightText.Opacity="0" />
			<Set leftIcon.Opacity="1" />	
			<Set rightIcon.Opacity="0" />
			<Change background.Color="{Property swipeableItem.LeftBackgroundColor}" Easing="ExponentialOut" />
			<Scale Target="leftIcon" Factor="2.8" Easing="BackOut" />
		</SwipingAnimation>

		<Swiped Source="swipeLeft">
			<RaiseUserEvent EventName="leftSwiped" />
		</Swiped>

	</WhileTrue>

	<!-- ITEM THAT GETS PLACED IN THE CONTAINER --> 
	<Panel ux:Binding="Children">

		<Panel ux:Name="itemPanel">

			<WhileTrue Value="{Property swipeableItem.AllowRightSwipe}">
				<SwipingAnimation Source="swipeRight">
					<Move Target="itemPanel" X="1" RelativeTo="Size"/>
				</SwipingAnimation>
			</WhileTrue>
			
			<WhileTrue Value="{Property swipeableItem.AllowLeftSwipe}">
				<SwipingAnimation Source="swipeLeft">
					<Move Target="itemPanel" X="-1" RelativeTo="Size"/>
				</SwipingAnimation>
			</WhileTrue>

			<Clicked>
				<RaiseUserEvent EventName="itemClicked" />
			</Clicked>

			<Pressed>
				<Scale Factor="0.98" Duration="0.1" Easing="QuadraticOut" />
			</Pressed>
			
		</Panel>

		<!-- BACKGROUND TEXTS AND ICONS  --> 
		<Text ux:Class="SwipeableItemBackgroundText" TextAlignment="Center" Alignment="Center" Color="#fff" FontSize="22" />

		<SwipeableItemBackgroundText ux:Name="rightText" Value="{Property swipeableItem.RightBackgroundText}" />
		<SwipeableItemBackgroundText ux:Name="leftText" Value="{Property swipeableItem.LeftBackgroundText}" />

		<Icon ux:Name="rightIcon" Alignment="CenterLeft" Source="{Property swipeableItem.RightIcon}" />
		<Icon ux:Name="leftIcon" Alignment="CenterRight" Source="{Property swipeableItem.LeftIcon}" />

		<!-- THE BACKGROUND --> 
		<Rectangle CornerRadius="3" Margin="0,1">
			<SolidColor ux:Name="background" Color="#fff" />
		</Rectangle>

	</Panel>

</Container>

How to use it:

<SwipeableItem AllowLeftSwipe="true" LeftBackgroundText="delete" LeftBackgroundColor="SwipeDeleteBackground" LeftIcon="trash" >

	<Panel Background="#fff" ux:Name="item" >

		<!-- UI STUFF HERE -->
		
	</Panel>

	<!-- Define UserEventsHere --> 
	<OnUserEvent EventName="leftSwiped">
		<Callback Handler="{removeItem}" />
	</OnUserEvent>

	<OnUserEvent EventName="itemClicked">
		<Callback Handler="{showDetails}" />
	</OnUserEvent>

	<!-- define animations here -->
	<RemovingAnimation>
		<Move RelativeTo="Size" X="-1.2" Duration="0.4" Easing="CircularInOut" />
	</RemovingAnimation>

	<AddingAnimation>
		<Move RelativeTo="Size" X="-1" Duration="0.5" Easing="CircularInOut" />
	</AddingAnimation>

	<LayoutAnimation>
		<Move RelativeTo="LayoutChange" Y="1" Duration="0.2" Easing="CircularInOut" />
	</LayoutAnimation>

</SwipeableItem>