How to show label to appear off the page when using StackLayout - xamarin

Question

I have a gesture to swipe left and I would like the label to appear like it is swiped off the screen.
How does one achieve this with xamarin forms?
For example in the picture below the item selected was "Check the trains schedule London - Paris"
When the item is selected the text appears off the screen. I would like to achieve the same

Answer 1

Create a lovely grid with 2 columns.
EDIT This grid is going to sit inside a horizontal scrollview. This is what makes the trick to go out of the screen possible.
Now if you want to prohibit user from manually scrolling your ScrollView use a custom renderer. But this is not needed in case you want the user to be able to swipe the control left-right, it then acts rather naturally. So in XAML code below you can just use ScrollView instead of controls:DisabledScrollView.
1st column is what you have on the screen.
2nd column is what is hidden out of the screen.
First col width = ScreenSize. Define in code as it can change dynamically on screen rotation.
Second column width - at will. In your case it's small for just this TrashCan icon.
I'm managing it in the OnSize changed event for the grid, the invoked OnSizeChanged_TitleBarMain from XAML:
cNavBarSlider.ColumnDefinitions.Clear();
cNavBarSlider.ColumnDefinitions.Add(
new ColumnDefinition { Width = new GridLength(ScreenWidth, GridUnitType.Absolute) }
);
cNavBarSlider.ColumnDefinitions.Add(
new ColumnDefinition { Width = new GridLength(ScreenWidth - popupSearchOffset, GridUnitType.Absolute) }
);
//reposition scroll if needed (on screen rotation)
if (IsPopupSearchVisible)
{
await cNavBarSlider.TranslateTo(-ScreenWidth + popupSearchOffset, 0, 0, null);
}
Slide this table left-right with TranslateTo, in my case it was:
await cNavBarSlider.TranslateTo(-cTitleBarMain.Width + popupSearchOffset, 0, PopupOptionsTimeIn, Easing.CubicInOut);
Both IconSearch and Cancel hotspots (using hotspots and i want larger area to respond to touch, instead of user trying to tap some small icon or small word) invoke same method:
private bool _tapped;
//-------------------------------------------------------------
private async void OnTapped_SearchIcon(object sender, EventArgs e)
//-------------------------------------------------------------
{
if (_tapped) return;
_tapped = true;
if (!IsPopupSearchVisible) await PopupSearchShow();
else await PopupSearchHide();
_tapped = false;
}
//-------------------------------------------------------------------
public async Task PopupSearchShow()
//-------------------------------------------------------------------
{
await PopupSearchInit();
await cNavBarSlider.TranslateTo(-cTitleBarMain.Width + popupSearchOffset, 0, PopupOptionsTimeIn, Easing.CubicInOut);
IsPopupSearchVisible = true;
ControlSearchEntry.Focus();
}
//-------------------------------------------------------------------
public async Task PopupSearchHide(bool animate = true)
//-------------------------------------------------------------------
{
uint d = PopupOptionsTimeOut;
if (!animate) d = 0;
await cNavBarSlider.TranslateTo(0, 0, d, Easing.CubicInOut);
IsPopupSearchVisible = false;
}
The XAML scheme to play with:
<!-- SWIPE CONTAINER -->
<controls:DisabledScrollView Orientation="Horizontal" VerticalOptions="FillAndExpand">
<Grid
x:Name="cNavBarSlider"
ColumnSpacing="0"
HorizontalOptions="Fill">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- this in on screen, going to swipe -->
<Grid
x:Name="cTitleBarMain"
Grid.Column="0"
SizeChanged="OnSizeChanged_TitleBarMain">
<!-- put ur stuff here -->
</Grid>
<StackLayout
x:Name="cTitleBarSearch"
Grid.Column="1"
Orientation="Horizontal">
<!-- your hidden content to appear put here --!>
<StackLayout>
</Grid>
</controls:DisabledScrollView>
EDIT
Here's your code in list (Android emulator) note you can implement swipes to limit the scrolling coordinates, to make it sticky to bounds:
Listview:
<ListView
x:Name="MainList"
ItemsSource="{Binding Items}"
BackgroundColor="{StaticResource ColorListView}"
HasUnevenRows="False"
RowHeight="40"
HorizontalOptions="FillAndExpand"
IsVisible="{Binding IsOffline, Converter={StaticResource not}}"
ItemSelected="MainList_OnItemSelected"
RefreshCommand="{Binding ForceRefreshCommand}">
<ListView.SeparatorColor>
<OnPlatform
x:TypeArguments="Color"
WinPhone="{StaticResource ListSeparator}"
iOS="{StaticResource ListSeparator}" />
</ListView.SeparatorColor>
<ListView.ItemTemplate>
<DataTemplate>
<appoMobi:CellJessica/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Cell XAML:
<?xml version="1.0" encoding="utf-8" ?>
<ViewCell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="AppoMobi.CellJessica"
x:Name="MyViewCell">
<!-- SWIPE CONTAINER -->
<StackLayout SizeChanged="OnSizeChanged_TitleBarMain" x:Name="cCell" HorizontalOptions="FillAndExpand">
<ScrollView x:Name="scrollView"
Orientation="Horizontal"
VerticalOptions="FillAndExpand">
<Grid x:Name="cNavBarSlider"
ColumnSpacing="0"
HorizontalOptions="Fill">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- this in on screen, going to swipe -->
<Grid
x:Name="cTitleBarMain"
Grid.Column="0">
<!-- put ur stuff here -->
<Label x:Name="txtLabel" TextColor="Black" />
</Grid>
<StackLayout
x:Name="cTitleBarSearch"
Grid.Column="1"
Orientation="Horizontal">
<Image Source="cake" HeightRequest="35" WidthRequest="35" VerticalOptions="Center" HorizontalOptions="Start" />
</StackLayout>
</Grid>
</ScrollView>
</StackLayout>
</ViewCell>
Cell Code:
public partial class CellJessica
{
public CellJessica()
{
InitializeComponent();
}
//-------------------------------------------------------------
protected override void OnBindingContextChanged()
//-------------------------------------------------------------
{
SetupCell();
base.OnBindingContextChanged();
}
private bool first_setup = true;
//-------------------------------------------------------------
public void SetupCell()
//-------------------------------------------------------------
{
var item = BindingContext as CSalonListItemEx;
if (item == null) return;
txtLabel.Text = item.Name;
}
private bool _titlebar_changingsize = false;
private double popupSearchOffset = 0;
//-------------------------------------------------------------------
private async void OnSizeChanged_TitleBarMain(object sender, EventArgs e)
//-------------------------------------------------------------------
{
if (_titlebar_changingsize) return;
_titlebar_changingsize = true;
cNavBarSlider.ColumnDefinitions.Clear();
cNavBarSlider.ColumnDefinitions.Add(
new ColumnDefinition { Width = new GridLength(cCell.Width, GridUnitType.Absolute) }
);
cNavBarSlider.ColumnDefinitions.Add(
//new ColumnDefinition { Width = new GridLength(cCell.Width - popupSearchOffset, GridUnitType.Absolute) }
new ColumnDefinition { Width = new GridLength(40, GridUnitType.Absolute) }
);
//todo
//reposition scroll if rotated when hidden barea is shown
//if (IsPopupSearchVisible)
//{
// await cNavBarSlider.TranslateTo(-cCell.Width + 40, 0, 0, null);
//}
_titlebar_changingsize = false;
}
}