# How can i make my swipe-left componente reusable? 

**URL:** <https://forums.fusetools.com/t/how-can-i-make-my-swipe-left-componente-reusable/1265>\
**Category:** How-to Discussions\
**Created:** [May 25, 2017, 8:06pm UTC](https://forums.fusetools.com/t/how-can-i-make-my-swipe-left-componente-reusable/1265 "2017-05-25T20:06:44Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![juniortalisson16](https://avatars.discourse-cdn.com/v4/letter/j/ed655f/32.png) [@juniortalisson16](https://forums.fusetools.com/u/juniortalisson16)\
**Post date:** [May 25, 2017, 8:06pm UTC](https://forums.fusetools.com/t/how-can-i-make-my-swipe-left-componente-reusable/1265/1 "2017-05-25T20:06:44Z")

</div>

Hey , i have a list of items and each items have this swipe left animation that i use to remove the current item.

i´m trying to make it reusable , but with a dynamically content.

I tried to use “CONTAINER” with subtree , but it didn´t work.

here is my code:

```
  <StackPanel >
    	<Each Count="2">
    		<Panel>
				<Panel Color="White" Padding="5,10">
					<SwipeGesture ux:Name="swipeLeft" LengthNode="panelNode" Direction="Left" Type="Active" />

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

					<!-- Change [opacity,color] of the panel that has "remove" text -->
					<SwipingAnimation Source="swipeLeft">
						<Change removePanel.Opacity="1" Duration="0.5" />
						<Change removePanel.Color="Red" />
					</SwipingAnimation>

					<!-- dynamically Content goes here-->
					<StackPanel ItemSpacing="4">
						<Text Value="Thisway" TextWrapping="Wrap" Alignment="Left" FontSize="15" Color="Black" />
						<Text Value="Promoção! Sanduiche novo promocional grátis" TextWrapping="Wrap" Alignment="Left" FontSize="14" />
						<Text Value="16/10/2017 ás 14:15" TextWrapping="Wrap" Alignment="Left" FontSize="10" />
					</StackPanel>
					<HorizontalLine Margin="0,0,0,-10" />
					<!-- / dynamically Content-->

				</Panel>

				<!-- remove panel content -->
				<Grid ColumnCount="1" ux:Name="removePanel" Opacity="0">
					<StackPanel ux:Name="panelNode" Orientation="Horizontal" Alignment="CenterRight">
						<Text Value="Remove" Color="White" Alignment="CenterRight" />
					</StackPanel>
				</Grid>

				<!-- Removing the element from list will trigger this -->
				<RemovingAnimation>
					<Move RelativeTo="Size" Y="-1" Duration="0.4" Easing="CircularInOut" />
				</RemovingAnimation>

				<!-- Removing the element from list will trigger this-->
				<LayoutAnimation>
					<Move RelativeTo="LayoutChange" Y="1" Duration="0.8" Easing="CircularInOut" />
				</LayoutAnimation>
			</Panel>
		</Each>
		
    </StackPanel>

```

Any ideias ?

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [May 26, 2017, 12:45pm UTC](https://forums.fusetools.com/t/how-can-i-make-my-swipe-left-componente-reusable/1265/2 "2017-05-26T12:45:48Z")

</div>

Hi juniortalisson16,

have you read about [ux:Property](https://www.fusetools.com/docs/ux-markup/properties) yet?

I would think that doing something similar would solve it for you:

```auto
<Panel ux:Class="MyCustomComponent" Label="Default label value">
    <string ux:Property="Label" />
    <Text Value="{ReadProperty Label}" />
</Panel>

<MyCustomComponent Label="Not the default" />

```