locked
ScrollViewer Zoom problems RRS feed

  • Question

  • Hello,

    I use a ScrollViewer to successfully display an image  with zoom/in-out in a FlyOut control using the following xaml:

    <Button.Flyout>
     <Flyout Placement="Right">
    <ScrollViewer HorizontalAlignment="Left" VerticalAlignment="Top" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
      <Image Name="flyOutImage" Source="{Binding Path=Source}" Stretch="Uniform"/>
     </ScrollViewer>
     <Flyout.FlyoutPresenterStyle>
     <Style TargetType="FlyoutPresenter">
     <Setter Property="ScrollViewer.ZoomMode" Value="Enabled"/>
     <Setter Property="Background" Value="Black"/>
     <Setter Property="BorderBrush" Value="Gray"/>
     <Setter Property="BorderThickness" Value="5"/>
     <Setter Property="MinHeight" Value="800"/>
     <Setter Property="MinWidth" Value="900"/>
      </Style>
     </Flyout.FlyoutPresenterStyle>
     </Flyout>
     </Button.Flyout>

    Now I need to render a layer of buttons on top of the image, so I decided to wrap the image in a Canvas. The problem is that the zoom and pan functionality does not work in the same way, regardless of the canvas settings I use (Horizontal and Vertical Alignment, canvas size etc.).

    So the question is how should I create a canvas containing an image and a collection of buttons placed at absolute positions with zoom and pan functionality?

    Friday, January 31, 2014 8:15 PM

Answers

  • If you don't want your buttons to be scrolled in the ScrollViewer then put them outside of the ScrollViewer rather than on a control inside it.

    Saturday, February 1, 2014 5:32 AM
    Moderator