ScrollBar anzeigen wenn angezeigtes Bild in Image Control grösser ist als dieses

  • WPF MVVM
  • .NET (FX) 4.5–4.8

    ScrollBar anzeigen wenn angezeigtes Bild in Image Control grösser ist als dieses

    Neu

    Hallo miteinander :)

    Ich habe ein Image, das auf einem Canvas liegt. In diesem Image wird ein ImageSource angezeigt, das initial die gleichen Maße wie das Image hat.

    Jetzt möchte ich das Bild, das im Image angezeigt wird, horizontal rein- oder rauszoomen können. Hierfür kreiere ich das ImageSource, also nur das angezeigte Bild, nicht aber das Image selbst, neu, so dass es jetzt die Breite des Canvas * Zoom hat.

    Damit man dann aber auch alles sehen kann, möchte ich, dass um das Image oder im Image ein ScrollViewer.HorizontalScrollBarVisibility="Auto"/> angezeigt wird.

    Mit meinem jetzigen Setup tut er das aber nicht, egal was ich mache. Ich versuche jetz seit 2.5 h, das hinzubekommen, hab gegoogelt, da gibt es zwar viele Treffer aber keiner scheint zu funktionieren, ich hab aber auch ein ganz spezielles Setup:

    Spoiler anzeigen

    XML-Quellcode

    1. <Canvas ClipToBounds="True" Grid.Row="1" Margin="10, 10, 10, 10" MouseMove="imgWF_MouseMove" MouseLeftButtonDown="imgWF_MouseLeftButtonDown" Width="{Binding Width, ElementName=imgWF, UpdateSourceTrigger=PropertyChanged}"> <!--ClipToBounds: Das Image soll nicht über das Canvas hinausragen-->
    2. <Canvas.InputBindings> <!--Mit dem Mausrad rein- oder rauszoomen-->
    3. <MouseBinding Command="{Binding MausRadUp}">
    4. <MouseBinding.Gesture>
    5. <mouse:MouseWheelUp />
    6. </MouseBinding.Gesture>
    7. </MouseBinding>
    8. <MouseBinding Command="{Binding MausRadDown}">
    9. <MouseBinding.Gesture>
    10. <mouse:MouseWheelDown />
    11. </MouseBinding.Gesture>
    12. </MouseBinding>
    13. </Canvas.InputBindings>
    14. <u:DataPiping.DataPipes>
    15. <u:DataPipeCollection>
    16. <u:DataPipe Source="{Binding RelativeSource={RelativeSource AncestorType={x:Type Canvas}}, Path=ActualWidth}"
    17. Target="{Binding Path=WFBreite, Mode=OneWayToSource}"/> <!--Breite des Canvas in VM-Property schreiben, um die initiale Bildgrösse ([tt]Zoom = 1[/tt]) zum Erzeugen des ImageSource im VM zu haben-->
    18. <u:DataPipe Source="{Binding RelativeSource={RelativeSource AncestorType={x:Type Canvas}}, Path=ActualHeight}"
    19. Target="{Binding Path=WFHoehe, Mode=OneWayToSource}"/>
    20. </u:DataPipeCollection>
    21. </u:DataPiping.DataPipes>
    23. <Image Name="imgWF" Source="{Binding WaveForm, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" Canvas.Top="0" Canvas.Left="0" Stretch="None" HorizontalAlignment="Left" ScrollViewer.HorizontalScrollBarVisibility="Auto"/> <!--Stretch = None, damit das Image die Grösse des ImageSource annimmt, und das ImageSource nicht skaliert wird-->
    25. <Line Stroke="Yellow" StrokeThickness="2" Y1="0" Y2="{Binding ActualHeight, ElementName=imgWF, UpdateSourceTrigger=PropertyChanged}" X1="{Binding MovingXPosWF, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" X2="{Binding MovingXPosWF, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"/> <!--Diese Linien sollen ebenfalls auf dem Canvas gezeichnet werden.-->
    26. <Line Stroke="Red" StrokeThickness="2" Y1="0" Y2="{Binding ActualHeight, ElementName=imgWF, UpdateSourceTrigger=PropertyChanged}" X1="{Binding ClickedXPosWF, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" X2="{Binding ClickedXPosWF, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"/>
    27. <Line Stroke="{DynamicResource VordergrundfarbeBrush}" StrokeThickness="2" Y1="0" Y2="{Binding ActualHeight, ElementName=imgWF, UpdateSourceTrigger=PropertyChanged}" X1="{Binding RecordingXPosWF, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" X2="{Binding RecordingXPosWF, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"/>
    29. </Canvas>