Erstellen von Diagrammen unter Windows Phone 7 mit den Steuerelementen von Syncfusion

Syncfusion hat kürzlich eine Reihe von UI-Steuerelementen für Windows Phone 7 (WP7) veröffentlicht, die ich auschecken wollte, weil ich in der Vergangenheit mit den Steuerelementen des Unternehmens zufrieden war. Nachdem ich mir die Dokumentation angesehen und ein wenig experimentiert hatte, stellte ich eine Beispielanwendung zusammen, die die Diagrammkomponente verwendet.

Als erstes müssen Sie die Tools von Syncfusion herunterladen. Das Unternehmen bietet eine kostenlose 30-Tage-Testversion an und sendet Ihnen per E-Mail einen Entsperrschlüssel zur Verwendung. (Das Windows Phone 7-Steuerelement ist Teil der Essential Studio User Interface Edition von Synfusion, die im Einzelhandel für 1.695 USD erhältlich ist.) Nach der Installation des Pakets müssen Sie das Syncfusion Dashboard starten und zum Installieren der Binärdateien verwenden. Mit Syncfusion können Sie verschiedene Versionen der Pakete einfacher verwalten.

Starten Sie nach der Installation und Einrichtung des Pakets Visual Studio und starten Sie eine neue Windows Phone-Anwendung oder öffnen Sie eine vorhandene. Wechseln Sie zum Dialogfeld Verweise hinzufügen, wählen Sie Baugruppen aus, wählen Sie Erweiterungen aus, und fügen Sie dann die Syncfusion-Bibliotheken hinzu, die Sie in Ihrer Anwendung benötigen. Für die Zwecke dieses Beitrags verwenden wir Syncfusion.Chart.Phone. Als Nächstes müssen Sie den Verweis auf Ihre XAML hinzufügen, um ihn Ihrer Seite zur Verfügung zu stellen. Für die Diagrammsteuerelemente habe ich Folgendes zum Tag "phone: PhoneApplicationPage" oben in der XAML-Datei hinzugefügt:

 xmlns: chart = "clr-Namespace: Syncfusion.Phone.Chart; Assembly = Syncfusion.Chart.Phone" 

Dies hat zur Folge, dass das Syncfusion-Diagrammsteuerelement auf unserer Seite verfügbar gemacht wird, damit wir es verwenden können. Jetzt können wir Teile des Diagramms auf unserer Seite platzieren. Wir beginnen mit einem "Chart" -Objekt und wickeln ein "ChartArea" darin ein. ChartArea kann dann Dinge wie die Legenden und die darin enthaltenen Diagrammdaten enthalten. Da wir die Steuerelemente mit dem Namespace "Diagramm" importiert haben, beginnen alle relevanten Tags in unserer XAML mit "Diagramm". Wenn wir die Tags ausfüllen, sehen Sie, dass das Diagramm auch im visuellen Designer Gestalt annimmt. Wir werden eine leere Legende und zwei Achsen hinzufügen. Sie können zwei Achsen der Typen PrimaryAxis (x-Achse) und SecondaryAxis (y-Achse) addieren. Für jede Achse können Sie "IsAutoSetRange" auf "true" setzen und das Steuerelement herausfinden lassen, welcher Bereich verwendet werden soll, oder Sie können es auf "false" setzen und ein "Range" -Attribut mit einem Zahlenpaar hinzufügen (z. B. " 5, 45 ") als Wert zum Erzwingen eines Bereichs sowie als" Intervall "-Attribut.

Sie müssen einige Daten in das Steuerelement übernehmen. Sie können dies manuell tun, indem Sie den Datenkontext im Code dahinter festlegen. Nach meiner Erfahrung ist dies nicht die beste Vorgehensweise, da es schwierig ist, die Daten auf dem Bildschirm bis zum Steuerelement zu verfolgen. Sie müssen den tatsächlichen Aufruf suchen, um den Datenkontext festzulegen. Also machen wir es stattdessen in XAML. Erstellen Sie dazu ein ChartSeries-Objekt in der ChartArea. Auf diese Weise können wir steuern, welche Art von Diagramm erstellt wird, welche Beschriftung auf dem Bildschirm angezeigt wird, wie es aussieht und woher die Daten stammen. Für die Zwecke dieser Demonstration verwenden wir einen einfachen Datensatz mit den Daten, die aus einer Ressource innerhalb der XAML stammen, und einen grundlegenden Satz von Klassen, die im Hauptcode hinter der Datei definiert sind. In einem vollständigen Projekt möchten Sie, dass Ihre gebundenen Daten robuster sind. Sobald die Daten definiert sind, verwenden Sie die Attribute "BindingPathsX" und "BindingPathsY" von DataSeries, um zu definieren, welche Eigenschaften der Datenbindung an jede Achse im Diagramm angehängt werden.

Abgesehen davon, dass das Diagramm an eine Datenquelle gebunden ist, die mit "realen Daten" verbunden ist, haben wir jetzt ein sehr schönes, hoch konfigurierbares Diagramm in unserer Anwendung.

Codebeispiel A: Das Diagrammsteuerelement selbst
 Codebeispiel B: Die Datenbindungsklassen 
 öffentliche Klasse SalesData 
 { 
 public int WeekNumber {get; einstellen; }} 
 öffentliche Doppelverkäufe {get; einstellen; }} 
 }} 
 öffentliche Klasse WeeklySalesData: ObservableCollection 
 { 
 }} 
Codebeispiel C: Die Datenressource in der XAML
 Abbildung D: Wie das Layout in Visual Studio aussieht 

Abbildung E: Screenshot der laufenden Anwendung

J.Ja.

© Copyright 2020 | mobilegn.com