Adjust the size of a XAML Grid.Background Image

Question

I have a simple piece of XAML that lays out a group of tiles, each with a background image icon.

                <Grid.Background>
                    <ImageBrush Stretch="None" 
                                ImageSource="{Binding ImageSource}" 
                                AlignmentY="Center" 
                                AlignmentX="Center"/>
                </Grid.Background>

This works fine, except the background image fills the square perfectly. I'm sure XAML thinks this is fine, but actually it needs to be about half the size to match spec.

I tried several things including adding a border to the grid (which truncates the background image, keeping the dimensions but cutting it off on the sides and top) and adding margins and paddings in various places.

I also played with making this a normal but everything floats over top of this background image so that is not an option.

Finally I should mention this is a Windows 8 Windows Store app using Windows Runtime, so certain features in WPF aren't available to me here (like ViewPort).

Question: how do you adjust the size/dimensions of a XAML grid background image?

Sidenote: I think the solution may lie in a transform... ?

Update: per poster request here is what the expected result should be. Even though it appears no float over the background image takes place here, in other places text floats over the background. That is why it needs to be a and not an element.

How it looks now:

How it should look:

Answer 1

A scale render transfrom should do what you want: (You may need to set CenterX and CenterY to get it to look exactly the way you want)

    <Grid.Background>
        <ImageBrush Stretch="None" 
                        ImageSource="{Binding ImageSource}" 
                        AlignmentY="Center" 
                        AlignmentX="Center">
            <ImageBrush.Transform>
                <ScaleTransform ScaleX=".5" ScaleY=".5"/>
            </ImageBrush.Transform>
        </ImageBrush>
    </Grid.Background>

Answer 2

You can squeeze the ImageBrush into your custom ViewPort so that it would take the size you want it to.

There's some information: http://keyvan.io/viewbox-and-viewport-in-windows-presentation-foundation

If you want to cut it half, then your start x & y should be 0.25 and end x,y 0.75. Something like this should do trick:

            <Grid.Background>
                <ImageBrush Stretch="None" 
                            ImageSource="{Binding ImageSource}" 
                            AlignmentY="Center" 
                            AlignmentX="Center"
                            Viewport="0.25, 0.25, 0.75, 0.75"/>
            </Grid.Background>

//Edit for Win8 maybe:

<Grid>
<Grid>
    <Grid.RenderTransform>
        <ScaleTransform RenderTransformOrigin="0.5, 0.5" ScaleX="0.5" ScaleY="0.5" />
    </Grid.RenderTransform>

    <Grid.Background>
    <ImageBrush Stretch="None" 
        ImageSource="{Binding ImageSource}" 
        AlignmentY="Center" 
        AlignmentX="Center"/>
    </Grid.Background>
</Grid>
</Grid>