WPF 图像缩放

Question

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

这就是我现在所拥有的。 谁能指导我如何修改它以实现上述功能？

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

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

Answer 1

此处不需要 Viewbox，只需将 Image 放入 ScrollViewer 中并操作 VerticalScrollBarVisibility 和 < code>Horizo​​ntalScrollBarVisibility 属性，您可以使 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. 对图像的高度和宽度属性使用绑定表达式，并将其包含在滚动查看器内。 当您想要缩放它（在某种触发器中）时，将 Height 设置为访问 ScrollViewer 的 ActualHeight 属性或位于其上方的任何容器的绑定表达式（使用relativesource 访问最近的祖先，如下所示）：

   {绑定路径=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>