Surface ScatterViewItem background not transparent

Question

I'm working on a Microsoft Surface and attaching a round image object to a ScatterViewItem. I'm having an issue hiding the background of the square ScatterViewItem. If I go in and set the background to transparent, it's not transparent, it's more like gray translucent. So what I end up with is a round image in the middle sitting on a square with gray translucent edges. How do I hide this? I'm doing this programmatically through C#.

Answer 1

What you're seeing isn't really the svi background, but the shadow that is part of the default template. If you want to get rid of the shadow, you need to redefine the control template.

So like this:

<s:ScatterView>
    <s:ScatterViewItem Background="Transparent">
        <s:ScatterViewItem.Template>
            <ControlTemplate>
                <TextBlock>Hello World</TextBlock>
            </ControlTemplate>
        </s:ScatterViewItem.Template>
    </s:ScatterViewItem>
</s:ScatterView>

Be aware that if you replace it like that, you lose all the other little visual flare like the 'pick up' effect and the shimmer. If you want to keep those, just use blend to edit a copy of the existing template and remove the shadow.