Loading a large image to a WPF app - Scrolling and Drawing both needed

Question

I have an idea of how to do only one of these req's, not both of them.

For loading a large image and be able to scroll to see all its parts, I added the image inside a <ScrollViewer/> and got what I needed.

For drawing on the image, I was able to load that image as the background of an <Canvas/>.

But how to accomplish both?

Basically, I have a very big image that I don't want to shrink, and that image has a bunch of rooms drawn on it (like a floor plan of a building). I have the coordinates of the rooms, and when a user clicks inside a room, I want to fill that room with color (currently i just have a listbox that says "Room 1 has been clicked").

Editted XAML (for shrinking image):

    <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

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: