在 WPF 的 ScrollViewer 中显示大图像答案

【问题标题】：Displaying a large image in ScrollViewer in WPF在 WPF 的 ScrollViewer 中显示大图像
【发布时间】：2016-01-26 05:37:32
【问题描述】：

我想在一个窗口中显示一个大图像，如果图像对于它所在的屏幕区域来说太大，则该图像将具有滚动条。

在图像下方我想要一个按钮面板。为此，我将图像放在 DockPanel 中的 ScrollViewer 中，该 DockPanel 包含 StackPanel 以包含底部部分中的按钮。这个想法是点击浏览按钮来设置图像（来自处理按钮点击的代码）

我放在一起的以下示例将仅保持图像大小（2144 x 1424），我看不到下部按钮面板。

<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>
            <TextBlock Text="Test Image" FontSize="30" DockPanel.Dock="Top"></TextBlock>
            <StackPanel Orientation="Vertical">

                <DockPanel x:Name="PhotoPanel">

                    <StackPanel DockPanel.Dock="Bottom" Orientation="Horizontal" HorizontalAlignment="Right">
                        <Button Click="Button_Click">Browse...</Button>
                    </StackPanel>

                    <ScrollViewer 
                        HorizontalScrollBarVisibility="Auto" 
                        VerticalScrollBarVisibility="Auto">
                        <StackPanel>
                        <Image x:Name="PhotoImage" 
                                Stretch="None" 
                               Source="Resources/bear grills.png"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center" />
                        </StackPanel>
                    </ScrollViewer>


                </DockPanel>
            </StackPanel>
        </DockPanel>
    </Grid>
</Window>

我不知道为什么。

【问题讨论】：

标签： wpf image xaml scroll

【解决方案1】：

尝试将按钮放在滚动查看器之前，如下所示：

<DockPanel>
    <TextBlock Text="Test Image" FontSize="30" DockPanel.Dock="Top" />
    <Button Content="Browse..." DockPanel.Dock="Bottom" />
    <ScrollViewer
                    HorizontalScrollBarVisibility="Auto"
                    VerticalScrollBarVisibility="Auto">
        <Image x:Name="PhotoImage"
                            Stretch="None"
                           Source="http://images6.fanpop.com/image/photos/33600000/Bear-Grylls-bear-grylls-33656894-3504-2336.jpg"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center" />
    </ScrollViewer>
</DockPanel>

【讨论】：