We Keep Coding

Activity Indicator not showing up on android

I have a login screen that I want a activitymonitor to show up when I click the button. But I click the button and it doesn't show not real sure why.
Here is C#
On button click
activityIndicator.IsVisible = true;
WebApiService ws = new WebApiService();
var response = await ws.LoginAsync(Username.Text, Password.Text, UUID);
activityIndicator.IsVisible = false;
if (response.ResultCode == AuthenticationResultCodeEnum.SUCCESS)
{
// do something with the result
}
}
Here is my Xaml
<StackLayout >
<Label x:Name="Version" HeightRequest="50" VerticalTextAlignment="Start" HorizontalTextAlignment="End" Margin="0,30,20,0">
<Label.GestureRecognizers>
<TapGestureRecognizer
Tapped="OnTapGestureRecognizerTapped"
NumberOfTapsRequired="2" />
</Label.GestureRecognizers>
</Label>
<Image Source="LEDShield_Small.png" Margin="0,0,0,30"></Image>
<StackLayout Padding="20,0,20,0">
<Label Text="MI DNR Username" FontAttributes="Bold"></Label>
<Entry x:Name="Username" Placeholder="Username" IsSpellCheckEnabled="False" IsTextPredictionEnabled="False"></Entry>
<Label Text="MI DNR Password" FontAttributes="Bold"></Label>
<Entry x:Name="Password" Placeholder="Password" IsPassword="True"></Entry>
<Button x:Name="SigninButton" Text="Sign In" IsEnabled="False" HeightRequest="50"></Button>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition Height="*" />
<RowDefinition Height="200" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.Column="1" Orientation="Horizontal" HorizontalOptions="End">
<Label x:Name="RememberMeLabel" HeightRequest="10" Margin="0" VerticalTextAlignment="Center" Text="Keep Me Signed In">
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{Binding RememberMeLabelCommand}" />
</Label.GestureRecognizers>
</Label>
<CheckBox HeightRequest="50" VerticalOptions="Center" x:Name="RememberMe" IsChecked="{Binding IsRememberMeChecked}" Color="Green"></CheckBox>
</StackLayout>
<Label Grid.Row="0" Grid.Column="0" Margin="25" Text="Forgot Password" HorizontalOptions="Center" TextDecorations="Underline" >
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" NumberOfTapsRequired="1" />
</Label.GestureRecognizers>
</Label>
</Grid>
</StackLayout>
<Button x:Name="ResetRequestButton" IsVisible="false" Text="This account has been locked. Click here to to send a password reset request."></Button>
<ActivityIndicator IsRunning="true" x:Name="activityIndicator" Color="Green" VerticalOptions="Center" />
</StackLayout>

I use this class for ActivityIndicator:
public class ProgressSplash : Grid, IDisposable
{
public static ProgressSplash Show(Layout<View> parent)
{
return new ProgressSplash(parent);
}
ActivityIndicator ai;
Layout<View> parent;
private ProgressSplash(Layout<View> parent)
{
this.parent = parent;
HorizontalOptions = LayoutOptions.Fill;
VerticalOptions = LayoutOptions.Fill;
BackgroundColor = Color.FromHex("#40000000");
ai = new ActivityIndicator();
ai.HorizontalOptions = Device.RuntimePlatform == Device.UWP ? LayoutOptions.Fill : LayoutOptions.CenterAndExpand;
ai.VerticalOptions = LayoutOptions.CenterAndExpand;
ai.Opacity = 1;
if (parent is Grid)
{
if (((Grid)parent).RowDefinitions.Count > 1)
Grid.SetRowSpan(this, ((Grid)parent).RowDefinitions.Count);
if (((Grid)parent).ColumnDefinitions.Count > 1)
Grid.SetColumnSpan(this, ((Grid)parent).ColumnDefinitions.Count);
}
parent.Children.Add(this);
Children.Add(ai);
ai.IsVisible = true;
ai.IsRunning = true;
}
public void Dispose()
{
ai.IsRunning = false;
ai.IsVisible = false;
if (parent.Children.Contains(this))
parent.Children.Remove(this);
}
}
And there is how to use it:
using (var prc = ProgressSplash.Show(grdMain))
{
// ... do something slow
}
Where "grdMain" is main container on the page, which is Grid (it works with it only).

