LayoutAnimation question/problem

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 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}"/>

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

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

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:

Anyone ? I would really need some help with that


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:

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 ?

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?

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:

No problem happy to help