question

VigneshRamesh-3614 avatar image
0 Votes"
VigneshRamesh-3614 asked LeonLu-MSFT edited

Problem with xamarin forms Image when removing and adding it from parent layout

Description
I have created simple Xamarin.Forms sample. In it, I have added an Image and loaded the image as a stream through ImageSource.FromSource() method, then removed and add it to the layout.

Xamarin.Forms UWP The image will be disappeared.
Xamarin.Forms Android Cannot access closed stream exception throwing.
Xamarin.Forms iOS Didn't check yet.

Please find the code snippet below.

XAML:

 <?xml version="1.0" encoding="utf-8" ?>
 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="ImageException.MainPage">
    
     <ContentPage.Content>
         <Grid x:Name="MainGrid">
             <Image x:Name="image" />
             <Button Text="Click_Me"
                     Clicked="Button_Clicked"
                     VerticalOptions="End" />
         </Grid>
     </ContentPage.Content>
 </ContentPage>

C#:

 namespace ImageException
 {
     public partial class MainPage : ContentPage
     {
         public MainPage()
         {
             InitializeComponent();
    
             var assembly = typeof(MainPage).Assembly;
             string path = "ImageException";
    
             var stream = assembly.GetManifestResourceStream($"{path}.Image.Image.png");
             image.Source = ImageSource.FromStream(() => stream);
         }
    
         private void Button_Clicked(object sender, EventArgs e)
         {
             MainGrid.Children.Remove(image);
             MainGrid.Children.Add(image);
         }
     }
 }


Please get the complete sample from the below link https://github.com/VigneshRameshh/XamarinFormsImageException


Can anyone suggest how to retain the image after removed and added from the layout?

Thanks in advance,
Vignesh Ramesh.

dotnet-xamarin
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

LeonLu-MSFT avatar image
0 Votes"
LeonLu-MSFT answered LeonLu-MSFT edited

Hello,​

Welcome to our Microsoft Q&A platform!

You can use image.IsVisible to control the image appear or disappear like following code.

private void Button_Clicked(object sender, EventArgs e)
        {
            //  MainGrid.Children.Remove(image);
           //    MainGrid.Children.Add(image);
//test it click the button will hide or show the image.
            image.IsVisible = !image.IsVisible;
        }


I test it in Android, UWP, iOS, All of them are worked.

Best Regards,

Leon Lu



If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.


· 6
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

@VigneshRamesh-3614 No need to write Streams again and again when you need to show the image, it will cost lots of memory.

0 Votes 0 ·

Hi @LeonLu-MSFT,

Thanks for your suggestion. But in my actual application, I have divided the MainGrid into rows and columns & displayed image and other elements. Based on the screen size change (eg., rotating the android mobile) I have re-ordered those children's by redefining the MainGrid rows, columns, removing its children's (Image), and adding with different rows and columns. So, IsVisible is not applicable to my requirement.

Regards,
Vignesh Ramesh.

0 Votes 0 ·

If so, we have to use following code to read the image again then re-add a new image.

private void Button_Clicked(object sender, EventArgs e)
        {
              MainGrid.Children.Remove(image);

            var assembly = typeof(MainPage).Assembly;
            string path = "ImageException";

            stream = assembly.GetManifestResourceStream($"{path}.Image.Image.png");
            Image Newimage=   new Image();
            Newimage.Source = ImageSource.FromStream(() => stream);

            MainGrid.Children.Add(Newimage);

        }

0 Votes 0 ·

@VigneshRamesh-3614 May I know if you have got any chance to check my answer? I am glad to help if you have any other questions

0 Votes 0 ·
Show more comments