Funções em x:Bind com WinUI

Os aplicativos WinUI permitem que os utilizadores utilizem funções como o passo final no caminho de ligação de dados na extensão de marcação {x:Bind}. Esse recurso simplifica a conversão de valor e permite que as associações dependam de vários parâmetros, tornando seu aplicativo mais dinâmico e eficiente.

No exemplo a seguir, o plano de fundo e o primeiro plano do item estão vinculados a funções que fazem conversão com base no parâmetro 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);
    }
}

Uso de atributos XAML

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

Caminho para a função

Especifique o caminho para a função como outros caminhos de propriedade. O caminho pode incluir pontos (.), indexadores ou casts para localizar a função.

Use a XMLNamespace:ClassName.MethodName sintaxe para especificar funções estáticas. Por exemplo, use a sintaxe a seguir para vincular a funções estáticas no 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;
    }
}

Você também pode usar funções do sistema diretamente na marcação para realizar cenários simples, como formatação de data, formatação de texto, concatenações de texto e muito mais. Por exemplo:

<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 você definir o modo como OneWay ou TwoWay, o caminho da função oferece suporte à deteção de alterações. O mecanismo de vinculação reavalia a vinculação se esses objetos forem alterados.

A função à qual você está vinculando precisa:

• Ser acessível ao código e metadados – portanto, interno ou privado funciona em C#, mas C++ precisa de métodos para ser métodos públicos do WinRT
• Suporte a sobrecarga com base no número de argumentos, em vez do tipo, e tenta corresponder à primeira sobrecarga com esse número de argumentos.
• Ter tipos de argumento que correspondam aos dados que estão sendo passados – o mecanismo de vinculação não executa conversões de estreitamento
• Ter um tipo de retorno que corresponda ao tipo da propriedade que usa a associação

O mecanismo de vinculação reage às notificações de alteração de propriedade disparadas com o nome da função e reavalia as associações conforme necessário. Por exemplo:

<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
        }
    }
}

Argumentos de função

Especifique vários argumentos de função separados por vírgulas (,).

• Caminho de vinculação – Use a mesma sintaxe como se estivesse vinculando diretamente a esse objeto.
  • Se você definir o modo como OneWay ou TwoWay, a associação detetará alterações e reavaliará quando o objeto for alterado.
• Cadeia de caracteres constante entre aspas – Inclua aspas para designá-la como uma cadeia de caracteres. Use o chapéu (^) para escapar de aspas em strings.
• Número constante – Por exemplo, -123.456.
• Booleano – Especifique como "x:True" ou "x:False".

Ligações de função bidirecionais

Em um cenário de vinculação bidirecional, você deve especificar uma segunda função para a direção inversa da ligação. Utilize a propriedade BindBack binding para esta função. No exemplo a seguir, a função usa um argumento, que é o valor que precisa ser empurrado de volta para o modelo.

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

Ver também

• {x:Bind} Extensão de Marcação