Image overlay in a flipview

Question

I have this XAML code:

 <FlipView x:Name="models_list" Width="432" Height="286" Canvas.Left="89" Canvas.Top="80" ScrollViewer.VerticalScrollBarVisibility="Hidden" >
            <FlipView.ItemTemplate>
                <DataTemplate>
                    <Grid x:Name="imgGrid">
                        <Image x:Name="img1" Source = "{Binding}" Stretch="Fill" />
                        <Image x:Name="img2" Source = "{Binding}" Stretch="Fill" />
                    </Grid>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>

I want to be able to overlay images on this basic image 'img1' in the grid 'imgGrid'. img1 gets populated when i add items to flipview through this code:

        foreach (StorageFile model in models)
        {
            models_list.Items.Add(new Uri("ms-appx:///Images/Models/" + model.Name));
        }

How can I bind img2 to get values on a specific event?

score 0 · Accepted Answer · answered Mar 24 '13 at 05:00

0

It seems like you might be asking the wrong question. You can overlay another image on top of img by just typing in another line below the Image named img. You can also do that by putting an Image control below the </FlipView> line. You would then control that overlaid image with additional item bindings.

If you need some more control over what's in a single FlipViewItem - you can put your entire imgGrid Grid in a UserControl and put that UserControl in the DataTemplate.

answered Mar 24 '13 at 05:00

Filip Skakun

31,624
6
74
100

I want to be able to add a child image in this imgGrid so that it appears on top of img. The problem I am now having is that when I add child image to this grid it appears on the top of all the images in the flipview and not just the one which is in focus at the moment. I flip through images in flipview and the newly added image stays on top. Is there any way I can make it go away with the image I added it on top of? – Tehreem Mar 28 '13 at 19:17
What I am understanding from this situation is that it generates only one grid for all the image items in flipview. Is that possible? Shouldn't it generate a separate grid whenever I add an image to the flipview? – Tehreem Mar 28 '13 at 19:23
I don't know where you are adding your child image, but if you read my answer again you might see what should work. The `DataTemplate` defines the content of each item in the `FlipView`, so if you modify the DataTemplate to have two images - it will have two images for each `FlipViewItem` in the `FlipView`. Now how `FlipView` virtualizes its items I am not sure. Based on what I saw people talking about on Stack Overflow - it seems like it might be reusing the `DataTemplate` content once instantiated, but that should not be a problem for you if you bind your `Image` controls correctly. – Filip Skakun Mar 28 '13 at 20:06
I do not understand how to make a UserControl. Can you point me where I can find out? However I added another image under img. Now when I add images to flipview, it repeats img1 for all images which is fine. How can I bind img2 to get images? I want to be able to add image to img2 control when a specific event occurs (user clicks on some other image in the application). – Tehreem Mar 29 '13 at 08:16

Image overlay in a flipview

1 Answers1

Linked