使用ImageBrush背景缩放画布

Question

当我想用背景缩放画布时，它不能以我想要的方式工作。背景是相同的，只有画布内容是缩放的。但是如果我将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类似的工作方式，您可以为画布设置固定的大小：

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