When I want to scale Canvas with background it don’t work the way I want. The background is the same and only content of Canvas is scaling. But if I change Canvas to InkCanvas it work good but because InkCanvas don’t support MouseLeftButtonDown event I have to use Canvas.
It’s my code
<ScrollViewer Grid.Column="1" HorizontalScrollBarVisibility="Visible">
<Canvas x:Name="CanvasChart" MouseMove="CanvasChart_MouseMove" MouseLeave="CanvasChart_MouseLeave"
Grid.Column="1" Margin="20 20 20 20">
<Canvas.Background >
<ImageBrush Stretch="UniformToFill" ImageSource="D:\Praca\JanarMapy\JanarMapy\Maps\Montenegro_Map.png"></ImageBrush>
</Canvas.Background>
<Canvas.LayoutTransform>
<ScaleTransform
ScaleX="{Binding Path=Value, ElementName=zoomSlider}"
ScaleY="{Binding Path=Value, ElementName=zoomSlider}"/>
</Canvas.LayoutTransform>
</Canvas>
</ScrollViewer>
At first you would have to disable automatic stretching of the background ImageBrush to see any scaling effect:
But note that a brush does not participate in layout calculations. If your intention is to resize the content of the ScrollViewer by a scaling transform you should consider the following solution, in which the Grid will always have at least the size of the Image.
As an alternative that works in a similar way as with InkCanvas you could set a fixed size for the Canvas: