Fungsi dalam x:Bind dengan WinUI

Aplikasi WinUI memungkinkan Anda menggunakan fungsi sebagai langkah terakhir dari jalur pengikatan data di ekstensi markup {x:Bind}. Fitur ini menyederhanakan konversi nilai dan memungkinkan pengikatan bergantung pada beberapa parameter, membuat aplikasi Anda lebih dinamis dan efisien.

Tip

Untuk informasi umum tentang menggunakan pengikatan data di aplikasi Anda dengan {x:Bind} (dan untuk perbandingan menyeluruh antara {x:Bind} dan {Binding}), lihat Pengikatan data secara mendalam dan Ekstensi Markup {x:Bind}.

Dalam contoh berikut, latar belakang dan latar depan item terikat ke fungsi yang melakukan konversi berdasarkan parameter warna.

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

Penggunaan atribut XAML

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

Jalur ke fungsi

Tentukan jalur ke fungsi seperti jalur properti lainnya. Jalur dapat mencakup titik-titik (.), pengindeks, atau transmisi untuk menemukan fungsi.

Gunakan sintaks XMLNamespace:ClassName.MethodName untuk menentukan fungsi statis. Misalnya, gunakan sintaks berikut untuk mengikat ke fungsi statis di 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;
    }
}

Anda juga dapat menggunakan fungsi sistem secara langsung dalam markup untuk mencapai skenario sederhana seperti pemformatan tanggal, pemformatan teks, perangkaian teks, dan lainnya. Contohnya:

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

Jika Anda mengatur mode ke OneWay atau TwoWay, jalur fungsi mendukung deteksi perubahan. Mesin pengikatan mengevaluasi kembali pengikatan jika objek tersebut berubah.

Fungsi yang Anda ikatkan perlu:

• Dapat diakses oleh kode dan metadata – sehingga fungsi internal atau privat berfungsi di C#, tetapi C++ memerlukan metode untuk menjadi metode WinRT publik
• Mendukung kelebihan beban berdasarkan jumlah argumen, bukan jenis, dan mencoba mencocokkan kelebihan beban pertama dengan banyak argumen
• Memiliki jenis argumen yang cocok dengan data yang diteruskan – mesin pengikatan tidak melakukan konversi yang mempersempit
• Memiliki tipe pengembalian yang sesuai dengan tipe properti yang menggunakan pengikatan

Mesin pengikatan bereaksi terhadap pemberitahuan perubahan properti yang diaktifkan dengan nama fungsi dan mengevaluasi kembali pengikatan seperlunya. Contohnya:

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

Tip

Gunakan fungsi dalam x:Bind untuk mencapai skenario yang sama dengan apa yang didukung melalui Pengonversi dan MultiBinding di WPF.

Argumen fungsi

Tentukan beberapa argumen fungsi yang dipisahkan oleh koma (,).

• Jalur Pengikatan – Gunakan sintaks yang sama seolah-olah Anda mengikat langsung ke objek tersebut.
  • Jika Anda mengatur mode ke OneWay atau TwoWay, pengikatan mendeteksi perubahan dan validasi ulang saat objek berubah.
• String konstanta diapit dalam tanda kutip – Sertakan tanda kutip untuk menunjuknya sebagai string. Gunakan topi (^) untuk menghindari tanda kutip dalam string.
• Angka konstanta – Misalnya, -123.456.
• Boolean – Tentukan sebagai "x:True" atau "x:False".

Tip

TargetNullValue berlaku untuk hasil panggilan fungsi, bukan ke argumen terikat apa pun.

Pengikatan fungsi dua arah

Dalam skenario pengikatan dua arah, Anda harus menentukan fungsi kedua untuk arah terbalik pengikatan. Gunakan properti pengikatan BindBack untuk fungsi ini. Dalam contoh berikut, fungsi mengambil satu argumen, yang merupakan nilai yang perlu didorong kembali ke model.

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

Lihat juga

• {x:Bind} Ekstensi Markup