WPF - InkCanvas - Background Image

Question

I successfully changed the background of my InkCanvas from code behind with image using following code:

ImageBrush imageBrush = new ImageBrush();
imageBrush.ImageSource = new BitmapImage(new Uri("temp.jpg", UriKind.Relative));
inkCanvas1.Background = imageBrush;

Now I want to resize the resolution of background image only. For example, if my InkCanvas size is 500 x 500, I want to show the background image in my InkCanvas at center with resolution of 300 x 300.

Is this possible ? Any help in this regard will be highly appreciated..

Answer 1

This, of course, there are even many ways, for instance, you can set the RelativeTransform property:

<InkCanvas.Background>
    <ImageBrush>
        <ImageBrush.RelativeTransform>
            <TransformGroup>
                <ScaleTransform CenterY="0.5" CenterX="0.5" ScaleX="2" ScaleY="2"/>
            </TransformGroup>
        </ImageBrush.RelativeTransform>
    </ImageBrush>
</InkCanvas.Background>

That way, your background image is twice the size of the previous one. If you want more precise control of the background, you can use the VisualBrush, just like below:

<Grid.Background>
    <VisualBrush>
        <VisualBrush.Visual>
            <Image Width="200" Height="200"></Image>
        </VisualBrush.Visual>
    </VisualBrush>
</Grid.Background>