Obiettivo - Premssa
In questo post mostrerò step by step come creare un grafico usando C#, la classe polyline e gli stili di wpf sfruttando xaml come linguaggio di markup. Per ulteriori informazioni su wpf vi rimando a quest'interessante pagina web dal sito di msdn. A fine post riporto il codice del progetto mostrato.
1° Step
Incominciamo con il creare delle grid e una visualbox per rendere visibile il grafico che creeremo, quindi scriviamo queste righe di codice xaml
1: <Grid>
2: <Viewbox Stretch="Fill">
3: <Grid x:Name="grid"></Grid >
4: </Viewbox>
5: </Grid>
Ok, adesso abbiamo i nostri contenitori, non ci manca che creare uno stile per quadrettare la grid principale, vediamo come farne uno con xaml
1: <DrawingBrush x:Key="quadrettatura" Viewport="0,0,10,10"
2: ViewportUnits="Absolute" TileMode="Tile">
3: <DrawingBrush.Drawing>
4: <DrawingGroup>
5: <DrawingGroup.Children>
6: <GeometryDrawing Geometry="M0,0 L1,0 1,0.1, 0,0.1Z" Brush="Green" />
7: <GeometryDrawing Geometry="M0,0 L0,1 0.1,1, 0.1,0Z" Brush="Green" />
8: </DrawingGroup.Children>
9: </DrawingGroup>
10: </DrawingBrush.Drawing>
11: </DrawingBrush>
12:
13: <Style x:Key="miostile" TargetType="{x:Type Grid}">
14: <Setter Property="Background"
Value="{StaticResource gridBackgroundBrush}"/>
15: </Style>
Il codice appena scritto lo inseriamo tra i tag
1: <Window.Resources>codice</Window.Resources>
E lo poniamo in alto dopo l’intestazione della window, abbiamo appena creato uno stile per il backgound di una grid, adesso vediamo come applicare questo stile alla grid creata in partenza :
1: <Grid Style="{StaticResource miostile}">
2: <Viewbox Stretch="Fill">
3: <Grid x:Name="grid"></Grid >
4: </Viewbox>
5: </Grid>
Se tutto è stato fatto come indicato, dovreste avere questo risultato
2° Step
Incominciamo con le seguenti dichiarazioni
1: Polyline polilinea;
2: DispatcherTimer timer = new DispatcherTimer();
3: Random rand = new Random(DateTime.Now.Millisecond);
4: int x = 0;
5: int passo = 10;
Settiamo adesso alcune proprietà alla polilinea, indichiamo dove disegnarla e diamo le impostazioni al timer:
1: public Window1()
2: {
3: InitializeComponent();
4: polilinea = new Polyline();
5: polilinea.Stroke = System.Windows.Media.Brushes.Yellow;
6: polilinea.StrokeThickness = 1;
7: polilinea.FillRule = FillRule.EvenOdd;
8: polilinea.Stretch = Stretch.Fill;
9: grid.Children.Add(polilinea); //disegnamo la polilinea sulla grid
10: timer.Interval = TimeSpan.FromMilliseconds(500);
11: timer.Tick += new EventHandler(timer_Tick);
12: timer.Start();
13: }
Adesso non ci rimane che creare la funzione “timer_tick” che il timer invoca ad ogni scatto impostato:
1: private void timer_Tick(object sender, EventArgs e)
2: {
3: Point punto = new Point(x, rand.Next(1000));
4: x += passo;
5: polilinea.Points.Add(punto);
6: if(polilinea.Points.Count >= 15)
7: {
8: for (int i = 0; i < polilinea.Points.Count; i++)
9: {
10: polilinea.Points.RemoveAt(i);
11: }
12: }
13: }
OK! Adesso dovremmo avere questo risultato
Conclusione
Abbiamo creato un grafico sfruttando la classe polyline del .net 3.0, la classe polyline si presta benissimo per il risultato che ci ervamo prefissi, a partire da questo esempio di possono creare tante altre cose interessanti.
Technorati Tag:
C#,
WPF,
XML,
Polyline
posted @ mercoledì 30 luglio 2008 12.45