How to place Image in PageControl correctly

[Edwin_Reynoso]

So in this app where feed is just an observable with a bunch of objects (not releavant):

<App Theme="Basic" Background="#DDD">
    <JavaScript File="MainView.js" />
    <DockPanel>
        <ScrollView ux:Name="feed">
            <StackPanel Alignment="TopCenter">
                <ColumnLayout ColumnSize="380" />
                <Each Items="{feed}">
                    <StackPanel Background="#fff" Margin="15,4">
                        <DropShadow Distance="8" />
                        <Text Alignment="Center" Value="Name" Padding="0,5" FontSize="30" TextAlignment="Center" TextWrapping="Wrap" />
                        <Text Alignment="Center" Padding="0,5" FontSize="20" TextColor="#333" TextAlignment="Center" TextWrapping="Wrap" Value="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta et molestiae iste quis omnis, voluptatem facere atque aliquam voluptate natus inventore, possimus commodi, impedit fuga sapiente consequuntur quo sequi consequatur dolore nihil aspernatur mollitia rerum. In velit omnis quod, explicabo?" />
                        <PageControl>
                            <DropShadow Distance="8" />
                            <Image File="Assets/background1.png" BoxSizing="FillAspect" StretchMode="Fill" Margin="10,0" />
                            <Image File="Assets/background2.png" BoxSizing="FillAspect" StretchMode="Fill" Margin="10,0" />
                            <Image File="Assets/background3.png" BoxSizing="FillAspect" StretchMode="Fill" Margin="10,0" />
                        </PageControl>
                    </StackPanel>
                </Each>
            </StackPanel>
        </ScrollView>
    </DockPanel>
</App>

Looking at this photo you can see the image as I swipe is on top of the white <StackPanel>:

How do I get the <Image> to seem as if its coming out of the white <StackPanel> like so, in the following edited image:

Excuse my mspaint skills but as you can see the middle card that effect is what I want, where when I’m sliding the Images they are behind the white StackPanel

[Kristian_Hasselknipp]

Try surrounding each in a

Something like this:

<PageControl>
    <Page><Image ..... /></Page>
    <Page><Image ..... /></Page>
    <Page><Image ..... /></Page>
</PageControl>

Hope this helps

[Anders_Lassen]

I can’t make out exactly what you are trying to do, but does <PageControl ClipToBounds="true"> help?

[Thomas_Bolander]

I think you need to wrap your images in <Page> elements. Try check this https://www.fusetools.com/learn/fuse#keyword-pagecontrol

[Edwin_Reynoso]

No @privat and @kristan that is no longer necessary since version 0.10 and sadly that didn’t work (check out: https://www.fusetools.com/downloads#changes-and-improvements-to-pagecontrol)

What @Anders said almost works but I still have this little gap as you can see in the following image:

Changing the Margin on the images does not get rid of that little gap, neither does changing the Margin on the parent StackPanel

[Anders_Lassen]

Put margin on your PageControl

[Edwin_Reynoso]

This picture is a bit more accurate you can see it coming from outside the white StackPanel, I want it to come from the inside of the StackPanel:

[Anders_Lassen]

If you put margin on your PageControl and ClipToBounds="true", you should get that. Also, put the drop shadow on the images, not the pagecontrol.

[Edwin_Reynoso]

Yea @Anders that works thanks, (I still think its a weird behavior) shouldn’t ClipToBounds clip it to the edge no matter what the margin is on the PageControl

and for some reason putting the DropShadow on the images doesn’t show the dropshadow, the DropShadow on the PageControl works just fine so I’ll leave that part alone.