How can i make my swipe-left componente reusable?

How-to Discussions
1

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 ?

2

Hi juniortalisson16,

have you read about ux:Property yet?

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

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

<MyCustomComponent Label="Not the default" />