How to bind images to a list where the grid that is nesting the images has a different bindingcontext?

Question

I am currently working with a list that i bind through my viewmodel and then a service. In the list i bind an image and a label. I can successfully get the label binded, but the image does not show. The reason for this seems to be because i change the bindingcontext in the grid where the image is nested inside. I change the bindingcontext in order to get an accurate width for the image.

If i move the image outside the grid, then it shows, so now i am trying to get the bindingcontext in order again.

What i tried to do with the image was to add a new bindingcontext

BindingContext="{x:Reference Name=gridFollowers}" Source="{Binding image}" where gridFollowers is what i name my stacklayout where the original binding is made, but unfortunately the image still does not show.

here is the full code:

             <StackLayout x:Name="gridFollowers"
             BindableLayout.ItemsSource="{Binding headerService.CurrentHeader}">
             <BindableLayout.ItemTemplate >
             <DataTemplate>
                <Grid WidthRequest="75">

                <Grid.RowDefinitions>
                   <RowDefinition Height="8*" />
                   <RowDefinition Height="2*" />
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="7.5*" />
                </Grid.ColumnDefinitions>

                <Grid
                     Grid.Row="0"
                     Grid.Column="0"
                     BindingContext="{x:Reference Name=headerImage}"
                     WidthRequest="{Binding Height}">

                     <ffimageloading:CachedImage
                      x:Name="headerImage" BindingContext="{x:Reference Name=gridFollowers}"
                      Source="{Binding image}" />
                </Grid>

                <Label Grid.Row="1" Grid.Column="0"
                       Text="{Binding firstname}" />

             </DataTemplate>
             </BindableLayout.ItemTemplate>
             </StackLayout>

How can i make it so the image shows?

Cherry Bu - MSFT Cherry Bu - MSFT · Accepted Answer · 2019-09-16T01:42:03

I try your code and modify some code as following, please replace your code.

 <Grid
                        Grid.Row="0"
                        Grid.Column="0"
                        WidthRequest="{Binding Height, Source={x:Reference headerImage}}">
                        <ffimageloading:CachedImage x:Name="headerImage" Source="{Binding image}" />
                    </Grid>

Update:

please check headerService.CurrentHeader data.

Please check if binding viewmodel to page.cs bindingcontext by code behind.

                <Grid.RowDefinitions>
                    <RowDefinition Height="8*" />
                    <RowDefinition Height="2*" />
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="7.5*" />
                </Grid.ColumnDefinitions>

                <Grid
                    Grid.Row="0"
                    Grid.Column="0"
                    WidthRequest="{Binding Height, Source={x:Reference headerImage}}">
                    <ffimageloading:CachedImage x:Name="headerImage" Source="{Binding image}" />
                </Grid>

                <Label
                    Grid.Row="1"
                    Grid.Column="0"
                    Text="{Binding firstname}" />
            </Grid>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

 public partial class Page8 : ContentPage
 {

public ObservableCollection<imagemodel> models { get; set; }
public Page8 ()
{
    InitializeComponent ();

    models = new ObservableCollection<imagemodel>()
    {
        new imagemodel(){firstname="first image", image="a1.jpg"},
        new imagemodel(){firstname="second image",image="a2.jpg"}
    };
    this.BindingContext = this;
}
 }

public class imagemodel
{
public string firstname { get; set; }
public string image { get; set; }
}

How to bind images to a list where the grid that is nesting the images has a different bindingcontext?

1 Answers