7

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:

Current background image

How it should look:

How I want it to look

Shawn J. Molloy
  • 2,457
  • 5
  • 41
  • 59

2 Answers2

12

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>
BradleyDotNET
  • 60,462
  • 10
  • 96
  • 117
  • Thank you @LordTakkera; this solution works great! Elegant and straightforward, this is exactly what I was looking for. And +1 for mentioning the CenterX and CenterY adjustments, which ended up being required to make this look right. Gotta love XAML! Thanks again. – Shawn J. Molloy Dec 26 '13 at 19:05
  • No problem. You can also rotate, translate, and skew ui elements with similar code. You can even combine them if you wrap them in a TransformGroup collection. – BradleyDotNET Dec 26 '13 at 21:49
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>
Erti-Chris Eelmaa
  • 25,338
  • 6
  • 61
  • 78
  • I forgot to mention, this is a Windows 8 (Windows Store) app. I tried this solution but ViewPort is not available in the windows runtime framework. Thanks though - any other ideas? – Shawn J. Molloy Dec 24 '13 at 05:25
  • You can wrap the grid into another Grid and use ScaleTransformon it. I've updated the post. Shouldn't it work? – Erti-Chris Eelmaa Dec 26 '13 at 20:38
  • Thanks for the Windows 8 update @Erti-Chris Eelmaa I can verify that this does in fact work for Windows Runtime (Windows Store AKA Windows 8 Metro Apps). There is an awful lot missing from WinRT that us WPF folk take for granted. DataTriggers come to mind... anyway thanks again. – Shawn J. Molloy Dec 29 '13 at 21:53