Skapa diagram på Windows Phone 7 med Syncfusions kontroller

Syncfusion släppte nyligen en uppsättning UI-kontroller för Windows Phone 7 (WP7) som jag bestämde mig för att kolla in eftersom jag har varit nöjd med företagets kontroller tidigare. Efter att ha tittat på dokumentationen och gjort lite experiment, satt jag ihop ett provapplikation som använder dess diagramkomponent.

Det första du behöver göra är att ladda ner verktygen från Syncfusion. Företaget erbjuder en 30-dagars kostnadsfri testperiod och skickar ett e-postlås som du kan använda. (Kontrollen av Windows Phone 7 är en del av Synfusions Essential Studio User Interface Edition, som säljs för 1 695 USD.) När paketet har installerats måste du starta Syncfusion Dashboard och använda det för att installera binärerna. Syncfusion gör detta för att du lättare kan hantera olika versioner av dess paket.

När paketet är installerat och konfigurerat, starta Visual Studio och starta ett nytt Windows Phone-program eller öppna ett befintligt. Gå till dialogrutan Lägg till referenser, välj församlingar, välj Extensions och lägg sedan till Syncfusion-biblioteken som du behöver i din applikation. I detta inlägg kommer vi att använda Syncfusion.Chart.Phone. Därefter måste du lägga till referensen till din XAML för att göra den tillgänglig på din sida. För kartläggningskontrollerna har jag lagt till taggen "phone: PhoneApplicationPage" längst upp i XAML-filen:

 xmlns: diagram = "clr-namespace: Syncfusion.Phone.Chart, montering = Syncfusion.Chart.Phone" 

Effekten av detta är att exponera Syncfusion-kartkontrollen på vår sida så att vi kan använda den. Nu kan vi börja placera delar av diagrammet på vår sida. Vi kommer att börja med ett "Chart" -objekt och linda in ett "ChartArea" i det. ChartArea kan då innehålla saker som legenderna och kartdata i den. Eftersom vi importerade kontrollerna med namnområdet "diagram" börjar alla relevanta taggar med "diagram" i vår XAML. När vi fyller i taggarna kommer du att se kartläggningen ta form också i den visuella designern. Vi kommer att lägga till en tom legend och två axlar. Du kan lägga till två axlar av typerna PrimaryAxis (x-axel) och SecondaryAxis (y-axel). För varje axel kan du ställa in "IsAutoSetRange" till "true" och låta kontrollen räkna ut vilket intervall du ska använda, eller så kan du ställa in det till "falskt" och lägga till ett "Range" -attribut med ett par siffror (som " 5, 45 ") som dess värde för att tvinga ett område samt ett" Intervall "-attribut.

Du måste ha lite data i kontrollen. Du kan göra detta manuellt genom att ställa in datakontext i koden bakom. Enligt min erfarenhet är detta inte det bästa sättet att göra saker, eftersom det är svårt att spåra data på skärmen till kontrollen; du måste jaga upp det faktiska samtalet för att ställa in datakontext. Så istället kommer vi att göra det i XAML. För att göra detta, låt oss skapa ett ChartSeries-objekt i ChartArea. Detta gör att vi kan kontrollera vilken typ av diagram som görs, dess etikett på skärmen, dess utseende och var data kommer från. För denna demonstrations syfte kommer vi att använda en enkel datauppsättning med data som kommer från en resurs inom XAML, och en grundläggande uppsättning klasser definierade i huvudkoden bakom filen. I ett fullständigt projekt vill du att dina bundna data ska vara mer robusta än detta. När data har definierats använder du attributen "BindingPathsX" och "BindingPathsY" för DataSeries för att definiera vilka egenskaper för databindningen som ska bifogas till varje axel i diagrammet.

Annat än att knyta diagrammet till en datakälla ansluten till "verklig data", har vi nu ett mycket trevligt, mycket konfigurerbart diagram i vår applikation.

Kodprov A: Sjökortet kontrollerar sig själv
 Kodprov B: Databindande klasser 
 offentlig klass SalesData 
 { 
 public int WeekNumber {get; uppsättning; } 
 offentlig dubbel försäljning {get; uppsättning; } 
 } 
 public class WeeklySalesData: ObservableCollection 
 { 
 } 
Kodprov C: Dataresursen i XAML
 Bild D: Hur layouten ser ut i Visual Studio 

Bild E: Skärmdump av det löpande programmet

J.Ja

© Copyright 2020 | mobilegn.com