wpf - 将大图像加载到 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的尺寸您已设置为 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>

结果: