Xamarin.Forms 4.0 ImageSource Not Working

volkansatirvolkansatir ✭✭Member ✭✭

Hello, I'm a new xamarin developer.I have a problem. I was changing the background of the contentpage with the BackgroundImage function in version 3.6.
But soon the update came and I upgraded to version 4.0. This function has been changed in the new version, but ContentPage does not update the background image even though I have edited the function according to version 4.0. Moreover, it does not give any error in code, also button picture is not valid for this is changing it.

Not Working Code: this.BackgroundImageSource = "drawable/greencihaz.png";

Previously running code: this.BackgroundImage = "drawable/greencihaz.png";

What's the problem with this code?

Old and new codes that work for the button image:

new version: btn.ImageSource = "drawable/green_button2.png";

previously version: btn.Image = "drawable/green_button2.png";

Answers

  • JarvanJarvan Xamurai Member, Xamarin Team Xamurai

    @volkansatir
    As shown, the BackgroundImageSource property belongs to the ImageSource. You cannot set a string for it.

    Try the code:

    this.BackgroundImageSource = ImageSource.FromFile("green_button2");
    

    Tutorial: https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.page.backgroundimagesource?view=xamarin-forms

  • volkansatirvolkansatir ✭✭ Member ✭✭

    @yelinzh Thank you for your interest. But it didn't work the way you said.

  • JarvanJarvan Xamurai Member, Xamarin Team Xamurai
    edited May 27

    @volkansatir
    In my code, the BackgroundImageSource could be set successfully as shown.
    Would you mind sharing a basic demo? It'll help to reproduce the issue and found a solution.

    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="App11.Page3">
        <ContentPage.Content>
            <StackLayout>
                <Label Text="Welcome to Xamarin.Forms!"
                    HorizontalOptions="CenterAndExpand" />
            </StackLayout>
        </ContentPage.Content>
    </ContentPage>
    

    page.xaml.cs

    public Page3()
    {
        InitializeComponent ();
        this.BackgroundImageSource = ImageSource.FromFile("grid_");
    }
    

  • volkansatirvolkansatir ✭✭ Member ✭✭
    edited May 29

    Okey I'm sending my code.

  • volkansatirvolkansatir ✭✭ Member ✭✭
    edited May 29

    @yelinzh

    MainPage.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="AppTest.MainPage"
                  BackgroundImage="greycihaz.png">
    
             <ContentPage.Content>
                 <Grid x:Name="controlGrid" RowSpacing="1" ColumnSpacing="1" BackgroundColor="Transparent">
                     <Grid.RowDefinitions>
                         <RowDefinition Height="150" />
                         <RowDefinition Height="*" />
                         <RowDefinition Height="*" />
                         <RowDefinition Height="*" />
                         <RowDefinition Height="*" />
                         <RowDefinition Height="110" />
                     </Grid.RowDefinitions>
                     <Grid.ColumnDefinitions>
                         <ColumnDefinition Width="*" />
                         <ColumnDefinition Width="100" />
                         <ColumnDefinition Width="*" />
                     </Grid.ColumnDefinitions>
    
                     <Button
                         x:Name="buttoncall"
                         WidthRequest     ="100"
                         HeightRequest    ="100"
                         BorderRadius="50"
                         Image="green_button2"
                         VerticalOptions  ="Center"
                         HorizontalOptions="Center"
                         BackgroundColor="Transparent"
                         Grid.Row         ="5"
                         Grid.Column      ="1"
                         Margin="0,0,0,10"
                         Pressed="Buttoncall_Pressed"
                         Released="Buttoncall_Released"
                         Clicked="Buttoncall_Clicked"
                         />
                 </Grid>    
             </ContentPage.Content>    
         </ContentPage>
    

    MainPage.xaml.cs:

         public MainPage(string adsoyad, string email, string phone)
                 {
                     InitializeComponent();
                 }
                 private void Buttoncall_Pressed(object sender, EventArgs e) 
                 {
                     Button btn = (Button)sender;
                     btn.ImageSource = "drawable/green_button1.png";  // this is working
                 }
                 private void Buttoncall_Released(object sender, EventArgs e) 
                 {
                     Button btn = (Button)sender;
                     btn.ImageSource = "drawable/green_button2.png"; // this is working
                 }
    
                 private void Buttoncall_Clicked(object sender, EventArgs e)
                 {
                     this.BackgroundImageSource = ImageSource.FromFile("drawable/redcihaz");  //this is not working
             // this.BackgroundImageSource = ImageSource.FromFile("drawable/redcihaz.png");  -- this is not working
             // this.BackgroundImageSource  ="drawable/redcihaz.png";  -- this is not working
                 }
    
  • JarvanJarvan Xamurai Member, Xamarin Team Xamurai

    @volkansatir
    this.BackgroundImageSource will not work because you call the method in button_click event, 'this' doesn't represent the content page. Add a name to ContentPage, refer to the code:

    private void Buttoncall_Clicked(object sender, EventArgs e)
    {
        main_page.BackgroundImageSource = ImageSource.FromFile("drawable/redcihaz");
    }
    
    <? 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="AppTest.MainPage"
                x:name="main_page">
        ...    
    </ContentPage>
    
  • volkansatirvolkansatir ✭✭ Member ✭✭

    @yelinzh I did as you said, I even tried different variations. But did not work any lines. The pictures are all in the same folder. Button picture is changing, contentpage background image is also received from xaml codes. In Cs codes, it cannot take the picture, but it doesn't give any error.

    private void Buttoncall_Clicked(object sender, EventArgs e) // butonun tıklanma işlemi
            {
                MainPageContent.BackgroundImageSource = ImageSource.FromFile("drawable/redcihaz.png");
                MainPageContent.BackgroundImageSource = ImageSource.FromFile("drawable/redcihaz");
                MainPageContent.BackgroundImageSource = ImageSource.FromFile("redcihaz.png");
                MainPageContent.BackgroundImageSource = ImageSource.FromFile("redcihaz");
                MainPageContent.BackgroundImageSource = "drawable/redcihaz.png";
                MainPageContent.BackgroundImageSource = "drawable/redcihaz";
                MainPageContent.BackgroundImageSource = "redcihaz.png";
                MainPageContent.BackgroundImageSource = "redcihaz";
            }
    

    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:local="clr-namespace:TaksiGoo"
                 x:Class="TaksiGoo.MainPage"
                 x:Name="MainPageContent"
                 BackgroundImageSource="greycihaz.png">
    </ContentPage>
    
  • JarvanJarvan Xamurai Member, Xamarin Team Xamurai

    @volkansatir
    What's the version of Xamarin.Forms in your .Android project. Ensure Xamarin.Forms is in version 4.0.

  • volkansatirvolkansatir ✭✭ Member ✭✭

    All of them correct, all nuggets are current and the latest version.

  • JarvanJarvan Xamurai Member, Xamarin Team Xamurai

    @volkansatir
    Could you share a basic demo like zip achieve file? I want to reproduce the issue to get a solution.

  • GerardoMonroyGerardoMonroy Member

    After digging a bit, found this:
    1. first, of course, image should be added to the project, in folder Resources/drawable (and every other folder for different resolution) for each platform, with build Action = AndroidResource.
    2. then the code for resolve is for example:

    public MainPage()
        {
            InitializeComponent();
            this.BackgroundImageSource = FileImageSource.FromFile("drawable/patternwide");
        }
    
Sign In or Register to comment.