Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

binding failure with DataTrigger

ahmedElsayedahmedElsayed USMember ✭✭
edited July 2018 in Xamarin.Forms

using xamarin forms v3 & prism

I want to use data trigger to change image source which is item within list view.

I have A dynamic Tabbed Page with a child of content page as the following

        Title="{Binding Path=Labels[News]}"
        ItemsSource="{Binding TabItem}" SelectedItem="{Binding TappedItem}"  x:Name="externalList" >
                <local:BooleanToFlowDirection x:Key="BoolToDirection" />
                <local:InverseBooleanConverter x:Key="InverseBoolean"/>
          <ETC:EventToCommandBehavior EventName="CurrentPageChanged" Command="{Binding TabSelectedCommand}"
          CommandParameter="{Binding .}" />
          <ContentPage Title="{Binding Name}" FlowDirection="{Binding Source={x:Reference Name=externalList},
                        Path=BindingContext.RTL,Converter={StaticResource BoolToDirection}}"  BackgroundColor="#941a24">
            <AbsoluteLayout HorizontalOptions="FillAndExpand" >
                <ListView  x:Name="parentLayout" HasUnevenRows="True" ItemsSource="{Binding Source={x:Reference Name=externalList},
                        Path=BindingContext.NewsList.NewsList,Mode=TwoWay}" SelectedItem="{Binding Source={x:Reference 
             externalList},Path=BindingContext.TappedNewItem}" SeparatorVisibility="None" AbsoluteLayout.LayoutFlags="All" 
                                    <Frame  BackgroundColor="White" CornerRadius="5" Margin="5,5,5,5" Padding="0">
                                            <StackLayout Orientation="Horizontal" Grid.Row="4" Margin="10,5,10,10">
                                                <Image   HeightRequest="17" WidthRequest="17"  HorizontalOptions="Start">
                                                        <TapGestureRecognizer Command="{Binding Source={x:Reference externalList},Path=BindingContext.LikeCommand}"
                                                                              CommandParameter="{Binding Source={x:Reference Item},Path=BindingContext}">
                                                        <DataTrigger TargetType="Image" 
                                                                    Binding="{Binding Liked}"
                                                                    Value="false" >
                                                            <Setter Property="Source" Value="LikeInactive.png"/>
                                                        <DataTrigger TargetType="Image" 
                                                                    Binding="{Binding Liked}"
                                                            <Setter Property="Source" Value="LikeActive.png"/>


In the View Model the LikeCommand

       private void _LikeCommand(object obj)
    NewItem = obj as NewsItemViewModel;
    if (NewItem.Liked)
        NewItem.Liked = false;
        NewItem.Liked = true;
    NewsList.NewsList.Where(a => a.NewsId == NewItem.NewsId).Select(a => a.Liked=true);    

Liked which is bound with the trigger is just a property inside the NewsList.NewsList.

in this scenario the data trigger fails and the image does not change.

Another scenario when I create a Liked property in the View Model Like that

       public NewsItemViewModel NewItem
        return _NewItem;
        _NewItem = value;

and change the command to

    private void _LikeCommand(object obj)

    if (Liked)
        Liked = false;
        Liked = true;


and change the binding of Trigger to

     Binding="{Binding Source={x:Reference externalList},Path=BindingContext.Liked}"

the image changes but for all List view Items.

Best Answer


Sign In or Register to comment.