Dissociate Control zone from Image in a ScatterViewItem

Question

I would like to make a selection zone smaller than the ScatterViewItem himself. I tried many things but nothing worked.I have the following image as a ScatterViewItem :

I'd like to make ONLY the red circle (and the insideof it) clickable as a starting point for usual Scatterview manipulations.

Any idea who i should proceed ? Thanks in advance.

Answer 1

Assuming that you set the visual appearance of the ScatterViewItem by setting its template, you might do something similar to the example shown below. It sets the IsHitTestVisible property of the image to false and overlays it with a smaller transparent circle to receive input.

<s:ScatterViewItem>
    <s:ScatterViewItem.Template>
        <ControlTemplate>
            <Grid>
                <Image Source="..." IsHitTestVisible="False"/>
                <Ellipse Fill="Transparent" Margin="20"/>
            </Grid>
        </ControlTemplate>
    </s:ScatterViewItem.Template>
</s:ScatterViewItem>