Масштабирование холста с помощью фона ImageBrush

Question

Когда я хочу масштабировать Canvas с фоном, он не работает так, как я хочу.Фон такой же, и только содержимое Canvas масштабируется.Но если я изменю Canvas на InkCanvas, он будет работать хорошо, но поскольку InkCanvas не поддерживает событие MouseLeftButtonDown, я должен использовать Canvas.

Это мой код

 <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>

Answer 1

Сначала вам придется отключить автоматическое растяжение фона ImageBrush, чтобы увидеть любой эффект масштабирования:

<ImageBrush Stretch="None" ... />

Но учтите, что кисть не участвует в вычислениях макета.Если вы намереваетесь изменить размер содержимого ScrollViewer с помощью масштабирующего преобразования, вы должны рассмотреть следующее решение, в котором сетка всегда будет иметь размер изображения не менее.

<ScrollViewer Grid.Column="1" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible">
    <Grid Margin="20 20 20 20">
        <Grid.LayoutTransform>
            <ScaleTransform ScaleX="{Binding Path=Value, ElementName=zoomSlider}" 
                            ScaleY="{Binding Path=Value, ElementName=zoomSlider}"/>
        </Grid.LayoutTransform>
        <Image Source="D:\Praca\JanarMapy\JanarMapy\Maps\Montenegro_Map.png"
               Stretch="None"/>
        <Canvas x:Name="CanvasChart"/>
    </Grid>
</ScrollViewer>

В качестве альтернативыработает аналогично InkCanvas, вы можете установить фиксированный размер для Canvas:

<ScrollViewer Grid.Column="1" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible">
    <Canvas x:Name="CanvasChart" Margin="20 20 20 20"
            Width="500" Height="400">
        <Canvas.Background >
            <ImageBrush Stretch="UniformToFill" ImageSource="D:\Praca\JanarMapy\JanarMapy\Maps\Montenegro_Map.png"/>
        </Canvas.Background>
        <Canvas.LayoutTransform>
            <ScaleTransform ScaleX="{Binding Path=Value, ElementName=zoomSlider}" 
                            ScaleY="{Binding Path=Value, ElementName=zoomSlider}"/>
        </Canvas.LayoutTransform>
    </Canvas>
</ScrollViewer>