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

       <TabbedPage 
        Title="{Binding Path=Labels[News]}"
        ItemsSource="{Binding TabItem}" SelectedItem="{Binding TappedItem}"  x:Name="externalList" >
        <TabbedPage.Resources>
            <ResourceDictionary>
                <local:BooleanToFlowDirection x:Key="BoolToDirection" />
                <local:InverseBooleanConverter x:Key="InverseBoolean"/>
            </ResourceDictionary>
          </TabbedPage.Resources>
          <TabbedPage.Behaviors>
          <ETC:EventToCommandBehavior EventName="CurrentPageChanged" Command="{Binding TabSelectedCommand}"
          CommandParameter="{Binding .}" />
         </TabbedPage.Behaviors>
          <TabbedPage.ItemTemplate>
          <DataTemplate>
          <ContentPage Title="{Binding Name}" FlowDirection="{Binding Source={x:Reference Name=externalList},
                        Path=BindingContext.RTL,Converter={StaticResource BoolToDirection}}"  BackgroundColor="#941a24">
           <ContentPage.Content>
            <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" 
             AbsoluteLayout.LayoutBounds="0,0,1,1">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <ViewCell.View>
                                    <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">
                                                    <Image.GestureRecognizers>
                                                        <TapGestureRecognizer Command="{Binding Source={x:Reference externalList},Path=BindingContext.LikeCommand}"
                                                                              CommandParameter="{Binding Source={x:Reference Item},Path=BindingContext}">
                                                        </TapGestureRecognizer>
                                                    </Image.GestureRecognizers>
                                                    <Image.Triggers>
                                                        <DataTrigger TargetType="Image" 
                                                                    Binding="{Binding Liked}"
                                                                    Value="false" >
                                                            <Setter Property="Source" Value="LikeInactive.png"/>
                                                        </DataTrigger>
                                                        <DataTrigger TargetType="Image" 
                                                                    Binding="{Binding Liked}"
                                                                    Value="true">
                                                            <Setter Property="Source" Value="LikeActive.png"/>
                                                        </DataTrigger>
                                                    </Image.Triggers>
                                                </Image>
                                            </StackLayout>
                                        </Grid>
                                    </Frame>
                                </ViewCell.View>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </AbsoluteLayout>
        </ContentPage.Content>
    </ContentPage>
</DataTemplate>

</TabbedPage.ItemTemplate>

In the View Model the LikeCommand

       private void _LikeCommand(object obj)
{
    NewItem = obj as NewsItemViewModel;
    if (NewItem.Liked)
    {
        NewItem.Liked = false;
    }
    else
    {
        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
{
    get
    {
        return _NewItem;
    }
    set
    {
        _NewItem = value;
        RaisePropertyChanged();
    }
        }

and change the command to

    private void _LikeCommand(object obj)
{

    if (Liked)
    {
        Liked = false;
    }
    else
    {
        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

Answers

Sign In or Register to comment.