Question

继我之前的问题here后，我正在尝试在ScrollViewer中显示一个位于另一个ScrollViewer中的图像。

图像也是一个大的2000x2000像素。

主UI是一个DockPanel，在Top面板中有一个标题TextBlock。填充的面板是ScrollViewer，我将其称为外部ScrollViewer。

在外部ScrollViewer中，我有一个名为MainContentGrid的Grid，它有2列 - 两者都需要50％的可用宽度。在第1列中，我们有一些TextBlocks。在第2列中，我试图显示超过第2列的ActualWidth的大图像。这包含在ScrollViewer中，我将其称为内部ScrollViewer。

当我运行以下代码时，外部ScrollViewer具有活动滚动条，滚动整个MainContentGrid，这不是我想要的。我试图让内部ScrollViewer为图像激活滚动条。

所以我最初看到的是：

然后当我向下滚动时，我可以在滚动区域内看到Crimson Button（使用Browse按钮）Stack Panel：

以下是代码：

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

Answer 1

所以，如果我理解你想要你的实际输出是什么样的话。我们可以抛弃你额外的ScrollViewer和你的DockPanel，并保持它像这样简单。只要你在那里得到的所有东西，用这个剪辑替换它，看看它是否更符合你拍摄的内容;

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

我离开办公室前只花了一分钟，希望我没有忘记任何事情，但我是“K.I.S.S.”的忠实粉丝。意识形态，我不是那种肮脏的D.O.M.和不必要的重型模板的粉丝，就像DockPanel一样，所以希望它仍然与你想要完成的事情保持一致。如果没有，我几乎每个工作日都在这里，为了好玩。希望它有所帮助，欢呼。

Answer 2

如果左侧列较大，这将提供可滚动视图。我不认为它100％正确并且可以改进：

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

在另一个ScrollViewer中的ScrollViewer中显示大图像

2 个答案: