wpf - WPF 图像缩放

Question

我有一个里面有一个图像的 Viewbox。这很棒，因为 Viewbox 会缩放图像以适合窗口。但是，我需要能够将图像缩放到完整尺寸并显示滚动条，我很难弄清楚如何做到这一点。

这就是我现在所拥有的。任何人都可以就我如何修改它以实现上述功能提供一些指示吗？

<Viewbox x:Name="viewbox">
    <StackPanel>
        <Image x:Name="image" Source="ranch.jpg" />
    </StackPanel>
</Viewbox>

编辑：只是为了澄清。我需要两种查看图像的方式，适合窗口的视图框样式以及切换到显示滚动条且不调整图像大小的实际大小视图的能力。

Answer 1

您不需要 a Viewbox，通过放入ImageaScrollViewer并操作VerticalScrollBarVisibilityandHorizontalScrollBarVisibility属性，您可以制作Image比例或不制作比例：

<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <CheckBox x:Name="chkActualSize" Grid.Row="0" Content="Actual Size"/>
    <ScrollViewer Grid.Row="1">
        <ScrollViewer.Style>
            <Style TargetType="{x:Type ScrollViewer}">
                <Setter Property="HorizontalScrollBarVisibility" Value="Disabled"/>
                <Setter Property="VerticalScrollBarVisibility" Value="Disabled"/>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsChecked, ElementName=chkActualSize}" Value="True">
                        <Setter Property="HorizontalScrollBarVisibility" Value="Auto"/>
                        <Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </ScrollViewer.Style>
        <Image Source="http://sipi.usc.edu/database/misc/4.1.01.tiff" VerticalAlignment="Center" HorizontalAlignment="Center"/>
    </ScrollViewer>
</Grid>

Answer 2

<ScrollViewer HorizontalScrollBarVisibility="Auto">
    <Viewbox>
        <Image Source="ranch.jpg"/>
    </Viewbox>
</ScrollViewer>

Answer 3

根据您需要切换两种方法的编辑，我会以两种方式之一执行此操作。

1. 图像有两个元素。没有 Viewbox 的 ScrollViewer 中的 Image 元素将为您提供完整大小的图像，而 Viewbox 版本将对其进行缩放。然后，您可以根据要显示的内容切换两者。

2. 在 Image 的 Height 和 Width 属性上使用绑定表达式，并将其包含在滚动查看器中。当您想要缩放它时（在某种触发器中），将 Height 设置为访问 ScrollViewer 的 ActualHeight 属性的绑定表达式或任何高于该属性的容器（使用 RelativeSource 访问最近的祖先，如下所示）：

   {Binding Path=ActualHeight, 
            RelativeSource={RelativeSource AncestorType={x:Type ScrollViewer}}}
   

Answer 4

以为我会为任何寻找的人发布我的解决方案。

                <Slider Width="200" Value="500" Interval="25" Maximum="1000" x:Name="TestImageSlider" Minimum="-50" />
            <ScrollViewer Grid.Row="1" HorizontalScrollBarVisibility="Auto">
              <Image Source="{Binding SelectedScannedImage.ScannedImage}" Width="{Binding Path=Value, ElementName=TestImageSlider}" />
            </ScrollViewer>