I'm not sure where ActivityIndicator tries to show, when inside a StackLayout.
Consider using it this way:
<Grid ...>
<StackLayout ...>
...
</StackLayout ...>
<ActivityIndicator x:Name="activityIndicator" IsRunning="False"
...
VerticalOptions="Center" />
</Grid>
In button click:
activityIndicator.IsRunning = true;
EXPLANATION:
The layout is a single-cell grid, with two children laid on top of each other.
First child is your "normal" content, inside a StackLayout.
Second child is ActivityIndicator, initially not running (so not visible).
When you set IsRunning to true, it shows up.
TECH NOTE: The reason to do this with IsRunning instead of IsVisible, is to avoid forcing page to perform a layout. OTOH, I've often done it (and seen it done by others), with code that toggles BOTH IsVisible and IsRunning. So maybe performance is a non-issue.
Regardless, by default it starts IsVisible=true, IsRunning=false, so might as well just toggle IsRunning.

How to do delete button that delete one cell in collection view and row in sqlite in xamarin?

How to delete cell in collection view and row in sqlite?
I need to get from collection view primary key and i dont know how.
I want to have delete button on every view cell.
I have ended up with this:
public void RemovePlane()
{
var db = new SQLiteConnection(_dbPath);
db.Delete<Airplane>();
}
xaml:
<CollectionView x:Name="myCollectionView" Grid.Row="0" SelectedItem="{Binding selectedPlane}">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Margin="0">
<Frame Padding="0" BackgroundColor="#00d2ff" Margin="0, 65, 0, 0" CornerRadius="30">
<StackLayout Padding="20">
<Label Text="{Binding Airline}" TextColor ="White" FontSize="30" HorizontalOptions="Center"/>
<Image Source="{Binding ThumbnailUrl}" HeightRequest="200"/>
<Label Text="{Binding Plane, StringFormat='Plane: {0}'}" TextColor ="White" FontSize="15"/>
<Label Text="{Binding Airline, StringFormat='Airline: {0}'}" TextColor ="White" FontSize="15"/>
<Label Text="{Binding Livery, StringFormat='Livery: {0}'}" TextColor ="White" FontSize="15"/>
<Label Text="{Binding Registration, StringFormat='Reg: {0}'}" TextColor ="White" FontSize="15"/>
<Label Text="{Binding Airport, StringFormat='Airport: {0}'}" TextColor ="White" FontSize="15"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0">
<Label Text="{Binding Date, StringFormat='Date: {0}'}" TextColor ="White" FontSize="15"/>
<Label Text="{Binding Comment, StringFormat='Comment: {0}'}" TextColor ="White" FontSize="15"/>
</StackLayout>
<Button Text="Delete" CornerRadius="30" Margin="10, 0" HeightRequest="20" BackgroundColor="Red" Grid.Column="1" x:Name="deleteButton"/>
</Grid>
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
<CollectionView.EmptyView>
<AbsoluteLayout VerticalOptions="CenterAndExpand">
<Label FontAttributes="Bold" FontSize="30" TextColor="White" HorizontalTextAlignment="Center" Text="No planes to display" AbsoluteLayout.LayoutBounds="0.5, 0.45, 300, 50" AbsoluteLayout.LayoutFlags="PositionProportional"/>
<Button Text="Import Plane" WidthRequest="10" BackgroundColor="#00d2ff" FontSize="30" FontAttributes="Bold" TextColor="White" CornerRadius="30" VerticalOptions="Center" Padding="5" AbsoluteLayout.LayoutBounds="0.5, 0.55, 280, 70" AbsoluteLayout.LayoutFlags="PositionProportional" Clicked="Button_Clicked"/>
</AbsoluteLayout>
</CollectionView.EmptyView>
</CollectionView>

assign a handler for your button
<Button Text="Delete" Clicked="RemovePlane" ... />
in your handler
public void RemovePlane(object sender, EventArgs args)
{
var button = (Button)sender;
var plane = (Airplane)button.BindingContext;
var db = new SQLiteConnection(_dbPath);
db.Delete<Airplane>(plane);
// finally, either refresh your ItemsSource from your db
// or if you are using an ObservableCollection just remove
// it from the collection
}

I have done this and and when i refresh it works.
One question it delete whole row? And can it be improved somehow?
private void deleteButton_Clicked(object sender, EventArgs e)
{
var button = (Button)sender;
var plane = (Airplane)button.BindingContext;
var db = new SQLiteConnection(_dbPath);
db.Delete<Airplane>(plane.Id);
}

How to place a image in the half of a frame using Xamarin forms

I want to place a image in the half of a frame in my app , i am using xamarin forms to do this ,How can I do this
My Xaml
<StackLayout HorizontalOptions = "FillAndExpand" VerticalOptions="StartAndExpand" >
<ListView x:Name="lv_search" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" RowHeight="175" SeparatorColor="White">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<AbsoluteLayout HorizontalOptions = "FillAndExpand" VerticalOptions="StartAndExpand" >
<Frame BackgroundColor = "White" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand" Margin="20,10,0,0"
HeightRequest="75" AbsoluteLayout.LayoutBounds="0.01,0.9,1,1" AbsoluteLayout.LayoutFlags="All">
<Image Source = "img_frm" BackgroundColor="#14559a" AbsoluteLayout.LayoutBounds="0.009,0.9,0.3,0.6" AbsoluteLayout.LayoutFlags="All" />
<StackLayout Orientation = "Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand">
<AbsoluteLayout HorizontalOptions = "StartAndExpand" >
<Image Source="ellipse_1" VerticalOptions="CenterAndExpand" HorizontalOptions="Start" AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0.01,0.4,1,1" HeightRequest="100" WidthRequest="100" BackgroundColor="White"/>
<Image Source = "{Binding Image}" AbsoluteLayout.LayoutBounds="0.02,0.4,1,1" AbsoluteLayout.LayoutFlags="All"
HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" ></Image>
</AbsoluteLayout>
<Label x:Name="lbl_categories" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" Margin="10,0,0,0"
TextColor="Black" Text="{Binding Title}" LineBreakMode="WordWrap" HorizontalTextAlignment="Start"
FontSize="Medium" FontAttributes="Bold" AbsoluteLayout.LayoutBounds="0.3,0.3,1,1" AbsoluteLayout.LayoutFlags="All"/>
<Image HorizontalOptions = "EndAndExpand" VerticalOptions="Center" Source="arrow" AbsoluteLayout.LayoutBounds="0.9,0.3,0.3,0.3"
AbsoluteLayout.LayoutFlags="All" />
</StackLayout>
</Frame>
</AbsoluteLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
But it dosen't develop the design what I want.
Actually I want a design like this
But I get the design like this,how to modify the design into the above image

I hate to say this, but for the result you want to achieve, your xaml is a nightmare. Not only because you are having an excessive amount of elements in your visual tree, but also because you are using AbsoluteLayout inside a ListView.
Even though this is technically possible, it will cause your app losing performance, especially if your ListView gets populated with a lot of items.
Second, creating an image for that blue square also is a waste of memory and will cause more performance drops and ultimately probably OutOfMemoryExceptions on Android if your ListView contains many entries.
You could replace this with a custom View inheriting from a box view and using custom renderers for rendering rounded corners.
Also avoid using a StackLayout within a ListView, as it will also cause performance issues, since the StackLayout does a lot of calculations when being layouted.
As Dennis already mentioned, your way to go is using a Grid for layouting with keeping in mind, that all elements added to the grid will overlay each other in the order of how they have been added within your xaml definition.
Especially when using ListViews, try to use as less elements as possible and avoid elements which need a lot of layout passes.
Even though I am not using it in my example, I'd like to add the information, that you can also use negative margin values for advanced element positioning.
Here is a brief example, I hacked together:
<ListView VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" RowHeight="80">
<ListView.ItemsSource>
<x:Array Type="{x:Type x:String}">
<!-- quick hack to make the list view populate items without having to write model classes -->
<x:String>Entry 1</x:String>
<x:String>Entry 2</x:String>
<x:String>Entry 3</x:String>
<x:String>Entry 4</x:String>
</x:Array>
</ListView.ItemsSource>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
<BoxView BackgroundColor="LightGray" Margin="19,9,9,9" />
<Grid Margin="20,10,10,10" BackgroundColor="White">
<Label Text="{Binding .}" VerticalOptions="Center" FontSize="18" Margin="25,0,0,0"/>
<!-- insert icons, labels, etc here -->
</Grid>
<customs:RoundedBoxView BackgroundColor="DarkBlue" CornerRadius="6" WidthRequest="15" VerticalOptions="FillAndExpand" HorizontalOptions="Start" Margin="10,20,0,20" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The RoundedBoxView class looks like this:
public class RoundedBoxView : BoxView
{
readonly BindableProperty CornerRadiusProperty = BindableProperty.Create("CornerRadius", typeof(double), typeof(double), 0.0);
public double CornerRadius
{
get { return (double)GetValue(CornerRadiusProperty); }
set { SetValue(CornerRadiusProperty, value); }
}
}
This would be the custom renderer for android:
[assembly: ExportRenderer(typeof(RoundedBoxView), typeof(RoundedBoxViewRenderer))]
namespace TestApp.Droid
{
public class RoundedBoxViewRenderer : BoxRenderer
{
public RoundedBoxViewRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<BoxView> e)
{
base.OnElementChanged(e);
SetWillNotDraw(false);
Invalidate();
}
public override void Draw(Canvas canvas)
{
var box = Element as RoundedBoxView;
var rect = new Rect();
var paint = new Paint()
{
Color = box.BackgroundColor.ToAndroid(),
AntiAlias = true,
};
GetDrawingRect(rect);
var radius = (float)(box.CornerRadius);
canvas.DrawRoundRect(new RectF(rect), radius, radius, paint);
}
}
And for iOS:
[assembly: ExportRenderer(typeof(RoundedBoxView), typeof(RoundedBoxViewRenderer))]
namespace TestApp.iOS
{
public class RoundedBoxViewRenderer: BoxRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<BoxView> e)
{
base.OnElementChanged(e);
if (Element != null)
{
Layer.MasksToBounds = true;
UpdateCornerRadius(e.NewElement as RoundedBoxView);
}
}
protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
if (e.PropertyName == CircleView.WidthProperty.PropertyName || e.PropertyName == CircleView.HeightProperty.PropertyName)
{
UpdateCornerRadius(Element as RoundedBoxView);
}
}
void UpdateCornerRadius(RoundedBoxView box)
{
Layer.CornerRadius = (nfloat)(box.CornerRadius);
CGRect bounds = new CGRect(0, 0, box.Width, box.Width);
Layer.Bounds = bounds;
Layer.Frame = bounds;
}
}
Which will render like this:
}

You could use Grid instead of AbsoluteLayout.
I didn't test this, but try something like this:
<Grid
HorizontalOptions="FillAndExpand"
VerticalOptions="StartAndExpand">
<Frame
Grid.Row="0"
Grid.Column="0"
BackgroundColor="White"
HorizontalOptions="FillAndExpand"
VerticalOptions="StartAndExpand"
Margin="20,10,0,0"
HeightRequest="75">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image
Grid.Row="0"
Grid.Column="0"
Source="ellipse_1"
VerticalOptions="CenterAndExpand"
HorizontalOptions="Start"
HeightRequest="100"
WidthRequest="100"
BackgroundColor="White">
</Image>
<Image
Grid.Row="0"
Grid.Column="1"
Source="{Binding Image}"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand">
</Image>
<Label
Grid.Row="0"
Grid.Column="2"
x:Name="lbl_categories"
HorizontalOptions="FillAndExpand"
VerticalOptions="CenterAndExpand"
Margin="10,0,0,0"
TextColor="Black"
Text="{Binding Title}"
LineBreakMode="WordWrap"
HorizontalTextAlignment="Start"
FontSize="Medium"
FontAttributes="Bold">
</Label>
<Image
Grid.Row="0"
Grid.Column="3"
HorizontalOptions="EndAndExpand"
VerticalOptions="Center"
Source="arrow">
</Image>
</Grid>
</Frame>
<Image
Margin="10,10,0,0"
Grid.Row="0"
Grid.Column="0"
Source="img_frm"
BackgroundColor="#14559a">
</Image>
</Grid>
Because the Image is created after the Frame in your xaml, it overlaps the Frame. You may need to change the margins of the Frame and blue square shaped Image according to your needs.

Images disapearing in ListView when deleting an Item

I am currently working on a Xamarin CrossPlatform project and have implemented a Listview bound to an ObservableCollection. Everything works out fine until I remove an Item from the ListView. The images in the follow up items within the ListView disappear randomly - not all of them and a different amount of them every time. I guess it has something to do with the MemoryStream, but what do I have to change? Here´s the relevant part of my Model that is bound to the ListView:
public string ImageBase64
{
get
{
return imagebase64;
}
set
{
if (imagebase64 != value)
{
imagebase64 = value;
OnPropertyChanged(nameof(ImageBase64));
OnPropertyChanged(nameof(ImageSource));
}
}
}
public ImageSource ImageSource
{
get
{
if (!string.IsNullOrEmpty(imagebase64))
{
return ImageSource.FromStream(() => new MemoryStream(Convert.FromBase64String(imagebase64)));
}
else
{
return null;
}
}
}
Here´s the relevant XAML:
<ListView x:Name="listView" Margin="20" ItemsSource="{Binding}" ItemSelected="OnListItemSelected" HasUnevenRows="True" SeparatorColor="{StaticResource primaryGreen}" SeparatorVisibility="Default">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Margin="0,5,0,5">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="65" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="45" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Grid.RowSpan="3" Margin="-2,-2,-2,-2" Source="{Binding ImageSource}" HorizontalOptions="Start" VerticalOptions="Center" Aspect="AspectFill"/> <!-- This is the displayed Image -->
<Label Margin="10,0,0,0" Grid.Column="1" Grid.Row="0" FontAttributes="Bold" FontSize="18" TextColor="{StaticResource primaryGreen}" Text="{Binding VorNachname}" VerticalTextAlignment="Start" HorizontalTextAlignment="Start"/>
<Label Margin="10,0,0,0" Grid.Column="1" Grid.Row="1" Text="{Binding MediumSelected.Wert, StringFormat='via {0}'}" HorizontalOptions="FillAndExpand" VerticalTextAlignment="Start" HorizontalTextAlignment="Start"/>
<StackLayout Margin="10,0,0,0" Grid.Column="1" Grid.Row="2" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label Text="{Binding Alter,StringFormat='Alter: {0}'}" VerticalTextAlignment="Start" HorizontalTextAlignment="Start" HorizontalOptions="Start"/>
</StackLayout>
<StackLayout Margin="0,0,0,-5" Grid.Column="2" Grid.RowSpan="3" Orientation="Vertical" HorizontalOptions="End" VerticalOptions="End">
<Button WidthRequest="40" HeightRequest="40" BackgroundColor="White" BorderWidth="0" BorderColor="White" Image="socialmedia_18.png" Clicked="OnChangeClicked" CommandParameter ="{Binding}" VerticalOptions="EndAndExpand" />
<Button Margin="0,-15,0,0" WidthRequest="40" HeightRequest="40" BackgroundColor="White" BorderColor="White" Image="cancel_18.png" Clicked="OnDeleteClicked" CommandParameter ="{Binding}" VerticalOptions="End" />
</StackLayout>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
...and the Code behind:
async void OnDeleteClicked(object sender, EventArgs e)
{
Helper.TrackEvent("PeopleList_OnDeleteClicked");
//Get selected Person
Person person = (Person)((Button)sender).CommandParameter;
//Remove from Model
DBHelper.DBModel.People.Remove(person);
//Update database
App.Database.UpdateWithChildren(DBHelper.DBModel);
}
EDIT:
Resizing the images does not help, same problem. I tried it by binding a testvariable ImageSourceThumb to the ListViewItemImage:
public ImageSource ImageSourceThumb
{
get
{
if (!string.IsNullOrEmpty(imagebase64))
{
return ImageSource.FromStream(() => new MemoryStream(ImageResizer.ResizeImage(Convert.FromBase64String(imagebase64), 64, 64)));
}
else
{
return null;
}
}
}

I had a similar problem. When I loaded or updated my listview not all the images showed up.
I fixed my problem resizing the images. Huge images gived me a outofmemory exception. Resizing those images to a smaller resolution fixed these problems.

Passing data From ListView Item to next Form

I know how to send data from an Entry, Label to the next Form , but how can i do this with a ListView.
I want a simple direct approach.
My XAML code :
<ListView x:Name="MyClientslistView" HasUnevenRows="true" ItemTapped="OnSalesReport">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Vertical" VerticalOptions="Center" Margin="5" >
<Label Text="{Binding client_name}" TextColor="#A7A392" />
<Label Text="{Binding client_address}" TextColor="Black" />
<Label Text="{Binding client_phone}" TextColor="Black" />
<Label Text="{Binding client_email}" TextColor="Black" />
<Label Text="{Binding AssignStatus}" TextColor="Black" />
<Label Text="{Binding assignmentComments}" TextColor="Black" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I already have loaded data from JSON to the ListView , now currently i want to move each ID on he Item to the Next Form , how can i tackle that ?

You can get the item from ItemTapped listener. In your case use below solution.
void OnSalesReport(object sender, Xamarin.Forms.ItemTappedEventArgs e)
{
YourItemModel item = (YourItemModel)((ListView)sender).SelectedItem;
((ListView)sender).SelectedItem = null;
Navigation.PushAsync(new NextPage(item));
}

Sorry for the poor english
You can have your entire item at your event handler private void OnSalesReport(object sender, ItemTappedEventArgs e) through e.Item.
You must do var item = ((YourTypeClassItem)e.Item); then you get things like item.client_name and probably item.client_id.
I hope it helps you.