ViewportControl Pinch zoom center

Question

Hej Я играю с приложением для телефона с телефоном 8, используя MVVM.

У меня возникла проблема с приобретением центра масштабирования и полным пониманием границ на контроллере viewportcontroller. И, наконец, переконфигурирование диспетчера viewport для прокрутки всего изображения. Мой XAML код:

<Grid> 
    <StackPanel> 
     <ViewportControl Bounds="0,0,1271,1381.5" Height="480" Width="800" CacheMode="BitmapCache" RenderTransformOrigin="{Binding KontaktPunkter}" Canvas.ZIndex="1"> 
      <ViewportControl.RenderTransform> 
       <CompositeTransform x:Name="myTransform" ScaleX="1" ScaleY="1" TranslateX="0" TranslateY="0" /> 
      </ViewportControl.RenderTransform> 

      <View:Picture/> 

     </ViewportControl> 


    </StackPanel> 
    <View:PopUpUC DataContext="{Binding PopUp}"/> 
</Grid> 

Насколько я понимаю Bounds это область, которую я хочу, чтобы иметь возможность прокрутки, а высота и ширина размер окна управления является ли это правильно?

Да, это правильно.

На вторую часть :) Получение центра движения зума с увеличением.

public void ZoomDelta(ManipulationDeltaEventArgs e) 
    { 

     FrameworkElement Element = (FrameworkElement)e.OriginalSource; 
     ViewportControl Picture; 
     Grid PictureGrid; 
     double MainWidth = Application.Current.RootVisual.RenderSize.Height; 
     double MainHeight = Application.Current.RootVisual.RenderSize.Width; 

     if (Element is ViewportControl) 
     { 
      Picture = Element as ViewportControl; 
     } 
     else 
     { 
      Picture = FindParentOfType<ViewportControl>(Element); 
     } 

     if (Element is Grid) 
     { 
      PictueGrid = Element as Grid; 
     } 
     else 
     { 
      PictureGrid = FindParentOfType<Grid>(Element); 
     } 

     Grid ScreenGrid = FindParentOfType<Grid>(PictureGrid); 

     if (e.PinchManipulation != null) 
     { 

      var newScale = e.PinchManipulation.DeltaScale * Map.previousScale; 


      if (!IsZooming) 
      { 
       Point FingerOne = e.PinchManipulation.Current.PrimaryContact; 
       Point FingerTwo = e.PinchManipulation.Current.SecondaryContact; 
       Point center = new Point((FingerOne.X + FingerTwo.X)/2, (FingerOne.Y + FingerTwo.Y)/2); 
       KontaktPunkter = new Point(center.X/Picture.Bounds.Width, center.Y/Picture.Bounds.Height); 

       IsZooming = true; 
      } 


      var newscale = Map.imageScale * newScale; 
      var transform = (CompositeTransform)Picture.RenderTransform; 

      if (newscale > 1) 
      { 
       Map.imageScale *= newScale; 

       transform.ScaleX = Map.imageScale; 
       transform.ScaleY = Map.imageScale; 

       } 
      else 
      { 

       transform.ScaleX = transform.ScaleY = 1; 
      } 


     } 

     e.Handled = true; 
    } 

В случае если (! IsZooming), я пытаюсь вычислить центр. Я также пытался использовать различные центры, которые можно найти внутри события e. без каких-либо успехов. Что я делаю неправильно при расчете центра?

Наконец после того, как я увеличил масштаб, я больше не могу панорамировать всю картину. Поэтому мне нужно изменить некоторую переменную, но не смогли ее указать, отлаживая или просматривая веб-страницы. Любая идея для этого?

Ответ Изображение должно быть изменено, а границы области просмотра должны быть установлены на новый размер измененного изображения.

Редактировать Final проблема найти центр, и проблема, когда возникает такая ситуация: поскольку e.PinchManipulation.Current дает относительно площади LightBlue, и я хочу его относительно большой площади, т.е. границ. Как это сделать?

Answer 1

Чтобы преодолеть эту проблему, я бы сделал следующее. Viewportcontroller, имеет scrollviewer внутри и viewport.

Основы являются это:

Пока изображение у вас есть «unzoomed», то ScrollViewer имеет полный контроль и ViewportControl ничего не делает. Когда вы начинаете ущипнуть, заблокируйте scrollviewer, отключив вертикальную панель прокрутки И установив viewport.height = scrollviewer.height. Это нейтрализует scollviewer. Вы можете сделать временное масштабирование с помощью Image ScaleTransform. На финише, измените размер вашего фактического изображения так, чтобы он занимал реальное пространство внутри ViewportControl. Теперь ваш viewportControl позволит вам полностью панорамировать изображение с хорошим возвратом назад. Когда вы снова увеличиваете масштаб изображения, снова включите scrollviewer. (Установите высоту на высоту экрана и включите полосу прокрутки.) FYI, я полностью забываю, почему там есть холст, но я чувствую, что это важно. Смотрите ниже:

Хотя ниже образец не делать то, что вы хотите сделать, я на основе моего кода на MediaViewer внутри этого образца и модифицировал его: Basic Пример объектива

Однако следует отметить, что для увеличение изображения.