I am not able to access x:Name of controls in ListView in XAML and Code behind

Question

I have a ListView in Xamarin forms which has a custom cell in it. The custom cell contains an Image control with a x:Name attribute. Now I tried to bind an activity indicator IsRunning Property to the Image IsLoading Property and Xamarin forms could not find the Image using the x:Name. I tried accessing from the backend too, same thing.

I added other elements in the Listview and their x:Name were not visible too.

NB: I can access x:Name of controls I put outside the ListView so it is looking like a listview issue.

<StackLayout>
    <ActivityIndicator x:Name="activity" Color="Purple" HeightRequest="50" WidthRequest="50" IsRunning="{Binding Source={x:Reference Offerimg},Path=IsLoading}"></ActivityIndicator>


    <ListView x:Name="OfferLV" HasUnevenRows="True" x:FieldModifier="Public" SeparatorVisibility="None" BackgroundColor="White">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell >
                    <StackLayout Padding="0,10,0,10">
                        <Image  x:Name="offerimg" HeightRequest="500" WidthRequest="100" Aspect="AspectFill"></Image>
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

I don't find it a good idea to have name inside ViewCell. You might want to have ClassId or StyleId instead and bind it to a property so you can access them easier later on. — Amir Hajiha
Thanks but I am not sure how to do that. Do you have any documentation I can refer to ? — Classyk
What do you mean by Image IsLoading Property ? There is no such property on the Image control. I don't understand what you want to achieve. Is it that when ActivityIndicator IsRunning == true, you want your image to disappear or to show up ? — Umar3x
@Umar3x I want my activity indicator IsRunning to be true when my image Is loading and let it disappear once the image appears. How can I do that please ? — Classyk
Do you load your image as a resource in your project or from an Uri ? — Umar3x

Umar3x Umar3x · Accepted Answer · 2019-04-02T11:09:45

There is a very nice library FFImageLoading that will help you do what you want, and has a built in IsLoading property to display an ActivityIndicator accordingly. You can also handles loading error and so ...

<ListView VerticalOptions="StartAndExpand" ItemsSource="{Binding Items}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid>
                            <ff:CachedImage x:Name="Image" Source="https://www.allibert-trekking.com/uploads/media/images/thumbnails/AMin3_10-photo-montagne-chine-lac.jpeg?v2" />
                            <ActivityIndicator Color="OrangeRed" IsRunning="{Binding IsLoading}" IsVisible="{Binding IsLoading}" BindingContext="{x:Reference Name=Image}" />
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

I created a sample for this example here : https://github.com/vincentcastagna/ImageLoadingPlaceHolder

I am not able to access x:Name of controls in ListView in XAML and Code behind

2 Answers