Your SlideShare is downloading. ×
Data binding for dummies - Microsoft publish 2014
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Data binding for dummies - Microsoft publish 2014

247

Published on

Data Binding in app XAML/C# per Windows Phone/Windows 8. Usare i template, il binding alle collection di oggetti, l'interfaccia INotifyPropertyChanged

Data Binding in app XAML/C# per Windows Phone/Windows 8. Usare i template, il binding alle collection di oggetti, l'interfaccia INotifyPropertyChanged

Published in: Software
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
247
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. //publish/ Roma, 16 - 17 Maggio 2014 Data Binding In App XAML/C# Luca Di Fino dev.luke2375@live.it @luke2375 luke2375.wordpress.com
  • 2. //publish/ Roma, 16 - 17 Maggio 2014 2 Agenda  Hard Code  Data Binding  INotifyPropertyChanged  Collection  Accesso ai dati  Converter  REST API – JSON  Blend
  • 3. //publish/ Roma, 16 - 17 Maggio 2014 3 Hard Code  Il modo più semplice di popolare l’interfaccia (UI) della vostra app è di valorizzare le proprietà dei controlli direttamente nello XAML <TextBlock Text="Hello World" /> …ma non rende la vostra applicazione particolarmente dinamica  Oppure modificare le proprietà dei controlli XAML da code-behind <TextBlock x:Name="Etichetta" /> Etichetta.Text = "Hello World"; In questo modo potete modificare la vostra interfaccia in seguito a determinati eventi Ma questo approccio diventa presto poco gestibile, perché non c’è separazione tra i dati e la loro presentazione
  • 4. //publish/ Roma, 16 - 17 Maggio 2014 4 Data Binding  Il meccanismo del Data Binding vi permette di legare la vostra interfaccia ad una o più classi nella vostra applicazione che contengono i dati Una classe dati che agisce da source per il data binding è detta ViewModel  L’idea è di definire un legame dinamico tra le proprietà dei controlli della UI e i dati nel ViewModel, in modo che modifiche ai dati si riflettano automaticamente sull’interfaccia e, viceversa, che interazioni con l’interfaccia possano modificare i dati collegati
  • 5. //publish/ Roma, 16 - 17 Maggio 2014 5 Data Binding 1. Creiamo una classe dati class Data { public string Etichetta; public string Etichetta { get; set; } } 2. Istanziamo un oggetto della classe e ne impostiamo i valori Data appData = new Data( ); appData.Etichetta = "Hello World"; 3. Applichiamo il binding TextBlock1.DataContext = appData; <TextBlock x:Name="TextBlock1" Text="{Binding Etichetta}" /> Usare le proprietà public string Etichetta { get; set; } è un modo compatto per definire private string etichetta; public string Etichetta { get { return etichetta; } set { etichetta = value; } } senza proprietà il binding NON FUNZIONA
  • 6. //publish/ Roma, 16 - 17 Maggio 2014 6 Data Binding Gerarchico  Non è necessario assegnare un DataContext a tutti gli elementi  Il Data Binding è gerarchico  Assegnando il DataContext ad un elemento contenitore, tutti i contenuti faranno riferimento a quello stesso DataContext class HData { public string FirstName { get; set; } public string LastName { get; set; } public string Title { get; set; } public string NickName { get; set; } public string Email { get; set; } public string Phone { get; set; } public string Address { get; set; } public string City { get; set; } } <StackPanel x:Name="ContentPanel"> <TextBlock Text="{Binding FirstName}" /> <TextBlock Text="{Binding LastName}" /> <TextBlock Text="{Binding Title}" /> <TextBlock Text="{Binding NickName}" /> <TextBlock Text="{Binding Email}" /> <TextBlock Text="{Binding Phone}" /> <TextBlock Text="{Binding Address}" /> <TextBlock Text="{Binding City}" /> </StackPanel>
  • 7. //publish/ Roma, 16 - 17 Maggio 2014 7 INotifyPropertyChanged  Per rendere davvero dinamica l’app gli oggetti dati che prendono parte al binding devono implementare l’interfaccia INotifyPropertyChanged  Questa interfaccia richiede che l’oggetto pubblichi l’evento PropertyChanged  L’oggetto deve lanciare l’evento PropertyChanged ogni volta che il valore di una delle sue proprietà pubbliche cambia  Il runtime XAML intercetta questo evento e aggiorna gli elementi della UI public event PropertyChangedEventHandler PropertyChanged; protected void NotifyPropertyChanged(String propertyName) { PropertyChangedEventHandler handler = PropertyChanged; if (null != handler) { handler(this, new PropertyChangedEventArgs(propertyName)); } }
  • 8. //publish/ Roma, 16 - 17 Maggio 2014 8 Implementazione INotifyPropertyChanged
  • 9. //publish/ Roma, 16 - 17 Maggio 2014 10 Collection  Il Data Binding può essere applicato anche a collezioni di oggetti public List<string> lista {get; set;}  In questo caso la collection di dati viene assegnata come ItemSource del controllo <ListBox ItemsSource="{Binding lista}"/>  Per liste di oggetti complessi public List<HData> listaHData {get; set;} dobbiamo definire nello XAML un DataTemplate che definisce l’aspetto di ogni elemento della lista  Le liste che implementano l’INotifyPropertyChanged sono le ObservableCollection  Gli elementi devono implementare a loro volta INotifyPropertyChanged
  • 10. //publish/ Roma, 16 - 17 Maggio 2014 11 DataTemplate <ListBox ItemsSource="{Binding listaHData}" DisplayMemberPath="Name"> <ListBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <Rectangle Height="50" Width="100" Fill="{Binding Colore}" /> <StackPanel> <TextBlock Text="{Binding Name}" FontSize="24"/> <TextBlock Text="{Binding Description}" FontSize="18"/> </StackPanel> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox>
  • 11. //publish/ Roma, 16 - 17 Maggio 2014 12 Accesso ai dati  Una volta assegnato un oggetto in binding possiamo recuperare da codice l’oggetto originale, ad esempio l’oggetto selezionato in una lista  Agganciamo una funzione all’evento SelectionChanged della ListBox <ListBox ItemsSource="{Binding listaHData}" DisplayMemberPath="Name" SelectionChanged="ListBox_SelectionChanged"/> private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e) { var OriginalObject = (HData)((ListBox)sender).SelectedItem; }
  • 12. //publish/ Roma, 16 - 17 Maggio 2014 13 Converter  Tramite i converter possiamo fare il binding di grandezze eterogenee  Ad esempio potremmo legare il valore di una certa proprietà alla visibilità di un elemento  IValueConverter  Convert  Converte la proprietà dell’oggetto in un nuovo formato prima di assegnarlo alla proprieta del FrameworkElement  ConvertBack  Converte la proprietà del FrameworkElement al formato originale prima di riassegnare il valore all’oggetto  Spesso non viene implementata
  • 13. //publish/ Roma, 16 - 17 Maggio 2014 14 Converter  Definite la classe converter public class BooleanToVisibilityConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { bool visibility = (bool)value; return visibility ? Visibility.Visible : Visibility.Collapsed; } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { Visibility visibility = (Visibility)value; return (visibility == Visibility.Visible); } }  La aggiungete ad un file di risorse <conv:BooleanToVisibilityConverter x:Key="VisibilityConverter" />  Impostate il Converter all’interno del binding Visibility="{Binding IsVisible, Converter={StaticResource BooleanToVisibilityConverter}}"
  • 14. //publish/ Roma, 16 - 17 Maggio 2014 15 REST API  Tipicamente la vostra app consuma contenuti esposti da un servizio remoto  Es. REST API che restituiscono contenuto JSON  I dati del servizio remoto possono essere usati per popolare il vostro ViewModel  Il Binding vi permetterà di non preoccuparvi di aggiornare l’interfaccia  Ci sono dei tool che permettono di creare automaticamente la classe C# corrispondente al dato json http://jsonclassgenerator.codeplex.com http://json2csharp.com/
  • 15. //publish/ Roma, 16 - 17 Maggio 2014 16 Design Data  PROBLEMA  Utilizzando il Data Binding il designer di Visual Studio non vi mostra il layout  Siete obbligati a fare il deploy dell’app per verificare il vostro layout?  Fortunatamente ci viene in aiuto Blend  Blend permette di creare un file dati di esempio a partire da una classe o da un file XML  Questo file verrà messo in binding con la nostra interfaccia a design time, in modo da permetterci di lavorare sul layout senza dover necessariamente fare il deploy

×