Sviluppo di Windows 10 - Associazione dati

Il data binding è un meccanismo nell'applicazione XAML, che fornisce un modo semplice e facile per le app Windows Runtime che usano classi parziali per visualizzare e interagire con i dati. La gestione dei dati è completamente separata dal modo in cui i dati vengono visualizzati in questo meccanismo.

Il data binding consente il flusso di dati tra gli elementi dell'interfaccia utente e l'oggetto dati sull'interfaccia utente. Quando viene stabilita un'associazione e i dati o il modello di business cambiano, riflette automaticamente gli aggiornamenti agli elementi dell'interfaccia utente e viceversa. È anche possibile eseguire il binding non a un'origine dati standard, ma piuttosto a un altro elemento della pagina. Il data binding può essere -

  • Associazione dati unidirezionale
  • Associazione dati bidirezionale
  • Binding di elementi

Associazione dati unidirezionale

Nell'associazione unidirezionale, i dati vengono associati dalla sua origine (l'oggetto che contiene i dati) alla sua destinazione (l'oggetto che visualizza i dati).

Diamo uno sguardo a un semplice esempio di associazione dati unidirezionale. Di seguito è riportato il codice XAML in cui vengono creati quattro blocchi di testo con alcune proprietà.

<Page 
   x:Class = "OneWayDataBinding.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:local = "using:OneWayDataBinding" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d">  
   
   <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
      <StackPanel Name = "Display"> 
         <StackPanel Orientation = "Horizontal" Margin = "50, 50, 0, 0"> 
            <TextBlock Text = "Name: " Margin = "10" Width = "100"/> 
            <TextBlock Margin = "10" Width = "100" Text = "{Binding Name}"/> 
         </StackPanel>
			
         <StackPanel Orientation = "Horizontal" Margin = "50,0,50,0"> 
            <TextBlock Text = "Title: " Margin = "10" Width = "100"/> 
            <TextBlock Margin = "10" Width = "200" Text = "{Binding Title}" /> 
         </StackPanel> 
			
      </StackPanel> 
   </Grid>
	
</Page>

Le proprietà Text di due blocchi di testo sono impostate su “Name” e “Title” staticamente, mentre le altre due proprietà Text dei blocchi di testo sono vincolate a “Name” e “Title” che sono variabili di classe della classe Employee come mostrato di seguito.

using Windows.UI.Xaml.Controls;  

// The Blank Page item template is documented at  
   http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409 
 
namespace OneWayDataBinding {
 
   /// <summary>
      /// An empty page that can be used on its own or navigated to within a Frame. 
   /// </summary> 
	
   public sealed partial class MainPage : Page {
      public MainPage(){ 
         this.InitializeComponent(); 
         DataContext = Employee.GetEmployee(); 
      } 
   } 
	
   public class Employee {
      public string Name { get; set; } 
      public string Title { get; set; }  
		
      public static Employee GetEmployee() {
         var emp = new Employee() {
            Name = "Waqar Ahmed", 
            Title = "Development Manager" 
         }; 
			
         return emp; 
      } 
		
   }  
}

Nel Employee class, abbiamo variabili Name e Title e un metodo statico in cui il employee objectviene inizializzato e restituirà quell'oggetto dipendente. Pertanto, siamo vincolanti alla proprietà, Nome e Titolo, ma non abbiamo ancora selezionato l'oggetto a cui appartiene la proprietà. Il modo più semplice è assegnare un oggetto aDataContext, le cui proprietà sono vincolanti in MainPage Costruttore.

Quando esegui questa applicazione, puoi vedere immediatamente nel tuo file MainWindow che ti sei associato correttamente al nome e al titolo di quell'oggetto Employee.

Associazione dati bidirezionale

In Two-Way Binding, l'utente è in grado di modificare i dati tramite l'interfaccia utente e aggiornarli nell'origine. Ad esempio, se l'origine cambia mentre l'utente sta guardando la vista, desideri che la vista venga aggiornata.

Diamo un'occhiata all'esempio riportato di seguito in cui vengono create due etichette, due caselle di testo e un pulsante con alcune proprietà ed eventi.

<Page 
   x:Class = "TwoWayDataBinding.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:local = "using:TwoWayDataBinding" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable = "d">  
   
   <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
	
      <Grid.RowDefinitions> 
         <RowDefinition Height = "Auto" /> 
         <RowDefinition Height = "Auto" /> 
         <RowDefinition Height = "*" /> 
      </Grid.RowDefinitions> 
		
      <Grid.ColumnDefinitions> 
         <ColumnDefinition Width = "Auto" /> 
         <ColumnDefinition Width = "200" /> 
      </Grid.ColumnDefinitions> 
		
      <TextBlock Name = "nameLabel" Margin = "200,20,0,0">Name:</TextBlock> 
		
      <TextBox Name = "nameText" Grid.Column = "1" Margin = "10,20,0,0" 
         Text = "{Binding Name, Mode = TwoWay}"/>  
			
      <TextBlock Name = "ageLabel" Margin = "200,20,0,0" 
         Grid.Row = "1">Age:</TextBlock> 
			
      <TextBox Name = "ageText" Grid.Column = "1" Grid.Row = "1" Margin = "10,20,0,0" 
         Text = "{Binding Age, Mode = TwoWay}"/>
			
      <StackPanel Grid.Row = "2" Grid.ColumnSpan = "2"> 
         <Button Content = "Display" Click = "Button_Click"  
            Margin = "200,20,0,0"/> 
         <TextBlock x:Name = "txtblock" Margin = "200,20,0,0"/> 
      </StackPanel>  
		
   </Grid> 
	
</Page>

Possiamo osservare quanto segue:

  • Le proprietà Text di entrambe le caselle di testo si associano a "Name" e "Age" che sono variabili di classe di Person class come mostrato di seguito.

  • In Person class, abbiamo solo due variabili: Nome ed Età, e il suo oggetto è inizializzato nel file MainWindow classe.

  • Nel codice XAML, ci stiamo associando alla proprietà - Name e Age, ma non abbiamo selezionato l'oggetto a cui appartiene la proprietà.

  • Il modo più semplice è assegnare un oggetto al file DataContext, le cui proprietà vengono associate nel codice C # come mostrato di seguito in MainWindowconstructor.

using Windows.UI.Xaml; 
using Windows.UI.Xaml.Controls; 
 
// The Blank Page item template is documented at 
   http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409  
	
namespace TwoWayDataBinding {

   /// <summary> 
      /// An empty page that can be used on its own or navigated to within a Frame. 
   /// </summary>
   
   public sealed partial class MainPage : Page {
      Person person = new Person { Name = "Salman", Age = 26 }; 
		
      public MainPage() {
         this.InitializeComponent(); 
         this.DataContext = person; 
      } 
		
      private void Button_Click(object sender, RoutedEventArgs e) {
         string message = person.Name + " is " + person.Age + " years old"; 
         txtblock.Text = message; 
      } 
		
   }  
	
   public class Person {
      private string nameValue;
		
      public string Name {
         get { return nameValue; } 
         set { nameValue = value; } 
      } 
		
      private double ageValue; 
		
      public double Age {
         get { return ageValue; } 
			
         set {
            if (value != ageValue) {
               ageValue = value; 
            } 
         } 
      }
		
   } 
	
}

Quando il codice sopra è stato compilato ed eseguito, vedrai la seguente finestra. Clicca ilDisplay pulsante.

Cambiamo il nome e l'età e fare clic su Display nuovamente il pulsante.

Puoi vederlo nel pulsante clic ‘Display’, il testo delle caselle di testo non viene utilizzato per mostrare i dati TextBlock ma vengono utilizzate le variabili di classe.

Ti consiglio di eseguire il codice sopra con entrambi i casi per una migliore comprensione.

Binding di elementi

È anche possibile eseguire il binding non a un'origine dati standard, ma piuttosto a un altro elemento della pagina. Creiamo un'applicazione chiamataElementBindingin cui vengono creati uno Slider e un Rectangle e con lo slider vengono vincolate la larghezza e l'altezza del rettangolo. Di seguito è riportato il codice in XAML.

<Page 
   x:Class = "ElementBinding.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:local = "using:ElementBinding" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d">  
   
   <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
      <StackPanel VerticalAlignment = "Center" HorizontalAlignment = "Center">
		
         <Rectangle Height = "100" Width = "100" Fill = "SteelBlue"  
            RenderTransformOrigin = "0.5,0.5" Margin = "50"> 
				
            <Rectangle.RenderTransform> 
               <CompositeTransform ScaleX = "{Binding Value, ElementName = MySlider}" 
                  ScaleY = "{Binding Value, ElementName = MySlider}"/> 
            </Rectangle.RenderTransform> 
				
         </Rectangle>
			
         <Slider Minimum = ".5" Maximum = "2.0" StepFrequency = ".1"  
            x:Name = "MySlider" /> 
				
      </StackPanel> 
   </Grid> 
	
</Page>

Quando il codice sopra è stato compilato ed eseguito, vedrai la seguente finestra.

Con un dispositivo di scorrimento, puoi modificare la dimensione del rettangolo come mostrato di seguito.