CommandParameter giving null value when use DataTemplate for listview in xamarin forms

Question

I'm facing issue in CommandParameter which is in DataTemplate for the listView. I have separate DataTemplate for ListView and i am not able to pass the imagepath in the commandParameter when click on image in the listView.

 <?xml version="1.0" encoding="utf-8" ?>

xmlns:local="clr-namespace:RCBazaar.Localization" xmlns:template="clr-namespace:RCBazaar.Views.Templates" xmlns:cards="clr-namespace:PanCardView;assembly=PanCardView" xmlns:controls="clr-namespace:PanCardView.Controls;assembly=PanCardView" x:Class="RCBazaar.Views.HomeView" Padding="0" x:Name="HomePage"> </Style> </ResourceDictionary> </ContentPage.Resources>-->

<ContentPage.Content>

    <Grid  Style="{StaticResource MainGrid}">
        <Grid.RowDefinitions>
            <RowDefinition  Height="140"></RowDefinition>
            <RowDefinition  Height="Auto"></RowDefinition>
            <RowDefinition  Height="*"  ></RowDefinition>
        </Grid.RowDefinitions>

        <cards:CarouselView  Margin="0"  x:Name="carousel" Grid.Row="0"  ItemsSource="{Binding ProductImage,Mode=TwoWay}" >
            <cards:CarouselView.ItemTemplate>
                <DataTemplate>
                    <ffimageloading:CachedImage HorizontalOptions="FillAndExpand" Source="{Binding ImageName}" Style="{StaticResource CachedImageStyle}">
                    </ffimageloading:CachedImage>
                </DataTemplate>
            </cards:CarouselView.ItemTemplate>
            <controls:IndicatorsControl ToFadeDuration="1500"  BackgroundColor="Gray"/>
            <controls:LeftArrowControl  ToFadeDuration="2500" BackgroundColor="Gray" />
            <controls:RightArrowControl ToFadeDuration="2500" BackgroundColor="Gray"/>
        </cards:CarouselView>



        <Image Grid.Row="1" Margin="0,0,10,0" Source="ic_sort.png" HeightRequest="30" WidthRequest="30"  HorizontalOptions="EndAndExpand">
            <Image.GestureRecognizers>
                <TapGestureRecognizer Command="{Binding SortPopupCommand}"/>
            </Image.GestureRecognizers>
        </Image>

        <ListView IsEnabled="True"  HeightRequest="{Binding ListHeight}"  CachingStrategy="RecycleElement" x:Name="mylist" Style="{StaticResource ListviewStyle}" Grid.Row="2" SelectedItem="{Binding SelectedProduct,Mode=TwoWay}"  ItemsSource="{Binding HomeProducts}" >
            <ListView.Behaviors>
                <behaviors:EventToCommandBehavior EventName="ItemSelected"   Command="{Binding HomeProductSelectedCommand}"></behaviors:EventToCommandBehavior>
            </ListView.Behaviors>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <template:ProductCell ParentBindingContext="{Binding Source={x:Reference mylist}, Path=BindingContext}"/>

                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>


        <ActivityIndicator Grid.Row="2"  VerticalOptions="Start"   IsVisible="{Binding IsBusy,Mode=TwoWay}" IsRunning="{Binding IsBusy,Mode=TwoWay}" Color="Blue"/>

    </Grid>

</ContentPage.Content>

ProductCell

<ViewCell.View>
    <Grid   RowSpacing="5" Style="{StaticResource ProductTemplateGrid}"  >
        <Grid.RowDefinitions>
            <RowDefinition Height="28*"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="40*"/>
            <ColumnDefinition Width="60*"/>
        </Grid.ColumnDefinitions>

        <ffimageloading:CachedImage  x:Name="img" VerticalOptions="FillAndExpand" Style="{StaticResource CachedImageStyle}" Aspect="AspectFit"  Grid.Row="0" Source="{Binding PictureBinary,Converter={StaticResource Base64StringToImageConverter}}" Grid.RowSpan="5" Grid.Column="0">
            <ffimageloading:CachedImage.GestureRecognizers>

                <TapGestureRecognizer BindingContext="{Binding Source={x:Reference mylist}, Path=ParentBindingContext}" Command="{Binding ViewImageCommand}" CommandParameter="{Binding PictureBinary}"/>
            </ffimageloading:CachedImage.GestureRecognizers>
        </ffimageloading:CachedImage>


        <Label Grid.Row="0"  Grid.Column="1" MaxLines="2" LineBreakMode="TailTruncation"  Style="{StaticResource lblDarkBody}"  Text="{Binding Name}" ></Label>

        <Label Grid.Row="1" Grid.Column="1" Text="{local:Translate SKU}" Style="{StaticResource lblNormal}"></Label>
        <Label Margin="35,0,0,0" Grid.Row="1" Grid.Column="1" Text="{Binding upc}" Style="{StaticResource lblNormal}"    />

        <Label Grid.Row="2" Grid.Column="1" Text="{local:Translate Stock}"  Style="{StaticResource lblNormal}" VerticalOptions="Center" ></Label>
        <Image Margin="45,0,0,0" Grid.Row="2" Grid.Column="1" VerticalOptions="Center" HorizontalOptions="StartAndExpand" Source="{Binding qtyonhand,Converter={StaticResource QuantityToColorConverter}}" />

        <uc:CustomRatingBar  Grid.Row="3" Grid.Column="1"  Style="{StaticResource RatingsStyle}"     x:Name="CusRatingBar"  Rating="{Binding RatingSum}" />

        <Image Grid.Row="4" Grid.Column="1"  Source="in.png" HorizontalOptions="Start" VerticalOptions="Center"/>
        <Label Margin="30,0,0,0"  Grid.Row="4" Grid.Column="1" VerticalOptions="Center" Style="{StaticResource lblEmphasis}"  Text="{Binding pricelist,StringFormat='Rs {0:#,0.#0}'}" ></Label>

        <Image Grid.Row="4" Grid.Column="1" Margin="0,0,10,0" WidthRequest="30" HeightRequest="30" VerticalOptions="Center"  Style="{StaticResource StockCachedImageStyle}"  Source="heartdark.png"  HorizontalOptions="End">

            <Image.GestureRecognizers>
                <TapGestureRecognizer BindingContext="{Binding Source={x:Reference mylist}, Path=ParentBindingContext}"  Command="{Binding AddtoWishlistCommand}" CommandParameter="{Binding .}" />
            </Image.GestureRecognizers>
        </Image>

    </Grid>
</ViewCell.View>

@praveenaHM - You supposed to comment/inform that Mich.. See my update question. Then only person(who asked) come to know that you have update your question. — R15

Unknown Unknown · Accepted Answer · 2019-02-15T12:17:35

If you give the page in question an x:Name in your XAML you can then refer to the origional BindingContext (should be your ViewModel) while also having access to the item itself as BindingContext for the commandparameter. Looks something like this:

<ContentPage x:Name="MyContentPage"
....
<!--inside your DataTemple you can now reference the BindingContext of your page-->
Command="{Binding Path=BindingContext.HomeProductSelectedCommand, Source={x:Reference MyContentPage}} CommandParameter="{Binding .}"
…

This example passes the bindingcontext of the item (by default that's the item itself) to the command parameter

CommandParameter giving null value when use DataTemplate for listview in xamarin forms

1 Answers