WPF C#: Zusammenspiel zwischen ScrollViewer und Image, speziell beim "Zoomen" mittels ScaleTransform?

Question

Hallo,

Ich möchte eine BitmapImage mittels Image"Box" zoomen, also skalieren. Dies möchte ich noch mit einem ScrollViewer versehen.

<UserControl x:Class="TrackWPF.MDI.MdiImageControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="246" d:DesignWidth="300">
    <Grid>
      	<Slider x:Name="uiSlider" Minimum="0.1" Value="1" Maximum="4" Width="100" HorizontalAlignment="Stretch"></Slider>
        <ScrollViewer  Name="scrollViewer" Margin="0,0,0,33" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
            <ScrollViewer.RenderTransform>
                <ScaleTransform 
                    ScaleX="{Binding ElementName=uiSlider, Path=Value}"
                    ScaleY="{Binding ElementName=uiSlider, Path=Value}"/>
            </ScrollViewer.RenderTransform>
        <Image Name="image"  Margin="0,0,0,33"  StretchDirection="Both" Stretch="Uniform">
        </Image>
        </ScrollViewer>
    </Grid>
</UserControl>

Ich habe RenderTransform über den ScrollViewer definiert, da sich durch Stretch="Uniform" das Bild am ScrollViewer orientiert.(Denke ich)

So setzte ich die BitmapImage(vielleicht ja wichtig):

public MdiImageControl(string path)
{
            InitializeComponent();

            _pictureBmp = new BitmapImage(new Uri(path));
            image.Source = _pictureBmp;
            scrollViewer.Content = image;
}

  

Answer 1

Stell mal den XAML um, z.B. so:

  <StackPanel>
    <Slider x:Name="uiSlider" Minimum="0.1" Value="1" Maximum="4" Width="100"/>
    <Grid Height="200" Width="300">
      <ScrollViewer  Name="scrollViewer" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
        <Image Name="image">
          <Image.RenderTransform>
            <ScaleTransform 
                    ScaleX="{Binding ElementName=uiSlider, Path=Value}"
                    ScaleY="{Binding ElementName=uiSlider, Path=Value}"/>
          </Image.RenderTransform>
        </Image>
      </ScrollViewer>
    </Grid>
  </StackPanel>

--
Viele Gruesse
Peter

Answer 2

Hallo Peter,

ich hatte Anfangs RenderTransform am Image Tag definiert, da war dann das Problem das ,dass Image zwar wie zu erwarten skaliert wurde jedoch die ScrollBar (vom ScrollViewer) nicht die neue Größe des Images "abdeckte" , man also nur zur Anfangs- Image Größe scrollen konnte.

Beispiel: Bild um das doppelte vergrößern scroll Balken geht nur bis zur hälfte.

Grüsse Georges

Answer 3

Der ScrollViewer nutzt ActualWidth bzw. –Height. Diese werden aber durch ScaleTransform nicht verändert. Um Dein Problem zu lösen, könnte man einen Converter schreiben, der Width bzw. Height aus den Werten der Transformationsmatrix neu berechnet und festlegt.

 

--
Viele Gruesse
Peter

Answer 4

Hallo onkelFungus,

Haben Dir die Antworten geholfen?

Grüße,
Robert

---

Robert Breitenhofer, MICROSOFT 
Bitte haben Sie Verständnis dafür, dass im Rahmen dieses Forums, welches auf dem Community-Prinzip „Entwickler helfen Entwickler“ beruht, kein technischer Support geleistet werden kann oder sonst welche garantierten Maßnahmen seitens Microsoft zugesichert werden können.

Answer 5

ja danke, das war der richtige Denkanstoss!