Загрузка большого изображения в приложение WPF - требуется прокрутка и рисование

Question

У меня есть идея, как сделать только один из этих req, а не их обоих.

Для загрузки большого изображения и возможности прокрутки, чтобы увидеть все его части, я добавил изображение внутри <ScrollViewer/> и получил то, что мне нужно.

Для получения изображения, я смог загрузить это изображение в качестве фона <Canvas/>.

Но как выполнить оба?

В принципе, у меня очень большое изображение, которое я не хочу сжимать, и на этом изображении есть куча комнат, нарисованных на нем (например, план этажа здания). У меня есть координаты комнат, и когда пользователь щелкает внутри комнаты, я хочу заполнить эту комнату цветом (в настоящее время у меня только есть список, в котором говорится, что «Комната 1 была нажата»).

Editted 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 установлен как CanvasBackground

Пример:

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

Результат: