Hi Uldis, thanks for you answer.
Regarding the first question, I couldn’t find an example in any app I’ve tried, usually you get one of the types I describe, or you swipe all the way or just the lenght enough to show the options.
But it is a requirement in the app I’m implementing (though it doesn’t make much sense) so I had to ask.
Regarding the second question, I already read the stuff about SwipeGestures and I still couldn’t implement the behaviour I described and that’s why I asked. The minimal reproduction I can show you is similar to the example I referred.
<App Background="#fff">
<DockPanel ux:Name="appDock">
<StackPanel Dock="Top" Background="#79f">
<StatusBarBackground />
<Fuse.iOS.StatusBarConfig Style="Light" />
<Panel>
<Text Value="Inbox" TextAlignment="Center" Color="#fff" FontSize="24" Margin="0,10,0,5" />
</Panel>
</StackPanel>
<BottomBarBackground Dock="Bottom" />
<ScrollView>
<StackPanel>
<Each Items="{messages}">
<Panel>
<Rectangle>
<Stroke Offset="4" Width="1" Color="Black" />
</Rectangle>
<SwipeGesture ux:Name="swipeLeft" LengthNode="appDock" Direction="Left" Type="Active" Length="200"/>
<SwipeGesture ux:Name="swipeAllLeft" LengthNode="appDock" Direction="Left" Type="Active"/>
<!-- Left swipe events -->
<SwipingAnimation Source="swipeLeft">
<Set postponeIcon.Opacity="1"/>
<Scale Target="postponeIcon" Factor="1.8" Easing="BackOut"/>
</SwipingAnimation>
<Swiped Source="swipeAllLeft">
<Callback Handler="{removeItem}" />
</Swiped>
<Panel Background="#fff" ux:Name="contents">
<SwipingAnimation Source="swipeLeft">
<Move X="-0.2" RelativeTo="Size"/>
</SwipingAnimation>
<SwipingAnimation Source="swipeAllLeft">
<Move X="-1" RelativeTo="Size"/>
</SwipingAnimation>
<DockPanel Margin="7,1,7,0">
<StackPanel Margin="7,3,7,7">
<Text Value="{subject}" FontSize="16" />
<Text Value="{sender}" FontSize="16" Color="#999" />
<Text TextWrapping="Wrap" Value="{summary}" FontSize="14" Color="#000" />
</StackPanel>
</DockPanel>
</Panel>
<Text ux:Class="Operation" TextAlignment="Center" Alignment="Center"
Color="#fff" FontSize="22" />
<Operation ux:Name="postponeText">Removed</Operation>
<Rectangle ux:Name="postponeIcon" Width="15" Height="15" Margin="30" Alignment="CenterRight">
<SolidColor Color="Black"/>
<Text Value="R" Alignment="Center" Color="White" FontSize="10"/>
<Clicked>
<Callback Handler="{removeItem}"/>
</Clicked>
</Rectangle>
<Rectangle>
<SolidColor ux:Name="background" Color="#eb0" />
</Rectangle>
<!-- Animations -->
<RemovingAnimation>
<Move RelativeTo="Size" Y="-1" Duration="0.4" Easing="CircularInOut" />
</RemovingAnimation>
<LayoutAnimation>
<Move RelativeTo="LayoutChange" Y="1" Duration="0.8" Easing="CircularInOut" />
</LayoutAnimation>
</Panel>
</Each>
</StackPanel>
</ScrollView>
</DockPanel>
<JavaScript>
var Observable = require("FuseJS/Observable");
function Message(sender, subject, summary) {
this.sender = sender;
this.subject = subject;
this.summary = summary;
}
var messages = Observable(
new Message("santa@claus.northpole", "Rumours have it you've been bad", "I heard you went to school without doing your homework."),
new Message("gina@hotmail.com", "Running late for dinner", "Sorry, babes, I am running a little late tonight, can you just start without me?"),
new Message("john@wayne.no", "Hello, pardaner", "I just got shot up bad at the Wounded Knee. I took a bullet to the knee."),
new Message("compulsive@liar.net", "EVERYWHERE!", "I'm telling you, there were penguins everywhere. As far as the eye could see."),
new Message("santa@claus.northpole", "Rumours have it you've been bad", "I heard you went to school without doing your homework."),
new Message("gina@hotmail.com", "Running late for dinner", "Sorry, babes, I am running a little late tonight, can you just start without me?"),
new Message("john@wayne.no", "Hello, pardaner", "I just got shot up bad at the Wounded Knee. I took a bullet to the knee."),
new Message("compulsive@liar.net", "EVERYWHERE!", "I'm telling you, there were penguins everywhere. As far as the eye could see."),
new Message("santa@claus.northpole", "Rumours have it you've been bad", "I heard you went to school without doing your homework."),
new Message("gina@hotmail.com", "Running late for dinner", "Sorry, babes, I am running a little late tonight, can you just start without me?"),
new Message("john@wayne.no", "Hello, pardaner", "I just got shot up bad at the Wounded Knee. I took a bullet to the knee."),
new Message("compulsive@liar.net", "EVERYWHERE!", "I'm telling you, there were penguins everywhere. As far as the eye could see."),
new Message("santa@claus.northpole", "Rumours have it you've been bad", "I heard you went to school without doing your homework."),
new Message("gina@hotmail.com", "Running late for dinner", "Sorry, babes, I am running a little late tonight, can you just start without me?"),
new Message("john@wayne.no", "Hello, pardaner", "I just got shot up bad at the Wounded Knee. I took a bullet to the knee."),
new Message("compulsive@liar.net", "EVERYWHERE!", "I'm telling you, there were penguins everywhere. As far as the eye could see.")
);
function removeItem(sender) {
messages.remove(sender.data);
}
function postponeItem(sender) {
messages.remove(sender.data);
messages.add(sender.data);
}
module.exports = {
messages: messages,
removeItem: removeItem,
postponeItem: postponeItem
};
</JavaScript>
</App>
My goal is:
- Swipe the first card (it shows the icon to click)
- Swipe the second card (it show the icon to click and the first card goes back to the original position)
Android Example
I could not achieve this with anything on the docs. I might be missing something here.
Thank you again.
