LayoutAnimation question/problem

How-to Discussions
1

Hello again,

i am trying to build a year changer inside my app. The concept is to have a small rectangle with the year inside and when pressed animate changing it’s width and height so you can change the year. Also i want the user to be able to close/deactivate it when clicking anywhere else on the screen. My problem is that when i click anywhere else it triggers both panel’s and rectangles Handler. Here is the code :


<Page ux:Class="Year">
	<JavaScript File = "year.js"/>
	<DockPanel Width="100%" Height="100%"  HitTestMode="LocalBoundsAndChildren">
		<Panel Height="5%" Dock="Top" Margin="0,40,0,0">
			<Text Value="Choose Starting Year" FontSize="20" Color="White" TextAlignment="Center" />
		</Panel>
		<Panel Width="100%" Height="95%" Dock="Bottom">
			<Panel ux:Name="self" Visibility="Visible" Width="40%" Height="50" Color="#9F9F9F" Opacity="0.5">
				<Text Value="{year}" Alignment="Center" FontSize="25" Color="Black"/>

				<WhileTrue Value="{yearInput}">
					<SwipeGesture Direction="Up" ux:Name="SwipeUp" Length="20"/>
					<Swiped Source="SwipeUp">
						<Callback Handler="{moveUp}"/>
					</Swiped>

					<SwipeGesture Direction="Down" ux:Name="SwipeDown" Length="20"/>
					<Swiped Source="SwipeDown">
						<Callback Handler="{moveDown}"/>
					</Swiped>
					<Change self.Color="#fed166" Duration="0.25"/>
					<Change self.Opacity="1" Duration="0.25"/>
				</WhileTrue>

				<Clicked Handler="{enableYearFiltering}">
					<Set self.Width="70%"/>
					<Set self.Height="25%"/>
					<Set self.Color="#fed166"/>
					<Set self.Opacity="1"/>
				</Clicked>
				<LayoutAnimation>
		            <Resize X="1" Y="1" RelativeTo="LayoutChange" Duration="0.25"/>
		            <Move X="1" Y="1" RelativeTo="LayoutChange" Duration="0.25"/>
		        </LayoutAnimation>
			</Panel>
		</Panel>
		<Clicked Handler="{disableYearFiltering}">
			<!-- <Set self.Width="40%"/>
			<Set self.Height="50"/> -->
		</Clicked>
	</DockPanel>
</Page>

Also, i found on one of the examples the SwipeGestures Up and Down and i used them so i can increase and decrees the year number but that way it changes one number at a swipe… Is there a tutorial or a way to do it and have a continuous change of the numbers ?

Thanks in advance :slight_smile:

2

Anyone ? I would really need some help with that

3

Hi!

Are you able to share the project? Its hard to test to see what you have already done when most of the code is missing from your example :slight_smile:

4

Hello, I managed to solve my problem but I have another question about this. As I described at the end of my first post I want to be able to swipe up and down and increase / decrease a number but I don’t want to increase it by 1 at a time. What I want is the user to be able to as long as he swipes, the number to change. Is there a way to do this ?

5

It’s doable, Idk how. But another suggestion is to design a stepper instead, where the value you can also type a number instead.

So in the middle you have the TextInput and on the sides you have a plus/minus buttons that increase the numbers. I think that may be better. Then perhaps when Fuse implements a Date/Time picker that is native to the OS you’ll be able to use that.

Let me know what you think?

6

Yeah I did that with the plus minus buttons! Okay then I will leave that for a future update of fuse/my app :smiley: thank you very much for your time :slight_smile:

7

No problem happy to help