Condividi tramite

Funzioni in x:Bind con WinUI

Le app WinUI consentono di utilizzare funzioni come fase foglia nel percorso di associazione dati nell'estensione di markup {x:Bind}. Questa funzionalità semplifica la conversione dei valori e consente alle associazioni di dipendere da più parametri, rendendo l'app più dinamica ed efficiente.

Suggerimento

Per informazioni generali sull'uso del data binding nella tua app con {x:Bind} (e per un confronto completo tra {x:Bind} e {Binding}), vedi Data binding approfondito e {x:Bind} Estensione di markup.

Nell'esempio seguente lo sfondo e il primo piano dell'elemento sono associati a funzioni che eseguono la conversione in base al parametro color.

<DataTemplate x:DataType="local:ColorEntry">
    <Grid Background="{x:Bind local:ColorEntry.Brushify(Color), Mode=OneWay}" Width="240">
        <TextBlock Text="{x:Bind ColorName}" Foreground="{x:Bind TextColor(Color)}" Margin="10,5" />
    </Grid>
</DataTemplate>

public class ColorEntry
{
    public string ColorName { get; set; }
    public Color Color { get; set; }

    public static SolidColorBrush Brushify(Color c)
    {
        return new SolidColorBrush(c);
    }

    public SolidColorBrush TextColor(Color c)
    {
        return new SolidColorBrush(((c.R * 0.299 + c.G * 0.587 + c.B * 0.114) > 150) ? Colors.Black : Colors.White);
    }
}

Utilizzo degli attributi XAML

<object property="{x:Bind pathToFunction.FunctionName(functionParameter1, functionParameter2, ...), bindingProperties}" ... />

Percorso della funzione

Specificare il percorso della funzione come gli altri percorsi delle proprietà. Il percorso può includere punti (.), indicizzatori o cast per individuare la funzione.

Usare la XMLNamespace:ClassName.MethodName sintassi per specificare funzioni statiche. Ad esempio, usare la sintassi seguente per eseguire l'associazione a funzioni statiche nel code-behind.

<Window 
     xmlns:local="using:MyNamespace">
     ...
    <StackPanel>
        <TextBlock x:Name="BigTextBlock" FontSize="20" Text="Big text" />
        <TextBlock FontSize="{x:Bind local:MyHelpers.Half(BigTextBlock.FontSize)}" 
                   Text="Small text" />
    </StackPanel>
</Window>

namespace MyNamespace
{
    static public class MyHelpers
    {
        public static double Half(double value) => value / 2.0;
    }
}

È anche possibile usare funzioni di sistema direttamente nel markup per eseguire semplici scenari come la formattazione della data, la formattazione del testo, le concatenazioni di testo e altro ancora. Per esempio:

<Window 
     xmlns:sys="using:System"
     xmlns:local="using:MyNamespace">
     ...
     <CalendarDatePicker Date="{x:Bind sys:DateTime.Parse(TextBlock1.Text)}" />
     <TextBlock Text="{x:Bind sys:String.Format('{0} is now available in {1}', local:MyPage.personName, local:MyPage.location)}" />
</Window>

Se si imposta la modalità su OneWay o TwoWay, il percorso della funzione supporta il rilevamento delle modifiche. Il motore di associazione valuta nuovamente l'associazione se tali oggetti cambiano.

La funzione che si sta associando deve:

  • Essere accessibili al codice e ai metadati, in modo tale che in C# i metodi siano interni o privati, ma in C++ i metodi devono essere metodi WinRT pubblici.
  • Supportare l'overload in base al numero di argomenti, non al tipo, e cerca di corrispondere il primo overload con quel numero di argomenti
  • Disporre di tipi di argumenti che corrispondono ai dati forniti: il motore di associazione non esegue conversioni di tipo ristretto
  • Avere un tipo restituito che corrisponda al tipo della proprietà che utilizza il binding

Il motore di associazione reagisce alle notifiche di modifica delle proprietà attivate con il nome della funzione e valuta nuovamente le associazioni in base alle esigenze. Per esempio:

<DataTemplate x:DataType="local:Person">
   <StackPanel>
      <TextBlock Text="{x:Bind FullName}" />
      <Image Source="{x:Bind IconToBitmap(Icon, CancellationToken), Mode=OneWay}" />
   </StackPanel>
</DataTemplate>

public class Person : INotifyPropertyChanged
{
    //Implementation for an Icon property and a CancellationToken property with PropertyChanged notifications
    ...

    //IconToBitmap function is essentially a multi binding converter between several options.
    public Uri IconToBitmap (Uri icon, Uri cancellationToken)
    {
        var foo = new Uri(...);        
        if (isCancelled)
        {
            foo = cancellationToken;
        }
        else 
        {
            if (fullName.Contains("Sr"))
            {
               //pass a different Uri back
               foo = new Uri(...);
            }
            else
            {
                foo = icon;
            }
        }
        return foo;
    }

    //Ensure FullName property handles change notification on itself as well as IconToBitmap since the function uses it
    public string FullName
    {
        get { return fullName; }
        set
        {
            fullName = value;
            OnPropertyChanged();
            OnPropertyChanged("IconToBitmap"); 
            //this ensures Image.Source binding re-evaluates when FullName changes in addition to Icon and CancellationToken
        }
    }
}

Suggerimento

Usare le funzioni in x:Bind per ottenere gli stessi scenari supportati tramite Convertitori e MultiBinding in WPF.

Argomenti della funzione

Specificare più argomenti di funzione separati da virgole (,).

  • Percorso di associazione – Usa la stessa sintassi come se stessi associando direttamente a quell'oggetto.
    • Se si imposta la modalità su OneWay o TwoWay, l'associazione rileva le modifiche e rivaluta quando l'oggetto cambia.
  • Stringa costante racchiusa tra virgolette: includere virgolette per designarla come stringa. Usare il cappello (^) per eseguire l'escape delle virgolette in stringhe.
  • Numero costante: ad esempio -123.456.
  • Boolean: specificare come "x:True" o "x:False".

Suggerimento

TargetNullValue si applica al risultato della chiamata di funzione, non ad alcun argomento associato.

Vincoli di funzioni bidirezionali

In uno scenario di associazione bidirezionale, è necessario specificare una seconda funzione per la direzione inversa dell'associazione. Utilizzare la proprietà di associazione BindBack per questa funzione. Nell'esempio seguente, la funzione accetta un argomento, ovvero il valore che deve essere riportato al modello.

<TextBlock Text="{x:Bind a.MyFunc(b), BindBack=a.MyFunc2, Mode=TwoWay}" />

Vedere anche

  • Estensione di markup {x:Bind}
  • Last updated on