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.

Create yuor first XAML application

Linguaggio: C#
Framework: 3.5
Visualstudio: 2008

Perché non sperimentare magari qualcosa di buono salta pure fuori, e così mi sono deciso a provare con un filo di scetticismo WPF.

L’acronimo è di Windows Presentation Foundation e senza concentrarci troppo sul concreto significato di ogni singola parola... il tutto sta per “abbiamo un modo per disegnare finestre web o windows in modo che siano scalabili o proporzionate indipendentemente da chi le sta mostrando”.
Ciò detto, mi sembra che l’idea in se e per se sia ottima sfruttabilissima, bellissima... ma non mi è parso di vedere tutta questa diffusione.

Sarà anche che in molti libri associano il WPF a vista ( a ragion veduta ... ) e di contro molti di noi leggendo quelle 5 lettere o chiudono il libro, o lo gettano molto lontano.
Vi anticipo che lo sto provando su W7.

Il tema quindi di questa sezione (WPF Tutorials) sara costituito da una serie di Esercizi guidati per chi è incuriosito dall’argomento, vorrebbe provare ma non sa a come muoversi.

Che cosa vi serve per seguirmi:

1. Visual Studio 2008,
2. Il framework 3.5,
3. Qualche mega libero su disco da organizzare bene,
4. Un po’ di tempo a lezione,
5. SqlExpress o equivalente.

Struttura cartella Tutorials:
Root\WPF\Tutorials_###

Dove: Root potrebbe essere c:\ d:\
Dove: WPF è la cartella di raccolta
Dove: Tutorials_### è il tutorial che stiamo affrontando.

Ciò detto si parte.

Aprire Visual Studio e :
Scegliere nuova WPF Application.
Impostare come percorso quanto sopra.

Sorpresa... quello che otteniamo è un qualcosa che apparentemente sembra inguardabile.
Un quadrato al centro della finestra, con qualcosa di simile all’XML nel box del codice.

E dato che è normale e di rigore la prima cosa che faremo è il play... e naturalmente otteniamo una finestra vota, dal titolo Windows1 (sempre che non l’abbiate già rinominata).

Per scelta rinomino questa prima finestra in wpf_Main, già conscio del fatto che essendo la mia prima finestra non mi interesserà un gran che del suo destino, tuttavia è di interesse per il progetto quindi dobbiamo cambiare il file app.xaml

<Application x:Class="Tutorial_001.App"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   StartupUri="wpf_main.xaml">
   <Application.Resources>
       
   </Application.Resources>
</Application>

Analizziamo quindi lo XAML

<Window x:Class="Tutorial_001.wpf_Main"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Title="wpf_Main" Height="300" Width="300">
   <Grid>
      
   </Grid>
</Window>

In se e per se assomiglia all’XML a cui però è connesso il code Behind, e fin qui non ho ancora visto nulla di nuovo.
Una cosa che tuttavia stupisce parecchio è l’aspetto delle proprietà che sembrano completamente diverse rispetto a quelle di una classica windows applications.

A questo punto direttamente nel box del codice aggiungiamo la nostra prima label e il nostro primo bottone...

<Label Margin="10,10,0,0"
       Name="lblTest"
       Height="25"
       HorizontalAlignment="Left"
       VerticalAlignment="Top"
       Width="100">Tutorials 001</Label>
<Button Margin="10,50,0,0"
       Name="btnTest"
       Height="25"
       HorizontalAlignment="Left"
       VerticalAlignment="Top"
       Width="100">My Firts Action </Button>

(vi basterà fare il copia e incolla)

E quello che noterete e che la sintassi è molto molto simile all’html. A questo punto possiamo scegliere due vie lanciare la nostra prima applicazione WPF ( che non fa nulla ) o aggiungere il nostro primo EventHandler, ed io sceglierei tanto la seconda.

Doppio click sul bottone disegnato in finestra e in quello che per noi è il code Behind otteniamo:

private void btnTest_Click(object sender, RoutedEventArgs e)
{

}

Che non è un EventHandler comune, ma un Routed Event Handler ... di cui parleremo
più avanti.

E quindi per concludere la nostra prima lezione ( così base da farmi quasi impallidire ) aggiungiamo :

private void btnTest_Click(object sender, RoutedEventArgs e)
{
   MessageBox.Show("Ok .. andiamo verso la chiusura della prima lezione...");
}

Compiliamo e se tutto va come deve andare... abbiamo finito.

RIEPILOGO TUTORIAL 1

1. Abbiamo realizzato una soluzione utilizzando un linguaggio simile all’HTML,
2. Abbiamo notato che le proprietà e gli eventi sono differenti rispetto a windows e web form,
3. Abbiamo notato che forse potrebbe non essere troppo noioso.