将大图像加载到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尺寸设置为您设置为Image的{​​{1}}的尺寸，这样您就可以使用Background并保持设置为ScrollViewer Image

时的正确Canvas尺寸

示例：

Background

结果：