Develop Reference

xamarin.forms ImageSource set from code sometimes disappears, doesnt work on iOS at all

I have this xaml class:
<ContentView
xmlns="http://xamarin.com/schemas/2014/forms"
HeightRequest="130"
WidthRequest="90"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="InteriorCircle.Pages.MainMenu.CV_PinStyle">
<ContentView.Content>
<StackLayout BackgroundColor="Transparent">
<Frame
HeightRequest="130"
WidthRequest="90"
VerticalOptions="Start"
HasShadow="False"
HorizontalOptions="Start"
BackgroundColor="#565656"
Padding="0"
CornerRadius="25"
IsClippedToBounds="true">
<StackLayout Padding="5">
<Grid VerticalOptions="Center" Margin="10,10,0,0" HorizontalOptions="Center">
<Image x:Name="img_pic"
Margin="3,0,0,0"
HorizontalOptions="Center"
VerticalOptions="Center">
<Image.Clip>
<EllipseGeometry
Center="27,27"
RadiusX="27"
RadiusY="27"/>
</Image.Clip>
</Image>
<Ellipse Stroke="#60CED3"
StrokeThickness="6"
WidthRequest="60"
HeightRequest="60"
HorizontalOptions="Start" />
</Grid>
<Label
Margin="0,0,0,0"
x:Name="label_title"
TextColor="White"
LineBreakMode="TailTruncation"
FontFamily="JakartaReg"
VerticalOptions="Start"
FontSize="12"
HorizontalOptions="Center"/>
<Label
x:Name="label_price"
TextColor="White"
FontFamily="JakartaBold"
VerticalOptions="Start"
FontSize="10"
HorizontalOptions="Center"/>
</StackLayout>
</Frame>
</StackLayout>
</ContentView.Content>
</ContentView>
I retrieve content from another class (event) and set it to the properties from here:
private async Task SetContent(EventType events)
{
InitializeComponent();
byte[] bt = Converters.StringToByteArray(events.eventPictureThumb);
label_title.Text = events.name;
label_price.Text = Converters.GetDecimalPriceFromCents(events.priceInCents) + " €";
Device.BeginInvokeOnMainThread(() =>
{
var source = Converters.ReturnImageSourceFromString(Converters.ByteArrayToString(bt));
img_pic.Source = source;
});
}
However, this does not work sometimes on Android, on iOS not at all.
When I set an image directly in xaml, it is always displayed. On iOS, when the image comes from code, it is never displayed. On Android, it is displayed most of the times, but fails sometimes. When multiple objects load into the view the old ones lose their images.
I am adding the view like so:
var startPin = BitmapDescriptorFactory.FromView(new CV_PinStyle(currentEvent));
Pin pin = new Pin
{
Label = currentEvent.name,
Tag = currentEvent.tblEventID+Constants.DELIMITER+currentEvent.userID,
Icon = startPin,
Type = PinType.Place,
Position = position
};
gMap?.Pins?.Add(pin);
So I am doing somethign wrong here,
can you help me?

How to run a timer on the background that updates a label in a viewmodel

I am trying to run a timer that updates a label every second on background (async). The timer should run from 0 to 60 min and only show {MIN:SEC} in the label. But I am having a hard time to run the timer in background that updates the label. This is what I had for so for but it won't work:
Timer timer;
Stopwatch sw;
public TimerViewModel()
{
Title = "Tijd";
StartTimer();
}
private async void StartTimer()
{
timer = new Timer();
timer.Interval = (1000);
//timer.Elapsed += new EventHandler(UpdateLabel);
sw = new Stopwatch();
timer.Start();
sw.Start();
}
private async void UpdateLabel()
{
await Task.Run(async () =>
{
}).ConfigureAwait(false);
}
MainPage:
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:EscapeHaarlem.Views"
x:Class="EscapeHaarlem.Views.MainPage">
<TabbedPage.Children>
<NavigationPage Title="Tijd">
<NavigationPage.Icon>
<OnPlatform x:TypeArguments="FileImageSource">
<On Platform="iOS" Value="tab_about.png"/>
</OnPlatform>
</NavigationPage.Icon>
<x:Arguments>
<views:AboutPage />
</x:Arguments>
</NavigationPage>
<NavigationPage Title="Hints">
<NavigationPage.Icon>
<OnPlatform x:TypeArguments="FileImageSource">
<On Platform="iOS" Value="tab_feed.png"/>
</OnPlatform>
</NavigationPage.Icon>
<x:Arguments>
<views:ItemsPage />
</x:Arguments>
</NavigationPage>
</TabbedPage.Children>
About page:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="EscapeHaarlem.Views.AboutPage"
xmlns:vm="clr-namespace:EscapeHaarlem.ViewModels"
Title="{Binding Title}">
<ContentPage.BindingContext>
<vm:TimerViewModel />
</ContentPage.BindingContext>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="12*" />
<ColumnDefinition Width="6*" />
<ColumnDefinition Width="6*" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<StackLayout x:Name="RealTimeTimer" Grid.Column="0" VerticalOptions="Center">
<Label Text="{Binding RealTimeTimer}" HorizontalTextAlignment="Center" Rotation="270" FontSize="150" HorizontalOptions="Center"></Label>
</StackLayout>
<StackLayout Grid.Column="1" VerticalOptions="Center">
<Label Text="Straftijd" HorizontalTextAlignment="Center" Rotation="270" FontSize="40" HorizontalOptions="End"></Label>
</StackLayout>
<StackLayout Grid.Column="2" VerticalOptions="Center">
<Label Text="00:00" HorizontalTextAlignment="Center" Rotation="270" FontSize="40" HorizontalOptions="Start" ></Label>
</StackLayout>
</Grid>
thanks in advance

You are wrongly assigning the event handler as seen in the docs.
Change
timer.Elapsed += new EventHandler(UpdateLabel);
to
timer.Elapsed +=UpdateLabel; //or
timer.Elapsed +=System.EventHandler(UpdateLabel)
not sure from the top of my head
And
private async void UpdateLabel()
to
private static void UpdateLabel(Object source, System.Timers.ElapsedEventArgs e)
This should allow you to to trigger the Elapsed event. You problem was your confusing regular functions and event functions. You should read up on it here

Is it possible to show EmptyView after loader(ActivityIndicator) in CarouselView using Xamarin forms?

I have a lot of tried to show EmptyView after Loader but did not get success might i missed some code configuration for the EmptyView and Loader.
I'm using ActivityIndicator loader for the loading view if it will hide once data will come.
Below code is for EmptyView for the CarouselView
<CarouselView.EmptyView>
<Frame BackgroundColor="Transparent" Margin="20,150">
<Frame BackgroundColor="White" CornerRadius="20" HeightRequest="150" WidthRequest="300" HorizontalOptions="Center" VerticalOptions="Center">
<Label Text="Data not Found" FontSize="Medium" HorizontalOptions="Center" VerticalOptions="Center"/>
</Frame>
</Frame>
</CarouselView.EmptyView>
Below code is for ActivityIndicator
<StackLayout IsVisible="{Binding IsBusy}" Padding="12" AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1">
<ActivityIndicator IsRunning="{Binding IsBusy}" Color="#BFA464" x:Name="PaymentLoader"/>
<Label Text="Data is Loading..." HorizontalOptions="Center" TextColor="#BFA464"/>
</StackLayout>
Below image is my whole code screenshot
here is full code image
If anybody have idea, please share your great and valuable knowledge.

According to your description and code, I guess that you want to display CarouselView's EmptyView and ActivityIndicator when no data found, am I right?
From Xamarin.Forms CarouselView EmptyView, we can see that EmptyView, of type object, the string, binding, or view that will be displayed when the ItemsSource property is null, or when the collection specified by the ItemsSource property is null or empty. The default value is null.
I do one sample that you can take a look:
<StackLayout>
<!-- Place new controls here -->
<CarouselView ItemsSource="{Binding models}">
<CarouselView.EmptyView>
<Frame Margin="20,150" BackgroundColor="Transparent">
<Frame
BackgroundColor="White"
CornerRadius="20"
HeightRequest="150"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="300">
<Label
FontSize="Medium"
HorizontalOptions="Center"
Text="Data not Found"
VerticalOptions="Center" />
</Frame>
</Frame>
</CarouselView.EmptyView>
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Frame
Margin="8"
BorderColor="Gray"
CornerRadius="20"
HasShadow="True"
HeightRequest="250"
VerticalOptions="CenterAndExpand"
WidthRequest="300">
<StackLayout>
<Image Source="{Binding ImagePath}" />
<Label
FontAttributes="Bold"
FontSize="24"
HorizontalTextAlignment="Center"
Text="{Binding Title}" />
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<StackLayout
Padding="12"
AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1"
AbsoluteLayout.LayoutFlags="PositionProportional"
IsVisible="{Binding IsBusy}">
<ActivityIndicator
x:Name="PaymentLoader"
IsRunning="{Binding IsBusy}"
Color="#BFA464" />
<Label
HorizontalOptions="Center"
Text="Data is Loading..."
TextColor="#BFA464" />
</StackLayout>
</StackLayout>
public partial class MainPage : ContentPage, INotifyPropertyChanged
{
public ObservableCollection<BirdsModel> models { get; set; }
private Boolean _IsBusy;
public Boolean IsBusy
{
get { return _IsBusy; }
set
{
_IsBusy = value;
RaisePropertyChanged("IsBusy");
}
}
public MainPage()
{
InitializeComponent();
IsBusy = true;
models = new ObservableCollection<BirdsModel>();
this.BindingContext = this;
}
public event PropertyChangedEventHandler PropertyChanged;
public void RaisePropertyChanged(string propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
protected override async void OnAppearing()
{
base.OnAppearing();
await Task.Delay(2000);
models.Add(new BirdsModel() { Title = "title 1", ImagePath = "a5.jpg" });
models.Add(new BirdsModel() { Title = "title 2", ImagePath = "a6.jpg" });
models.Add(new BirdsModel() { Title = "title 3", ImagePath = "a7.jpg" });
models.Add(new BirdsModel() { Title = "title 4", ImagePath = "a8.jpg" });
IsBusy = false;
}
}
public class BirdsModel
{
public string Title { get; set; }
public ImageSource ImagePath { get; set; }
}
This is the sample at github, you can take a look:
https://github.com/CherryBu/CarouselViewSample

Xamarin: Does a Collection.Remove in List remove the wrong object?

I have the strange behaviour in the list view in user's devices which I can't find the same issue on our devices in android written in Xamarin form.
I have a list view which bound with a IList objects in the list collection. Each items inside list view have a command which once clicked the item will be removed from the list.
To remove the item inside the collection, I used Collection.Remove(model). The Collection is a list which stored all ViewModel shown inside the list view and the model are the viewModel got from the Collection.
public ICommand OnAcceptCommand
{
get
{
return new Command(async (param) =>
{
await App.GlobalLayout.PreventMultiClicking(null, async () =>
{
var model = param as HeadCountLineViewModel;
var result = await model.ToggleAccounted(true);
if (result)
Collection.Remove(model);
});
});
}
}
The param is the model from the Collection passed by the item inside the list view.
<DataTemplate x:Key="phoneTemplate">
<ViewCell>
<Frame HasShadow="false" Padding="{StaticResource cellPadding}">
<local:ExtendedFrame Style="{StaticResource cardStyle}" BackgroundColor="{Binding HeadCountLineStatus, Converter={StaticResource accountedToColorConverter}}">
<Grid VerticalOptions="Fill" HorizontalOptions="Fill" RowSpacing="5">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="2*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<controls:CircleImage
Grid.Row="0"
Grid.Column="0"
Margin="0"
Style="{StaticResource profileImageStyle}"
Source="{Binding Source}"
VerticalOptions="Center"
HorizontalOptions="Start">
</controls:CircleImage>
<Label
Grid.Row="0"
Grid.Column="1"
x:Name="childName"
Text="{Binding ChildName}"
Style="{StaticResource MediumBoldFont}"
HorizontalOptions="StartAndExpand"
VerticalOptions="Center">
</Label>
<Image
Grid.Row="0"
Grid.Column="1"
Style="{StaticResource listviewButtonStyle}"
IsVisible="{Binding IsUnAccounted, Converter={StaticResource invertConverter}}"
Source="ic_action_undo.png"
HorizontalOptions="End">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="OnUndoTapped" />
</Image.GestureRecognizers>
</Image>
<Image
Grid.Row="0"
Grid.Column="2"
IsVisible="{Binding IsUnAccounted}"
Style="{StaticResource listviewButtonStyle}"
Source="ic_action_yes.png"
VerticalOptions="FillAndExpand"
HorizontalOptions="End">
<Image.GestureRecognizers>
<TapGestureRecognizer
Tapped="OnAcceptedTapped">
</TapGestureRecognizer>
</Image.GestureRecognizers>
<Image.Margin>
<OnIdiom x:TypeArguments="Thickness">
<OnIdiom.Phone>0, 0, 5, 0</OnIdiom.Phone>
<OnIdiom.Tablet>5, 5, 20, 5</OnIdiom.Tablet>
</OnIdiom>
</Image.Margin>
</Image>
<Image
Grid.Row="0"
Grid.Column="3"
IsVisible="{Binding IsUnAccounted}"
Style="{StaticResource listviewButtonStyle}"
Source="ic_action_no.png"
VerticalOptions="FillAndExpand"
HorizontalOptions="End">
<Image.GestureRecognizers>
<TapGestureRecognizer
Tapped="OnAbsentTapped">
</TapGestureRecognizer>
</Image.GestureRecognizers>
<Image.Margin>
<OnIdiom x:TypeArguments="Thickness">
<OnIdiom.Phone>5, 0, 0, 0</OnIdiom.Phone>
<OnIdiom.Tablet>20, 5, 5, 5</OnIdiom.Tablet>
</OnIdiom>
</Image.Margin>
</Image>
<StackLayout Orientation="Horizontal"
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="4">
<local:ChildInfoIconsView
ShowClassroom="false"
Child="{Binding Child}"
VerticalOptions="Center">
</local:ChildInfoIconsView>
<ffimageloading:CachedImage
LoadingDelay="2000"
WidthRequest="24"
HeightRequest="24"
x:Name="ImageClassroom"
Source="ic_location"
IsVisible="{Binding HasClass}">
</ffimageloading:CachedImage>
<Label
Style="{StaticResource NormalFont}"
Text="{Binding Class}"
VerticalOptions="FillAndExpand"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Start"
IsVisible="{Binding HasClass}">
</Label>
<Label
x:Name="note"
Text="{Binding Note, StringFormat='Absent Note : {0}'}"
Style="{StaticResource SmallFont}"
HorizontalOptions="StartAndExpand"
IsVisible="{Binding IsNoteVisible}">
</Label>
</StackLayout>
</Grid>
</local:ExtendedFrame>
</Frame>
</ViewCell>
</DataTemplate>
In the page:
void OnAcceptedTapped (object sender, System.EventArgs e)
{
if (sender is Image && ((Image)sender).BindingContext is HeadCountLineViewModel)
{
var model = ((Image)sender).BindingContext as HeadCountLineViewModel;
var vModel = BindingContext as ShowAllHeadCountLinesViewModel;
vModel.OnAcceptCommand.Execute(model);
}
}
From the first code, I have a Collection.Remove. By any chance wrong model got removed. Visually from user's video, the removed cell looks like it get removed but leaving the Child's name in the removed cell unchanged where other visual element updated e.g. Source.

TapGestureRecognizer not responding in xamarin forms

I'm facing a pretty weird problem trying to catch taps on certain images on my screen first here is my xaml code for a popup window implemented as a View :
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="NumbersRaceXamarin.YesNoPopupMessages">
<ContentView.Content>
<RelativeLayout HeightRequest="190" WidthRequest="280">
<Image x:Name="bg" Source="compbar_01.png" Aspect="Fill" HeightRequest="190" WidthRequest="330" Opacity="0.9" InputTransparent ="true"/>
<StackLayout WidthRequest="280" Spacing="0" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width , Factor=0.1,Constant=0}" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height , Factor=0.02,Constant=0}">
<Label x:Name="message" FontSize="15"></Label>
<StackLayout WidthRequest="70" HeightRequest="30" Orientation="Horizontal" HorizontalOptions="Center">
<RelativeLayout WidthRequest="30" HeightRequest="30" VerticalOptions="Center">
<Image x:Name="minus" Source="startbottuns_01.png" Aspect="Fill" HeightRequest="30" WidthRequest="30"/>
<Label x:Name="minusTB" Text="-" FontSize="16" HeightRequest="30" WidthRequest="30" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"></Label>
</RelativeLayout>
<Label x:Name="qtyTB" Text="1" FontSize="8" HeightRequest="30" WidthRequest="30" BackgroundColor="White" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"></Label>
<RelativeLayout WidthRequest="30" HeightRequest="30" VerticalOptions="Center">
<Image x:Name="plus" Source="startbottuns_01.png" Aspect="Fill" HeightRequest="30" WidthRequest="30" IsEnabled="true"/>
<Label x:Name="plusTB" Text="+" FontSize="16" HeightRequest="30" WidthRequest="30" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"></Label>
</RelativeLayout>
</StackLayout>
<StackLayout x:Name="coinAmountSeg" HeightRequest="40" WidthRequest="90" Orientation="Horizontal" HorizontalOptions="Center" IsVisible="true">
<Label x:Name="coinsAmountTB" Text="1200" HeightRequest="35" WidthRequest="40" VerticalTextAlignment="Center" HorizontalTextAlignment="End"/>
<Image x:Name="coinsPackIM" Source="coins_01.png" HeightRequest="35" WidthRequest="25"/>
</StackLayout>
<StackLayout x:Name="yesNoBtSeg" HeightRequest="32" WidthRequest="150" Orientation="Horizontal" HorizontalOptions="Center" IsVisible="true">
<RelativeLayout HorizontalOptions="Center" >
<Image x:Name="yesBt" x:Uid="yesBt" Source="startbottuns_01.png" Aspect="Fill" HeightRequest="32" WidthRequest="80"></Image>
<Label x:Name="yesTB" Text="OK" FontSize="20" HeightRequest="32" TextColor="Yellow" WidthRequest="80" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"></Label>
</RelativeLayout >
<RelativeLayout HorizontalOptions="Center" >
<Image x:Name="noBt" x:Uid="noBt" Source="startbottuns_01.png" Aspect="Fill" HeightRequest="32" WidthRequest="80"></Image>
<Label x:Name="noTB" Text="CANCEL" FontSize="20" HeightRequest="32" TextColor="Yellow" WidthRequest="80" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"></Label>
</RelativeLayout>
</StackLayout>
</StackLayout>
</RelativeLayout>
</ContentView.Content>
</ContentView>
and here is how I try to catch the events from plus and minus ok and cancel images:
var minusTap = new TapGestureRecognizer();
var plusTap = new TapGestureRecognizer();
var okTap = new TapGestureRecognizer();
var cancelTap = new TapGestureRecognizer();
minusTap.Tapped += minusBtn_Click;
plusTap.Tapped += plusBtn_Click;
okTap.Tapped += okBtn_Click;
cancelTap.Tapped += cancelBtn_Click;
noBt.GestureRecognizers.Add(cancelTap);
plus.GestureRecognizers.Add(plusTap);
minus.GestureRecognizers.Add(minusTap);
yesBt.GestureRecognizers.Add(okTap);
private void okBtn_Click(object sender, EventArgs e)
{
tcs.SetResult(1);
}
private void cancelBtn_Click(object sender, EventArgs e)
{
tcs.SetResult(0);
}
private void minusBtn_Click(object sender, EventArgs e)
{
if (int.Parse(qtyTB.Text) > 1)
{
coinsAmountTB.Text = "" + (int.Parse(coinsAmountTB.Text) - itemCost);
qtyTB.Text = (int.Parse(qtyTB.Text) - 1) + "";
}
}
private void plusBtn_Click(object sender, EventArgs e)
{
if (int.Parse(qtyTB.Text) < max)
{
coinsAmountTB.Text = "" + (int.Parse(coinsAmountTB.Text) + itemCost);
qtyTB.Text = (int.Parse(qtyTB.Text) + 1) + "";
}
}
the problem is really strange the tap events work fine on the ok cancel and minus buttons but won't fire when taping the plus image for some reason.
I thought something was overlapping and "stealing" the taps on the plus button but I can't find anything like that .
BTW I'm trying this on android not trying on other devices.
anyone have any idea how and why this happens?

