Hinzufügen von Achse zu einem Canvas in WPF

Question

Hallo Ich habe eine einfache Anforderung. Ich habe die Aufgabe, ein paar PolyLines auf einer XY-Achse zu zeigen, die auf jedem Bildschirm gut skalieren und beliebige Datenbereiche anzeigen können.

Also habe ich erstellt PloyLines und Skalierung transformiert auf ihnen die Bildschirmgröße und den Maximalwert zu der Zeit.

XAML- Im Grunde eine gerade Linie, hinzugefügt der Einfachheit halber können komplexe Gleichungen Kurven

<Polyline Name="Line45" Points="0,0 1,1 2,2 3,3 4,4 5,5 6,6 7,7 8,8 9,9 10,10 11,11 12,12 13,13 14,14 15,15 16,16 17,17 18,18 19,19 20,20 " 
       Stroke="Blue" StrokeThickness="10"> 
      <Polyline.LayoutTransform> 
       <ScaleTransform ScaleY="{Binding ScaleY,Mode=TwoWay}" ScaleX="{Binding ScaleX,Mode=TwoWay}"/> 
      </Polyline.LayoutTransform> 
     </Polyline> 

-Code sein Hinter

private void Canvas_SizeChanged(object sender, SizeChangedEventArgs e) 
     { 
      vm.ScaleCanvas(e.NewSize, e.PreviousSize); 
     } 

Und Ansichtsmodell

public void ScaleCanvas(Size thisNewSize, Size thisOldSize) 
     { 
      NewSize = thisNewSize; 
      ScaleY = thisNewSize.Height/MaxLimitY; 
      ScaleX = thisNewSize.Width/MaxLimitX; 
     } 

Nun meine Forderung ist zu fügen Sie dynamisch Skalierung XY Axis hinzu, so dass ich von 0 bis MaxLimitX und 0 bis plotten kann MaxLimitY.

Ich habe keine Ahnung, wie es weiter geht. Irgendwelche Ideen werden hilfreich sein. Danke im Voraus.

Answer 1

Ich kann mir eine Lösung vorstellen;

• Erstellen Sie ein Raster mit 2 Spalten.
• Das erste Gitter hat einen Schieberegler mit vertikaler Ausrichtung.
• Das zweite Gitter besteht aus einem Stapelfeld. Oben wird Ihre "Polyline" haben und darunter wird es einen weiteren Slider geben.

Beispielcode ist hier

<Grid> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition/> 
       <ColumnDefinition/> 
      </Grid.ColumnDefinitions> 
     <Slider Orientation="Vertical" Margin="0,0,0,20" 
       Maximum="10" Minimum="1" Width="Auto" 
        AutoToolTipPrecision="2" AutoToolTipPlacement="TopLeft" 
        TickPlacement="TopLeft" 
        Ticks="0.5, 1.5, 2.5, 3.5, 4.5, 5.5, 6.5, 7.5, 8.5, 9.5" 
        IsSelectionRangeEnabled="true" /> 

       <StackPanel Grid.Column="2"> 
     <Polyline Points="0,0 301,301" Stroke="Blue" StrokeThickness="10"> 
      <Polyline.LayoutTransform> 
       <ScaleTransform ScaleY="{Binding ScaleY,Mode=TwoWay}" ScaleX="{Binding ScaleX,Mode=TwoWay}"/> 
      </Polyline.LayoutTransform> 
     </Polyline> 
      <Slider Margin="0 10" Maximum="10" Minimum="1" Width="Auto" 
        AutoToolTipPrecision="2" AutoToolTipPlacement="BottomRight" 
        TickPlacement="BottomRight" 
        Ticks="0.5, 1.5, 2.5, 3.5, 4.5, 5.5, 6.5, 7.5, 8.5, 9.5" 
        IsSelectionRangeEnabled="true"> 

      </Slider> 

     </StackPanel> 
     </Grid> 

Nach dieser einzige Sache, die den Schieber nach Ihren Wünschen stylt aussteht und geben Sie Ihre eigenen benutzerdefinierten TickBar