将大图像加载到 WPF 应用程序 - 滚动和绘图都需要

Question

我知道如何只做其中一个请求，而不是两个。

为了加载大图像并能够滚动查看其所有部分，我将图像添加到 <ScrollViewer/> 中并得到了我需要的东西。

为了在图像上绘图，我能够将该图像加载为<Canvas/> 的背景。

但是如何做到这两点呢？

基本上，我有一个我不想缩小的非常大的图像，并且该图像上绘制了一堆房间（例如建筑物的平面图）。我有房间的坐标，当用户在房间内点击时，我想用颜色填充那个房间（目前我只有一个显示“房间 1 已被点击”的列表框）。

已编辑的 XAML（用于缩小图像）：

    <Grid Margin="10">
    <Grid.RowDefinitions>
        <RowDefinition Height="30" />
        <RowDefinition Height="*" />
        <RowDefinition Height="200" />
    </Grid.RowDefinitions>

    <ComboBox x:Name="buildingCombo" Grid.Row="0" ItemContainerStyle="{DynamicResource ComboItemStyle}" Tag="{Binding}"
              Template="{StaticResource ComboBoxTemplate}"  Width="1000" SelectionChanged="buildingCombo_SelectionChanged"/>

    <Grid Grid.Row="1">

        <ScrollViewer  Grid.Column="0"  HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
            <Canvas Width="{Binding ActualWidth, ElementName=image}" Height="{Binding ActualHeight, ElementName=floorPlanImage}" >
                <Canvas.Background>
                    <VisualBrush  >
                        <VisualBrush.Visual>
                            <Image Grid.Column="0" Stretch="None" x:Name="floorPlanImage" MouseLeftButtonDown="Image_MouseLeftButtonDown"/>
                        </VisualBrush.Visual>
                    </VisualBrush>
                </Canvas.Background>
            </Canvas>
        </ScrollViewer>
    </Grid>

    <DataGrid Grid.Row="2" ColumnHeaderStyle="{DynamicResource GridViewColumnHeaderStyle}" Background="LightGray" RowBackground="LightYellow" AlternatingRowBackground="LightBlue" 
              x:Name="dataGridViewRoomQuery"  BorderBrush="Gray" BorderThickness="5"/>

</Grid>

Answer 1

您可以将Canvas 的大小设置为您设置为Background 的Image 的大小，这将允许您使用ScrollViewer 并在设置时保持正确的Image 大小作为CanvasBackground

例子：

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
    <Canvas Width="{Binding ActualWidth, ElementName=image}" Height="{Binding ActualHeight, ElementName=image}" >
        <Canvas.Background>
            <VisualBrush  >
                <VisualBrush.Visual>
                    <Image x:Name="image" Source="/WpfApplication10;component/Capture.PNG"  />
                </VisualBrush.Visual>
            </VisualBrush>
        </Canvas.Background>
    </Canvas>
</ScrollViewer>

结果：