Ok so I found the silly problem thought I'd share my solution in case anyone encounter the same issue.
the problem was that the stacklayout that contains the buttons had less width than the elements it contained so the last element the plus in this case was out of the stacklayout bounds and that caused it to not get the tap gesture
<StackLayout WidthRequest="70" HeightRequest="30" Orientation="Horizontal" HorizontalOptions="Center">
<RelativeLayout WidthRequest="30" HeightRequest="30" VerticalOptions="Center">
this line here I just changed the WidthRequest to 100 instead of 70 because it has 3 elements 30 width each .
Hope this helps someone

I had the same problem, also caused by the parent element having less size than the tap-enabled child.
In my case, I had an absolute layout (Inner) inside another absolute layout (Outer). I was then adding the tap-enabled child elements programmatically to Inner in the code-behind.
<AbsoluteLayout x:Name="Outer">
<AbsoluteLayout x:Name="Inner" />
</AbsoluteLayout>
Because Inner had no AbsoluteLayout.LayoutBounds specified, it seems the interaction cycle ignored the children. This was not obvious to me because the child elements were visible.
This worked:
<AbsoluteLayout x:Name="Outer">
<AbsoluteLayout x:Name="Inner"
AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
AbsoluteLayout.LayoutFlags="All" />
</AbsoluteLayout>
However, I ended up putting my tap target elements in the Outer container, which also resolved the issue, as Outer is enclosed by a ContentPage.