Flickering issue on switching an image with other image in xamarin - xamarin

Question

I have an entry for Password and an ImageButton.
On click of image Button, it should change to a different ImageButton.
For the first time when cursor is placed and keyboard appears, on selection of the image button, screen flickers.
I am using IsVisible property, setting the visibility to false and true when required, still it's flickering.
It's a popup page. Image size i downloaded using material icons and there i selected iOS and Android, for both, size is 24.
The idea is entry is of password, so by default IsPassword will be true. Once user selects the image, image should get changed and it should show me the password and again if i select the changed image, it should change to the previous one and hide the password.
.xaml
<StackLayout Orientation="Vertical">
<Label Text="Current Password"/>
<Entry x:Name="CurrentPasswordEntryText" Placeholder="Current Password" IsPassword="True"/>
<ImageButton x:Name="CurrentPasswordImage1" Source="baseline_visibility_off_black_24" IsVisible="true" Clicked="ImageButton1_Clicked"/>
<ImageButton x:Name="CurrentPasswordImage2" Source="baseline_visibility_black_24" IsVisible="false" Clicked="ImageButton2_Clicked"/>
</StackLayout>
.cs file
void ImageButton1_Clicked(System.Object sender, System.EventArgs e)
{
CurrentPasswordEntryText.IsPassword = false;
CurrentPasswordImage1.IsVisible = false;
CurrentPasswordImage2.IsVisible = true;
}
void ImageButton2_Clicked(System.Object sender, System.EventArgs e)
{
CurrentPasswordEntryText.IsPassword = true;
CurrentPasswordImage1.IsVisible = true;
CurrentPasswordImage2.IsVisible = false;
}

Answer 1

Try to use BatchBegin / BatchCommit methods:
.xaml
<StackLayout x:Name="CurrentPasswordLayout" Orientation="Vertical">
<Label Text="Current Password"/>
<Entry x:Name="CurrentPasswordEntryText" Placeholder="Current Password" IsPassword="True"/>
<ImageButton x:Name="CurrentPasswordImage1" Source="baseline_visibility_off_black_24" IsVisible="true" Clicked="ImageButton1_Clicked"/>
<ImageButton x:Name="CurrentPasswordImage2" Source="baseline_visibility_black_24" IsVisible="false" Clicked="ImageButton2_Clicked"/>
</StackLayout>
.cs
void ImageButton1_Clicked(System.Object sender, System.EventArgs e)
{
CurrentPasswordLayout.BatchBegin();
try
{
CurrentPasswordEntryText.IsPassword = false;
CurrentPasswordImage1.IsVisible = false;
CurrentPasswordImage2.IsVisible = true;
}
finally
{
CurrentPasswordLayout.BatchCommit();
}
}
void ImageButton2_Clicked(System.Object sender, System.EventArgs e)
{
CurrentPasswordLayout.BatchBegin();
try
{
CurrentPasswordEntryText.IsPassword = true;
CurrentPasswordImage1.IsVisible = true;
CurrentPasswordImage2.IsVisible = false;
}
finally
{
CurrentPasswordLayout.BatchCommit();
}
}

Answer 2

I am new in Xamarin, so forgive me if I am wrong. Seems like when the Image Source (or ImageButton Source, I presume) is changing, the entire StackLayout area is refreshed, so it is flickering. Try to put only one Image (or ImageButton) in one StackLayout, so the flickering only occurs inside the StackLayout which is unnoticeable because it is changing the image.