mercoledì 27 luglio 2011

Create yuor first form XAML

Linguaggio: C#
Framework: 3.5
Visualstudio: 2008

Cerchiamo di comprendere un filo meglio che quali sono i benefici di questo nuova modalità di interpretare le finestre, e dato che le differenze rispetto alla classica presentazione sono tante direi di non lesinare... anzi!
Creiamo una nuova applicazione chiamata Tutorials_002 e come prima cosa rinominiamo la nostra finestra in Main.

Iniziamo a settare il background del tag GRID, e proviamo aggiungendo quanto vi ho già preparato :

<Grid.Background>
<LinearGradientBrush SpreadMethod="Pad" ColorInterpolationMode="ScRgbLinearInterpolation">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.00" Color="Gray" />
<GradientStop Offset="0.70" Color="White" />
<GradientStop Offset="0.75" Color="LightGray" />
<GradientStop Offset="0.76" Color="White" />
<GradientStop Offset="1.00" Color="LightGray" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Grid.Background>


L’effetto ricorda molto ( o in parte ) quanto di più simile ad uno sfondo Web 2.0, quello che decisamente impressiona, è la rapidità con cui a design e run time esegue il refresh.
Dopo quei due o tre tentavi con gradazioni e colori dai più assurdi ai più piacevoli... per proseguire ci serve realizzare una tabella con due o tre campi su sqlExpress, già perché in questo form andremo a metterci una griglia.

