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的内容，您应该考虑以下解决方案，其中Grid将始终至少具有Image的大小。

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

使用ImageBrush背景缩放画布

1 个答案: