4

我知道如何只做这些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>
4

1 回答 1

8

You could just set the Canvas size to the Size of the Image that you have set as the Background, This will allow you to use the ScrollViewer and keep the correct Image size when set as the Canvas Background

Example:

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

Result:

enter image description here

于 2013-04-07T23:21:05.287 回答