【发布时间】：2016-01-30 21:40:17
【问题描述】：
继我之前的问题here 之后，我现在尝试在位于另一个 ScrollViewer 内的 ScrollViewer 中显示图像。
图像又是一个 2000x2000 像素的大图像。
主 UI 是一个 DockPanel，在顶部面板中有一个标题 TextBlock。填充的面板是一个 ScrollViewer，我将其称为外部 ScrollViewer。
在外部 ScrollViewer 内，我有一个名为 MainContentGrid 的网格，它有 2 列 - 两者都需要 50% 的可用宽度。在第 1 列中，我们有一些 TextBlock。在第 2 列中，我试图显示将超过第 2 列的 ActualWidth 的大图像。这包含在 ScrollViewer 中，我将其称为内部 ScrollViewer。
当我运行以下代码时，外部 ScrollViewer 具有活动滚动条，它滚动整个 MainContentGrid，这不是我想要的。我正在尝试让内部 ScrollViewer 使图像的滚动条处于活动状态。
所以我最初看到的是：
然后当我向下和向右滚动时，我可以在滚动区域内看到 Crimson 按钮（带有浏览按钮）堆栈面板：
代码如下：
<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>
更新 如果我将高度和宽度添加到内部 ScrollViewer，那么我会在图像周围获得滚动条。
是否可以使内部 ScrollViewer “适合”名为 PhotoPanel 的 DockPanel？
【问题讨论】：
-
@ChrisW.- 没用。可滚动区域仍然保留在外部 ScrollViewer 中的主网格周围。
-
所以您是说，当您关注内部滚动查看器时，它不会滚动，但外部滚动查看器会滚动？所以你的问题在这里（在实际查看你的片段之后:) 是没有边界来定义内部滚动查看器何时应该调用，因为就它而言，由于你的外部滚动查看器，它有足够的空间。你必须提供某种边界来调用你的内部滚动查看器，甚至变得活跃。无论是固定大小，还是禁用方向或其他东西，这都取决于您。但是你不会得到你想要的结果。
-
@ChrisW。 - 我已经缩短了这个例子。与专注无关。显示窗口时，可滚动区域是外部滚动查看器。我只希望它在垂直高度大于可用区域时滚动 - 即我有 TextBlocks（你好玛丽娃娃）的地方。但是，我拥有的图像大于右侧的空间，但我只想让内部 ScrollViewer 滚动它。希望这是有道理的。刚刚改写了这个问题。
-
好的，让我们看看这个。外部滚动查看器设置为自动/自动，对吗？所以内部的 ScrollViewer 基本上是“呃，我为什么还要在这里，伙计？你可以在任何一个方向上随意滚动......”对吗？也许如果我看到你正在为之拍摄的 UX 的视觉效果，我可以给你一个更好的解决方案。除了我已经在 cmets 部分滥用了，哈哈。
-
很公平。我已经更新了问题并添加了屏幕截图。我在内部 ScrollViewer 中添加了一个高度和宽度，这使得滚动条出现在图像周围。理想情况下，我认为我需要以某种方式使 ScrollViewer 在 DockPanel 中的可用空间中最大化？