CREATE TABLE [dbo].[Clients](
[idClient] [int] IDENTITY(1,1) NOT NULL,
[Name] [nvarchar](50) NOT NULL,
[Description] [nvarchar](150) NULL,
[Address] [nvarchar](250) NULL,
[Telephone] [nvarchar](20) NULL,
[Mail] [nvarchar](50) NULL,
CONSTRAINT [PK_Clients] PRIMARY KEY CLUSTERED
(
[idClient] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF,
IGNORE_DUP_KEY = OFF,
ALLOW_ROW_LOCKS = ON,
ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

GO



Quindi inseriteci almeno un dato.

Tornando sul form, dato che sono un “precisetti” ho ben pensato di aggiungere almeno l’etichetta, quanto meno ho idea di quello che sto per rappresentare.
Basta aggiungere una label proprio come avevamo fatto nella prima lezione.


<Label HorizontalAlignment="Left" 
Margin="12,4,0,0"
Name="label1"
Width="153"
Height="57"
VerticalAlignment="Top"
FontSize="40"
Foreground="White">
Clients
</Label>


L’obbiettivo è quindi palese abbiamo creato un form che dovrà mostrarci il contenuto della tabella Clients.
Per poter far ciò ognuno di noi è libero di implementare la logica che meglio s’addice, tuttavia consiglio di seguire il tutorial in modo di arrivare allo stesso risultato.

Ciò detto creo nella soluzione la cartella Entites e all’interno di questa la cartella Clients.

Realizzo quindi la classe che mi rappresenterà l’entità

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace Tutorial_002.Entities.Clients
{
public class Client
{
private int _idClient;
private string _Name;
private string _Description;
private string _Address;
private string _Telephone;
private string _Mail;

public int idClient
{
get { return _idClient; }
set { _idClient = value; }
}

public string Name
{
get { return _Name; }
set { _Name = value; }
}

public string Description
{
get { return _Description; }
set { _Description = value; }
}

public string Address
{
get { return _Address; }
set { _Address = value; }
}

public string Telephone
{
get { return _Telephone; }
set { _Telephone = value; }
}

public string Mail
{
get { return _Mail; }
set { _Mail = value; }
}
}
}


E per la collezione aggiungerò una nuova classe estendendo la lista generica.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace Tutorial_002.Entities.Clients
{
public class ClientList:List<Client>
{
}
}


Dato che la lista implementa in modo nativo tutte le funzionalità necessarie non mi serve altro.

Ora mi serve la classe che mi fornirà i dati ossia la classe che dovrà interagire con il DB. Creo quindi una nuova cartella, chiamata Providers e al suo interno creo la cartella Clients, quindi aggiungo una nuova classe chiamata ClientsDataProvider.

Va da se che la stringa di connessione dovrete modificarla, perché giustamente ognuno ha la sua istanza di db.


using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Text;

using Tutorial_002.Entities.Clients;

namespace Tutorial_002.Providers.Clients
{
public class ClientsDataProvider
{
private string connection = @"Data Source=[NOMECOMPUTER]\SQLEXPRESS;"+
"Initial Catalog=WPF_SampleDB;Integrated Security=True;Pooling=False";

public ClientsDataProvider()
{

}

public ClientList Select()
{
ClientList cl = new ClientList();
DataTable clDt = new DataTable();

System.Data.SqlClient.SqlConnection scc = new SqlConnection(connection);
scc.Open();

System.Data.SqlClient.SqlDataAdapter sda = new
SqlDataAdapter("SELECT * FROM clients",scc);


sda.Fill(clDt);

for (int i = 0; i < clDt.Rows.Count; i++)
{
Client c = new Client();
c.idClient = Convert.ToInt32(clDt.Rows[i][0]);
c.Name = clDt.Rows[i][1].ToString();
c.Description = clDt.Rows[i][2].ToString();
c.Address = clDt.Rows[i][3].ToString();
c.Telephone = clDt.Rows[i][4].ToString();
c.Mail = clDt.Rows[i][5].ToString();

cl.Add(c);
}

scc.Close();
sda = null;
scc = null;
return cl;
}
}
}


Per questo esempio il provider è proprio solo di concetto , il suo scopo è quello di leggere meramente i dati dal db.

Nel nostro Form dobbiamo aggiungere solo questo:

<ListView Margin="10,80,10,10" Name="lstClient">
<ListView.View>
<GridView>
<GridView.Columns>
<GridViewColumn Header="ID"
Width="20"
DisplayMemberBinding="{Binding Path=idClient}">

</GridViewColumn>
<GridViewColumn Header="Name"
Width="100"
DisplayMemberBinding="{Binding Path=Name}">

</GridViewColumn>
<GridViewColumn Header="Description"
Width="180"
DisplayMemberBinding="{Binding Path=Description}">

</GridViewColumn>
<GridViewColumn Header="Address"
Width="140"
DisplayMemberBinding="{Binding Path=Address}">

</GridViewColumn>
<GridViewColumn Header="Telephone"
Width="90"
DisplayMemberBinding="{Binding Path=Telepone}">

</GridViewColumn>
</GridView.Columns>
</GridView>
</ListView.View>
</ListView>


Che è la definizione della nostra grid View.
A questo punto nel code Behind dobbiamo aggiungere...

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

using Tutorial_002.Providers.Clients;

namespace Tutorial_002
{
public partial class Main : Window
{
public Main()
{

ClientsDataProvider clDP = new ClientsDataProvider();

InitializeComponent();


lstClient.ItemsSource = clDP.Select();
}

}
}


Ed è quindi giunto il momento di compilare.

RIEPILOGO TUTORIAL 2
a) Abbiamo creato un form con uno sfondo grafico solo tramite impostazioni.
b) Abbiamo creato una tabella con uno script sql
c) Abbiamo creato un entità e la sua collezione
d) Abbiamo creato il data provider per l’entità
e) Abbiamo creato la griglia e l’abbiamo popolata con i dati dell’entità.

Conclusioni dopo queste due prime puntate.
Visto così parrebbe che xaml e wpf non siano poi così male, e che comunque diano anche qualche beneficio in fase di implementazione, abbiamo scritto poco codice, ma ufficialmente non abbiamo ancora fatto nulla, di veramente intricato.

1 commento:

Anonimo ha detto...

Ottimo Tutorial. Grazie