Die einfache Art, einen InkCanvas in UWP zu zoomen?

Question

Ich versuche in eine InkCanvas zu zoomen.

Meine erste Idee war:

<ScrollViewer ZoomMode="True"> 
    <InkCanvas> 
    </InkCanvas> 
</ScrollViewer> 

Aber auf diese Weise funktionierten nicht.

Ich kann nichts auf meinem Canvas schreiben, nachdem ich es in einen ScrollViewer gelegt habe.

Vielleicht kann jemand helfen.

Dank

Agredo

Answer 1

einfach ein wenig Proof of Concept gebaut und ich habe es funktioniert! Hier

ist die XAML:

<ScrollViewer ZoomMode="Enabled" MinZoomFactor="1" MaxZoomFactor="7"        HorizontalScrollBarVisibility="Visible" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" 
       VerticalScrollBarVisibility="Visible" Height="275" Width="525" BorderBrush="LightBlue" BorderThickness="2"> 
    <Border BorderBrush="Black" BorderThickness="2" Height="250" Width="500"> 
     <InkCanvas x:Name="InkCanvas" Loaded="InkCanvas_Loaded"/> 
    </Border> 
</ScrollViewer> 

Ich wickelte die Tinte Leinwand und Scroll mit Grenzen, so können Sie sehen, wo sie in Bezug auf einander sind. Hier ist die InkCanvas_Loaded Methode auch:

private void InkCanvas_Loaded(object sender, RoutedEventArgs e) 
    { 
     InkCanvas canvas = sender as InkCanvas; 

     //Set inputs 
     canvas.InkPresenter.InputDeviceTypes = 
      Windows.UI.Core.CoreInputDeviceTypes.Mouse | 
      Windows.UI.Core.CoreInputDeviceTypes.Pen | 
      Windows.UI.Core.CoreInputDeviceTypes.Touch; 

     // Set initial ink stroke attributes. 
     InkDrawingAttributes drawingAttributes = new InkDrawingAttributes(); 
     drawingAttributes.Size = new Size(10, 10); 
     drawingAttributes.Color = Windows.UI.Colors.Black; 
     drawingAttributes.IgnorePressure = false; 
     drawingAttributes.FitToCurve = true; 
     canvas.InkPresenter.UpdateDefaultDrawingAttributes(drawingAttributes); 
    } 

Sie blättern durch die Steuer halten und die mittlere Maustaste nach oben oder unten bewegen. Wenn Sie sich auf einem Touchscreen befinden, können Sie das Bild vergrößern/verkleinern, um es zu vergrößern/verkleinern!

Answer 2

Sie müssen wahrscheinlich den ZoomMode von "True" zu "Enabled" ändern, und auch Höhe auf der Leinwand hinzufügen; Einige Steuerelemente strecken ihre Kinder standardmäßig nicht.

Dies funktioniert für mich:

 <ScrollViewer x:Name="scrollViewer" ZoomMode="Enabled" MinZoomFactor="1" VerticalScrollMode="Enabled" VerticalScrollBarVisibility="Auto" HorizontalScrollMode="Enabled" HorizontalScrollBarVisibility="Auto"> 
     <Grid x:Name="outputGrid" Background="{ThemeResource SystemControlBackgroundChromeWhiteBrush}" Height="Auto"> 
      <InkCanvas x:Name="inkCanvas"/> 
     </Grid> 
    </ScrollViewer>