Question

我有一个带有图像的Viewbox。这很好，因为Viewbox会缩放图像以适应窗口。但是，我需要能够将图像缩放到其完整大小并显示滚动条，我很难弄清楚如何执行此操作。

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

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

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

Answer 1

此处不需要Viewbox，将Image放入ScrollViewer并操纵VerticalScrollBarVisibility和HorizontalScrollBarVisibility属性，即可是否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

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

图片中有两个元素。没有Viewbox的ScrollViewer中的Image元素将为您提供完整大小的图像，Viewbox版本将对其进行缩放。然后，您可以根据要显示的内容切换两者。
在Image的Height和Width属性上使用绑定表达式，并将其包含在scrollviewer中。当你想缩放它（在某种触发器中）时，将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>

WPF图像缩放

4 个答案: