CODEWITHSUNDEEP
imagetriggerswindows-phone-8longlistselector
Catalin G
Catalin G

Reputation: 71

ChangePropertyAction on Image Control in LongListSelector item template

I have a long list selector and i have a datatemplate as item template, containing an image. I want the source to change based on a property from the model. I tried with a converter but i could't get it to work.

Now i'm trying with triggers. I have:

<Image Name="MovieThumbnail">
<i:Interaction.Triggers>
    <ei:DataTrigger Binding="{Binding DataContext.IsCategoryCurrent,ElementName=LayoutRoot}" Value="true">
        <ei:ChangePropertyAction TargetObject="{Binding ElementName=MovieThumbnail}" TargetName="Source" Value="{Binding Path=Image120x170}" PropertyName="Source"/>
    </ei:DataTrigger>

    <ei:DataTrigger Binding="{Binding DataContext.IsCategoryCurrent,ElementName=LayoutRoot}" Value="false">
        <ei:ChangePropertyAction TargetObject="{Binding ElementName=MovieThumbnail}" TargetName="Source" Value="{x:Null}" PropertyName="Source"/>
    </ei:DataTrigger>
</i:Interaction.Triggers>
</Image>

It work almost how i want it to, except that images repeat themselves. As in a movie has the picture of another movie. I think it's because i bind by element name and the image control has multiple instances (one for each item), but i would think they can't see each other. Any help highly appreciated.

EDIT:

After further investigation, it seems that this happens because of the long list selector.

I first load 40 items, and then load another 40, but the second batch of 40 items get the pictures from the first batch. If i raise a property changed event, then the pictures from the second batch are set on all items repeating themselves. I have no idea why this is happening.

If i load another 40 and raise property changed on IsCategoryCurrent again, the pictures from the 3rd batch get set 3 times.

Upvotes: 2

Views: 1760

Answers (1)

Catalin G
Catalin G

Reputation: 71

I managed to fix it:

<Image 
   Grid.RowSpan="2"
   Name="MovieThumbnail" 
   Stretch="Fill"
   Width="130" Height="195"
   HorizontalAlignment="Center"
   VerticalAlignment="Center">
<i:Interaction.Triggers>
    <ei:DataTrigger Binding="{Binding DataContext.IsCategoryCurrent,ElementName=LayoutRoot}"
                    Value="true">
        <ei:ChangePropertyAction TargetObject="{Binding ElementName=MovieThumbnail}"
                                 TargetName="Source"
                                 PropertyName="Source">
            <ei:ChangePropertyAction.Value>
                <BitmapImage CreateOptions="BackgroundCreation"
                             UriSource="{Binding Path=Image120x170}"/>
            </ei:ChangePropertyAction.Value>
        </ei:ChangePropertyAction>
    </ei:DataTrigger>
    <ei:DataTrigger Binding="{Binding DataContext.IsCategoryCurrent,ElementName=LayoutRoot}"
                    Value="false">
        <ei:ChangePropertyAction TargetObject="{Binding ElementName=MovieThumbnail}"
                                 TargetName="Source"
                                 Value="{x:Null}"
                                 PropertyName="Source"/>
    </ei:DataTrigger>
</i:Interaction.Triggers>
</Image>

And i raise a property changed event of IsCategoryCurrent at every change.

Upvotes: 2

Related Questions