WPF image scaling

Question

I have a window with an image inside it. This is great since the Viewbox scales the image to fit the window. However, I need to be able to scale the image to its full size and show the scroll bars, and it's hard for me to figure out how to do this.

Here is what I have right now. Can someone give some guidance on how I can change this to implement the above functions?

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

Edit: Just for clarification. I need both ways to view the image, the style of the viewport to set the window AND the ability to switch to the actual size view, which shows the scroll bars and does not resize the image.

Answer 1

Here you do not need Viewbox, by putting Imagein ScrollViewerand manipulating the properties VerticalScrollBarVisibilityand HorizontalScrollBarVisibilityyou can make a scale Imageor not:

<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

, , .

• . Image ScrollViewer , Viewbox . , .

• Use a binding expression for the height and width properties of the image and enclose it inside a scrollviewer. If you want to scale it (in some kind of trigger), set the Height expression to a binding that refers to the ActualHeight ScrollViewer property or to what is above this container (using RelativeSource to access the nearest ancestor, something like the following):

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

Answer 4

I think that I will publish my solution for those who are looking.

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