I would like to be able to react to a gesture on a visual element that was not visible when the gesture started.
The following code creates two rectangles, but one of them is Collapsed when the app starts running.
<App>
<Rectangle ux:Name="pop-up" Color="Red" Height="70%" Margin="50" Visibility="Collapsed">
<Text Alignment="Center" Color="White" FontSize="22">Pop-Up</Text>
<WhilePressed>
<Change pop-up.Color="Green"/>
</WhilePressed>
</Rectangle>
<Rectangle ux:Name="rectangle" Color="Blue" Height="80%" Margin="20">
<Text Alignment="Center" Color="White" FontSize="20">Click!</Text>
<WhilePressed>
<Change rectangle.Color="Black"/>
</WhilePressed>
<LongPressed>
<Set pop-up.Visibility="Visible"/>
</LongPressed>
</Rectangle>
</App>
As we can see on the code there are two rectangles, one colored as blue and another one as red but hidden. When the blue rectangle is pressed, its color is changed to black and after a LongPressed the red rectangle is shown. And finally when the red rectangle is pressed, it is changed to green.
If you run the program and tap the center of the blue rectangle, you will see that it is changed to black, and after some seconds the red rectangle appears and if you continue pressing even though now you are pressing on the red rectangle, the blue rectangle will remain as black and even though the red rectangle is listening for the pressed event, its color is not changed to green until you stop pressing and press again but now on the red box.
Is there any way to change this behavior? I would like to stop triggering the WhilePressed on the first box once the second box appears and at the same time trigger the WhilePressed event on the second box without needing to stop pressing and start pressing again.
Regards
Hi!
This behavior isn’t easy to get out of the box since you would need to trigger a new input event to get the hittesting reevaluated. Could you explain some more about your use-case? There might be a better way to get you desired result which doesn’t involve this special case.
I am programming a pictures gallery and I would like to have a screen that appears, when the user press for a long period of time any of the pictures of the gallery, showing some more options with buttons. And the special behavior I would love to get is that once the user released the finger from the screen, the screen that has appeared before just disappeared. So, in order to select any of the options on the pup-up windows, the user should slide its finger to the desired button.
Thank you for your help
This can be done by simpler mechanisms 
Here is an example i made: It uses a normal WhilePressed to show the context panel with a Delay of 1.5 seconds. That panel has 3 buttons, each with a Released trigger which i’ve just added some DebugActions to for testing purposes.
<App>
<Panel>
<Panel Margin="80,120" Color="#f08080">
<WhilePressed>
<Change showContext.Value="true" Delay="1.5" />
</WhilePressed>
<WhileTrue ux:Name="showContext">
<Grid ColumnCount="3" Color="Blue" Height="35%" Alignment="Bottom">
<Panel Color="#f003">
<Text Value="opt1" Color="#fff" Alignment="Center"/>
<Released>
<DebugAction Message="Selected option 1" />
</Released>
</Panel>
<Panel Color="#0f03">
<Text Value="opt2" Color="#fff" Alignment="Center"/>
<Released>
<DebugAction Message="Selected option 2" />
</Released>
</Panel>
<Panel Color="#00f3">
<Text Value="opt3" Color="#fff" Alignment="Center"/>
<Released>
<DebugAction Message="Selected option 3" />
</Released>
</Panel>
</Grid>
</WhileTrue>
</Panel>
</Panel>
</App>
I hope this was what you were looking for. Otherwise, please let me know.
Thanks Kristian,
This is almost what I was looking for. The problem is that if then I want to combine this with a ScrollView, it doesn’t work because of the scrolling.
I just made some changes to your code in order to show the problem.
<App>
<ScrollView>
<Panel ux:Class="Test1" Margin="1" Color="#f08080">
<WhilePressed>
<Change showContext.Value="true" Delay="1.5" />
</WhilePressed>
<WhileTrue ux:Name="showContext">
<Grid RowCount="3" Color="Blue" Height="35%" Alignment="Bottom">
<Panel Color="#f003">
<Text Value="opt1" Color="#fff" Alignment="Center"/>
<Released>
<DebugAction Message="Selected option 1" />
</Released>
</Panel>
<Panel Color="#0f03">
<Text Value="opt2" Color="#fff" Alignment="Center"/>
<Released>
<DebugAction Message="Selected option 2" />
</Released>
</Panel>
<Panel Color="#00f3">
<Text Value="opt3" Color="#fff" Alignment="Center"/>
<Released>
<DebugAction Message="Selected option 3" />
</Released>
</Panel>
</Grid>
</WhileTrue>
</Panel>
<Grid ColumnCount="3">
<Each Count="50">
<Test1 Height="200"/>
</Each>
</Grid>
</ScrollView>
</App>
Thanks for your help.
Hi again!
This can be done by disabling the user scrolling while the panel is visible using the UserScroll property. Unfortunately the current version has a bug which causes this not to work correctly when the user is already scrolling while the change happens, but it will be fixed in the next version. Sorry about the inconvenience.
Here is the code that will work in that version:
<App>
<ScrollView ux:Name="sw">
<Panel ux:InnerClass="Test1" Margin="1" Color="#f00080">
<WhilePressed>
<Change showContext.Value="true" Delay="1.5" />
</WhilePressed>
<WhileTrue ux:Name="showContext">
<Change sw.UserScroll="false" Delay="1.5" />
<Grid RowCount="3" Color="Blue" Height="35%" Alignment="Bottom">
<Panel Color="#f003">
<Text Value="opt1" Color="#fff" Alignment="Center"/>
<Released>
<DebugAction Message="Selected option 1" />
</Released>
</Panel>
<Panel Color="#0f03">
<Text Value="opt2" Color="#fff" Alignment="Center"/>
<Released>
<DebugAction Message="Selected option 2" />
</Released>
</Panel>
<Panel Color="#00f3">
<Text Value="opt3" Color="#fff" Alignment="Center"/>
<Released>
<DebugAction Message="Selected option 3" />
</Released>
</Panel>
</Grid>
</WhileTrue>
</Panel>
<Grid ColumnCount="3">
<Each Count="50">
<Test1 Height="200"/>
</Each>
</Grid>
</ScrollView>
</App>
Kristian,
Thank you so much for all your support.
Will this be fixed on next release? I mean on version 0.24?
Is there any workaround I can use in the meantime?
And finally, can you please report a bug from this thread an notify once it is solved?
Regards
Hey!
Yes that should be 0.24. Since this is already fixed there should be no need to report it as a bug. Unfortunately i’m not aware of any work-around until this is released, unless you can slightly modify your design (like doubble tap to reveal options or something like that).
Hey Kristian,
I am back again.
Thanks for responding again!
I am almost done and just waiting for the next release, however I have found a similar issue to the one with the ScrollView, but in this case with PageControl.
If the list of elements that will trigger the context menu is in a Page that belongs to a PageControl with SwipeNavigation enabled, once the Pop-Up appears, the Swipe gesture must be disabled in order to prevent unintentional swiping, since the idea is that the user will slide its finger to the desired option.
So, in order to disable the SwipeNavigation I have tried changing the property Interaction but it seems like something is going wrong because somehow all the input events are listened just by the pressed item from the list (gallery) that triggered the LongPressed event. In fact, once the Pop-Up window is hidden, it is not possible to select another item unless one first tries to swipe the pages.
Here is the code I prepared to reproduce the issue described, I made some changes to the previous code in order to show better what I want to achieve.
<App>
<PageControl ux:Name="pageControl" Active="Page1">
<Page ux:Name="Page1">
<Panel ux:Name="galleryDetails" Visibility="Collapsed">
<Grid Rows="1*,auto" Height="70%" Margin="20">
<Panel Color="#f08080"/>
<Grid ColumnCount="3" Color="Blue" Height="45" Width="100%" Alignment="Center">
<Panel Color="#f003">
<Text Value="opt1" Color="#fff" Alignment="Center"/>
<Released>
<DebugAction Message="Selected option 1" />
</Released>
</Panel>
<Panel Color="#0f03">
<Text Value="opt2" Color="#fff" Alignment="Center"/>
<Released>
<DebugAction Message="Selected option 2" />
</Released>
</Panel>
<Panel Color="#00f3">
<Text Value="opt3" Color="#fff" Alignment="Center"/>
<Released>
<DebugAction Message="Selected option 3" />
</Released>
</Panel>
</Grid>
</Grid>
<Panel Color="Black" Opacity="0.7"/>
<Released>
<Set pageControl.Interaction="Swipe"/>
<Set galleryDetails.Visibility="Collapsed"/>
</Released>
</Panel>
<ScrollView ux:Name="scroll" UserScroll="false">
<Panel ux:InnerClass="Item" ux:Name="item" Margin="1" Color="#f08080" HitTestMode="{hitTestMode}">
<Panel ux:Name="content" Color="#f08080"/>
<Panel Color="Black"/>
<LongPressed>
<!--Change Target="scroll.UserScroll" Value="false"/-->
<Set pageControl.Interaction="None"/>
<Set galleryDetails.Visibility="Visible"/>
</LongPressed>
<WhilePressed>
<Change content.Opacity="0.6" />
</WhilePressed>
<Released>
<Set pageControl.Interaction="Swipe"/>
<Set galleryDetails.Visibility="Collapsed"/>
</Released>
</Panel>
<Grid ColumnCount="3">
<Each Count="50">
<Item Height="200"/>
</Each>
</Grid>
</ScrollView>
</Page>
<Page ux:Name="Page2">
<Text FontSize="22" TextColor="Blue">Page2</Text>
</Page>
</PageControl>
</App>
Regards
Hey!
Finally I got it working and on current version 0.23.
The trick was to use the property IsEnabled for both ScrollView and PageControl
Here the code in case somebody else needed it.
<App>
<JavaScript>
var Observable = require("FuseJS/Observable");
var allowInteraction = Observable(true);
function enableInteraction(){
allowInteraction.value = true;
}
function disableinteraction(){
allowInteraction.value = false;
}
module.exports = {
allowInteraction: allowInteraction,
enableInteraction: enableInteraction,
disableinteraction: disableinteraction
}
</JavaScript>
<PageControl ux:Name="pageControl" Active="Page1">
<Page ux:Name="Page1">
<Panel ux:Name="galleryDetails" Visibility="Collapsed">
<Grid Rows="1*,auto" Height="70%" Margin="20">
<Panel Color="#f08080"/>
<Grid ColumnCount="3" Color="Blue" Height="45" Width="100%" Alignment="Center">
<Panel Color="#f003">
<Text Value="opt1" Color="#fff" Alignment="Center"/>
<Released>
<DebugAction Message="Selected option 1" />
</Released>
</Panel>
<Panel Color="#0f03">
<Text Value="opt2" Color="#fff" Alignment="Center"/>
<Released>
<DebugAction Message="Selected option 2" />
</Released>
</Panel>
<Panel Color="#00f3">
<Text Value="opt3" Color="#fff" Alignment="Center"/>
<Released>
<DebugAction Message="Selected option 3" />
</Released>
</Panel>
</Grid>
</Grid>
<Panel Color="Black" Opacity="0.7"/>
<Released>
<Set pageControl.Interaction="Swipe"/>
<Set galleryDetails.Visibility="Collapsed"/>
<Callback Handler="{enableInteraction}"/>
</Released>
</Panel>
<ScrollView ux:Name="scroll" IsEnabled="{allowInteraction}">
<Panel ux:InnerClass="Item" ux:Name="item" Margin="1" Color="#f08080" IsEnabled="{allowInteraction}">
<Panel ux:Name="content" Color="#f08080"/>
<Panel Color="Black"/>
<LongPressed>
<Set pageControl.Interaction="None"/>
<Set galleryDetails.Visibility="Visible"/>
<Callback Handler="{disableinteraction}"/>
</LongPressed>
<WhilePressed>
<Change content.Opacity="0.6" />
</WhilePressed>
<Released>
<Set pageControl.Interaction="Swipe"/>
<Set galleryDetails.Visibility="Collapsed"/>
<Callback Handler="{enableInteraction}"/>
</Released>
</Panel>
<Grid ColumnCount="3">
<Each Count="50">
<Item Height="200"/>
</Each>
</Grid>
</ScrollView>
</Page>
<Page ux:Name="Page2">
<Text FontSize="22" TextColor="Blue">Page2</Text>
</Page>
</PageControl>
</App>
Regards
Really cool 
I’ll mark this post as resolved then.
