Displaying a large image in a ScrollViewer in another ScrollViewer - wpf

Question

Following on from my previous question here I am now trying to display an Image in a ScrollViewer that is positioned inside another ScrollViewer.
The image is again a large one 2000x2000 pixels.
The main UI is a DockPanel which has a title TextBlock in the Top panel. The filled panel is a ScrollViewer which I refer to as the outside ScrollViewer.
Inside the outside ScrollViewer, I have a Grid named MainContentGrid which has 2 columns - both need to be 50% available width. In column 1 we have some TextBlocks. In column 2 I am trying to display the large image that will exceed the ActualWidth of column 2. This is wrapped in a ScrollViewer which I refer to as the internal ScrollViewer.
When I run the following code, the outside ScrollViewer has the active scroll bars which scrolls the entire MainContentGrid which is not what I want. I am trying to get the internal ScrollViewer have the scrollbars active for the Image.
So what I see initially is:
Then when I scroll down and right, I can see the Crimson Button (with the Browse button) Stack Panel inside the scroll region:
Here is the code:
<Window x:Class="WpfIssues.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfIssues"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<DockPanel Background="CadetBlue">
<TextBlock Text="Test Image" FontSize="30" DockPanel.Dock="Top"></TextBlock>
<!-- this is the outside scroller -->
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Grid x:Name="MainContentGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- this is a left hand panel which may have content bigger than than the
window which i will want to scroll the entire content (including the right hand panel which
hosts the other scroll viewer)
-->
<Grid Grid.Row="0" Grid.Column="0">
<StackPanel Orientation="Vertical">
<TextBlock>Hello there</TextBlock>
<TextBlock>mary doll</TextBlock>
</StackPanel>
</Grid>
<!-- This is the right hand side photo panel -->
<DockPanel x:Name="PhotoPanel" Grid.Row="0" Grid.Column="1">
<Grid DockPanel.Dock="Bottom" Background="Crimson">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Button Click="Button_Click">Browse...</Button>
</StackPanel>
</Grid>
<!-- This is the internal scroll panel. this should just scroll make image scroll
-->
<ScrollViewer
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto"
Background="Transparent">
<Image x:Name="PhotoImage"
Stretch="Uniform"
Source="Resources/bear grills.png"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</ScrollViewer>
</DockPanel>
</Grid>
</ScrollViewer>
</DockPanel>
</Grid>
</Window>
UPDATE
If I add a Height and Width to the internal ScrollViewer then I get the scrollbars around the image.
Is it possible to make the internal ScrollViewer "fit" to the DockPanel named PhotoPanel?

Answer 1

So if I'm understanding you right in visualizing what you want your actual output to be like. We can ditch your extra ScrollViewer, and your DockPanel, and just keep it as simple as it can get like this. Just del everything you got in there and replace it with this snip and see if it's more in line of what you're shooting for;
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- Because we want some accent colors -->
<Rectangle Grid.ColumnSpan="2" Fill="CadetBlue"/>
<Rectangle Grid.RowSpan="2" Fill="CadetBlue"/>
<Rectangle Grid.Row="2" Grid.ColumnSpan="2" Fill="Crimson"/>
<TextBlock Grid.ColumnSpan="2" Text="Test Image" FontSize="30" />
<StackPanel Grid.Row="1">
<TextBlock>Hello there</TextBlock>
<TextBlock>mary doll</TextBlock>
</StackPanel>
<ScrollViewer Grid.Row="1" Grid.Column="1"
HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"
Background="Transparent">
<Image x:Name="PhotoImage"
Stretch="Uniform"
Source="Resources/bear grills.png"/>
</ScrollViewer>
<StackPanel Grid.Row="2" Grid.Column="1"
Orientation="Horizontal" HorizontalAlignment="Right">
<Button Click="Button_Click">Browse...</Button>
</StackPanel>
</Grid>
I only took a minute before I leave the office for the day so hopefully I didn't forget anything but I'm a big fan of the "K.I.S.S." ideology, and I'm not such a fan for dirty D.O.M.'s and unnecessarily heavy templates used like DockPanel, so hopefully it still aligns with what you're trying to accomplish. If not, I'm on here pretty much every workday anyway for fun. Hope it helps, cheers.

Answer 2

This will work providing a scrollable view if the left hand column is bigger. I don't think its 100% correct and could be improved:
<Window x:Class="WpfIssues.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfIssues"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<DockPanel Background="CadetBlue" LastChildFill="True">
<TextBlock Text="Test Image" FontSize="30" DockPanel.Dock="Top"></TextBlock>
<!-- this is the outside scroller -->
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Grid x:Name="MainContentGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- this is a left hand panel which may have content bigger than than the
window which i will want to scroll the entire content (including the right hand panel which
hosts the other scroll viewer)
-->
<Grid Grid.Column="0">
<StackPanel Orientation="Vertical">
<TextBlock>Hello there</TextBlock>
<TextBlock>Line 1</TextBlock>
<TextBlock>Line 2</TextBlock>
<TextBlock>Line 3</TextBlock>
<TextBlock>Line 4</TextBlock>
<TextBlock>Line 5</TextBlock>
<TextBlock>Line 6</TextBlock>
<TextBlock>Line 7</TextBlock>
<TextBlock>Line 8</TextBlock>
<TextBlock>Line 9</TextBlock>
<TextBlock>Line 10</TextBlock>
<TextBlock>Line 11</TextBlock>
<TextBlock>Line 12</TextBlock>
<TextBlock>Line 13</TextBlock>
<TextBlock>Line 14</TextBlock>
<TextBlock>Line 15</TextBlock>
<TextBlock>Line 16</TextBlock>
<TextBlock>Line 17</TextBlock>
<TextBlock>Line 18</TextBlock>
<TextBlock>Line 19</TextBlock>
<TextBlock>Line 20</TextBlock>
<TextBlock>Line 21</TextBlock>
<TextBlock>Line 22</TextBlock>
<TextBlock>Line 23</TextBlock>
<TextBlock>Line 24</TextBlock>
<TextBlock>Line 25</TextBlock>
<TextBlock>Line 26</TextBlock>
<TextBlock>Line 27</TextBlock>
<TextBlock>Line 28</TextBlock>
<TextBlock>Line 29</TextBlock>
</StackPanel>
</Grid>
<!-- This is the right hand side photo panel -->
<Grid x:Name="PhotoPanel" Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- This is the internal scroll panel. this should just scroll make image scroll
-->
<Grid Grid.Row="0" x:Name="ImageGrid">
<ScrollViewer
Width="{Binding ActualWidth, ElementName=ImageGrid, Mode=OneWay}"
Height="{Binding ActualHeight, ElementName=ImageGrid, Mode=OneWay}"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
<Image x:Name="PhotoImage"
Source="Resources/bear grills.png"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</ScrollViewer>
</Grid>
<Grid Background="Crimson" Grid.Row="1">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Button Click="Button_Click">Browse...</Button>
</StackPanel>
</Grid>
</Grid>
</Grid>
</ScrollViewer>
</DockPanel>
</Grid>
</Window>