Don't scale ImageBrush while resizing, Repeat it!

Question

I have a problem with ImageBrush:

<Window ... >
    <Grid>
        <Grid.Background>
            <ImageBrush ImageSource="Controls\Images\notebook_paper_Line.jpg" TileMode="FlipX"
                        Viewport="0,0,1,0.09" />
        </Grid.Background>        
    </Grid>
</Window>

I want to repeat image while user resizing window. But currently image gets scale while user resizing window. (Note that image size is small and I use TileMode and Viewport to repeat it, And problem occurs while resizing it!).

Any XAML code will be great! :)

and i'm sorry for bad english!!!

Answer 1

By default, the Viewport for a TileBrush is 0,0,1,1 and the ViewportUnits are RelativeToBoundingBox, meaning that 0,0,1,1 maps to the entire destination size (in this case, the bounds of the Grid).

So if you want to tile an ImageBrush, you will want to adjust the Viewport. If you were to set the Viewport to 0,0,.5,.5, you should see images tiled 2 x 2 (since each tile will be 50%x50% the size of the Grid), or 0,0,0.25,0.1 would produce a 4x10 tiling, etc...

However, that still doesn't prevent the image from rescaling. So in your case, what you probably want is to set the viewport to the size of your image, and set the ViewportUnits to Absolute instead of RelativeToBoundingBox.

In the xaml below I have a 24x24 pixel image, so I set my viewport accordingly. This tiles the image repeatedly for the full size of the grid. If the grid is resized, more tiles will appear.

<ImageBrush ImageSource="Images\book_green.png" TileMode="FlipX" 
            Viewport="0,0,24,24" ViewportUnits="Absolute" />

I hope that helps.