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

Question

我知道如何只做其中一个req,而不是两个.

为了加载大图像并能够滚动查看其所有部分,我在a里面添加了图像<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已设置为Background,这将允许您使用ScrollViewer,并保持正确的Image大小时设置为Canvas Background

例:

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

结果: