Xamarin.Forms bağlama değeri dönüştürücüleriXamarin.Forms Binding Value Converters

Örneği indirin örneği indirinDownload Sample Download the sample

Veri bağlamaları genellikle veri bir kaynak özelliği için bir hedef özelliği, hedef özelliğinden bazı durumlarda kaynak özelliğine aktarımı.Data bindings usually transfer data from a source property to a target property, and in some cases from the target property to the source property. Bu aktarma, kaynak ve hedef özelliklerin aynı türde olduğunda ya da diğer türüne örtük bir dönüştürme aracılığıyla bir türe dönüştürülüp oldukça basittir.This transfer is straightforward when the source and target properties are of the same type, or when one type can be converted to the other type through an implicit conversion. Durum olmadığı durumlarda, tür dönüştürme gerçekleşmesi gerekir.When that is not the case, a type conversion must take place.

İçinde biçimlendirme dizesi makalesi, nasıl kullanabileceğinizi gördüğünüz StringFormat herhangi bir tür bir dizeye dönüştürmek için veri bağlama özelliği.In the String Formatting article, you saw how you can use the StringFormat property of a data binding to convert any type into a string. Diğer tür dönüştürmeler için uygulayan bir sınıf içinde özel bir kod yazmanız gereken IValueConverter arabirimi.For other types of conversions, you need to write some specialized code in a class that implements the IValueConverter interface. (Evrensel Windows platformu adlı benzer bir sınıf içeren IValueConverter içinde Windows.UI.Xaml.Data ancak bu ad alanı IValueConverter bulunduğu Xamarin.Forms ad.) Uygulayan sınıflar IValueConverter adlandırılır değer dönüştürücüler, ancak bunlar da olarak anılır dönüştürücüler bağlama veya bağlama değeri dönüştürücüleri.(The Universal Windows Platform contains a similar class named IValueConverter in the Windows.UI.Xaml.Data namespace, but this IValueConverter is in the Xamarin.Forms namespace.) Classes that implement IValueConverter are called value converters, but they are also often referred to as binding converters or binding value converters.

IValueConverter arabiriminiThe IValueConverter Interface

Source özelliği türü olduğu bir veri bağlamayı tanımlamak istediğiniz varsayalım int ancak hedef özelliği bir bool.Suppose you want to define a data binding where the source property is of type int but the target property is a bool. Bu veri bağlamayı oluşturmak için istediğiniz bir false değeri 0'a eşit bir tamsayı kaynak olduğunda ve true Aksi takdirde.You want this data binding to produce a false value when the integer source is equal to 0, and true otherwise.

Uygulayan bir sınıf ile yapabilecekleriniz IValueConverter arabirimi:You can do this with a class that implements the IValueConverter interface:

public class IntToBoolConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return (int)value != 0;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return (bool)value ? 1 : 0;
    }
}

İçin bu sınıfın bir örneği ayarladığınız Converter özelliği Binding sınıfı veya Converter özelliği Binding işaretleme uzantısı.You set an instance of this class to the Converter property of the Binding class or to the Converter property of the Binding markup extension. Bu sınıf, veri bağlama bir parçası haline gelir.This class becomes part of the data binding.

Convert Kaynaktan hedef veri taşır, yöntemi çağrıldığında OneWay veya TwoWay bağlar.The Convert method is called when data moves from the source to the target in OneWay or TwoWay bindings. value Parametresi, nesne veya bağlama veri kaynağı değeri.The value parameter is the object or value from the data-binding source. Yöntemi, veri bağlama hedefi türü bir değer döndürmesi gerekir.The method must return a value of the type of the data-binding target. Burada yayınlar gösterildiği yöntemi value parametresi bir int ve 0 ile karşılaştıran bir bool dönüş değeri.The method shown here casts the value parameter to an int and then compares it with 0 for a bool return value.

ConvertBack Yöntemi, veri kaynağına hedeften getirdiğinde çağrılır TwoWay veya OneWayToSource bağlar.The ConvertBack method is called when data moves from the target to the source in TwoWay or OneWayToSource bindings. ConvertBack Ters dönüştürme gerçekleştirir: Bunu varsayar value parametresi bir bool , hedef ve dönüştürür bir int kaynağı için bir değer döndürür.ConvertBack performs the opposite conversion: It assumes the value parameter is a bool from the target, and converts it to an int return value for the source.

Veri bağlamayı da içeriyorsa, bir StringFormat ayarını sonucu dize olarak biçimlendirilmeden önce değer dönüştürücü çağrılır.If the data binding also includes a StringFormat setting, the value converter is invoked before the result is formatted as a string.

Etkinleştirme düğmeleri sayfasını veri bağlama tanıtımları örnek bir veri bağlama bu değer dönüştürücüsü kullanmayı gösterir.The Enable Buttons page in the Data Binding Demos sample demonstrates how to use this value converter in a data binding. IntToBoolConverter Sayfanın kaynak sözlüğünde oluşturulur.The IntToBoolConverter is instantiated in the page's resource dictionary. Ardından ile başvuruluyor bir StaticResource ayarlamak için işaretleme uzantısı Converter iki veri bağlamaları özelliği.It is then referenced with a StaticResource markup extension to set the Converter property in two data bindings. Veri dönüştürücüler sayfasında birden fazla veri bağlamaları arasında paylaşmak çok yaygın bir uygulamadır:It is very common to share data converters among multiple data bindings on the page:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:DataBindingDemos"
             x:Class="DataBindingDemos.EnableButtonsPage"
             Title="Enable Buttons">
    <ContentPage.Resources>
        <ResourceDictionary>
            <local:IntToBoolConverter x:Key="intToBool" />
        </ResourceDictionary>
    </ContentPage.Resources>

    <StackLayout Padding="10, 0">
        <Entry x:Name="entry1"
               Text=""
               Placeholder="enter search term"
               VerticalOptions="CenterAndExpand" />

        <Button Text="Search"
                HorizontalOptions="Center"
                VerticalOptions="CenterAndExpand"
                IsEnabled="{Binding Source={x:Reference entry1},
                                    Path=Text.Length,
                                    Converter={StaticResource intToBool}}" />

        <Entry x:Name="entry2"
               Text=""
               Placeholder="enter destination"
               VerticalOptions="CenterAndExpand" />

        <Button Text="Submit"
                HorizontalOptions="Center"
                VerticalOptions="CenterAndExpand"
                IsEnabled="{Binding Source={x:Reference entry2},
                                    Path=Text.Length,
                                    Converter={StaticResource intToBool}}" />
    </StackLayout>
</ContentPage>

Değer dönüştürücüsü, uygulamanızın birden çok sayfada kullandıysanız bunu kaynak sözlüğünde örneği oluşturabilir App.xaml dosya.If a value converter is used in multiple pages of your application, you can instantiate it in the resource dictionary in the App.xaml file.

Etkinleştirme düğmeleri sayfasını gösterir gereken ortak bir Button içine kullanıcının yazdığı metni temel alan bir işlem gerçekleştirir bir Entry görünümü.The Enable Buttons page demonstrates a common need when a Button performs an operation based on text that the user types into an Entry view. Hiçbir şey içine yazıldığını varsa Entry, Button devre dışı bırakılması gerekir.If nothing has been typed into the Entry, the Button should be disabled. Her Button Veri bağlamada içeren kendi IsEnabled özelliği.Each Button contains a data binding on its IsEnabled property. Veri bağlama kaynağı Length özelliği Text karşılık gelen özellik Entry.The data-binding source is the Length property of the Text property of the corresponding Entry. Bu, Length özelliği değer Dönüştürücü 0 döndürür true ve Button etkinleştirilir:If that Length property is not 0, the value converter returns true and the Button is enabled:

Düğmeler etkinleştirEnable Buttons

Dikkat Text her bir özellik Entry boş dize olarak başlatılır.Notice that the Text property in each Entry is initialized to an empty string. Text Özelliği null varsayılan ve veri bağlama bu durumda işe yaramaz.The Text property is null by default, and the data binding will not work in that case.

Başkalarının genelleştirilmiş sırasında bazı değer dönüştürücüler özellikle belirli uygulamalar için yazılır.Some value converters are written specifically for particular applications, while others are generalized. Değer dönüştürücüsü, yalnızca kullanılacak biliyorsanız OneWay bağlamaları, ardından ConvertBack yöntemi yalnızca döndürebilir null.If you know that a value converter will only be used in OneWay bindings, then the ConvertBack method can simply return null.

Convert Örtük olarak yukarıda gösterilen yöntemi varsayar value bağımsız değişken türü ise int ve dönüş değeri türünde olmalıdır bool.The Convert method shown above implicitly assumes that the value argument is of type int and the return value must be of type bool. Benzer şekilde, ConvertBack yöntemi varsayar value bağımsız değişken türü ise bool ve dönüş değeri int.Similarly, the ConvertBack method assumes that the value argument is of type bool and the return value is int. Durum bu değilse, bir çalışma zamanı özel durumu oluşur.If that is not the case, a runtime exception will occur.

Değer dönüştürücüler daha genelleştirilmesini ve birçok farklı veri türlerini kabul edecek şekilde yazabilirsiniz.You can write value converters to be more generalized and to accept several different types of data. Convert Ve ConvertBack yöntemleri kullanabilir as veya is işleçlerle value parametresi veya çağırabilirsiniz GetType , yazın ve ardından bir şey belirlemek için bu parametreyi uygun.The Convert and ConvertBack methods can use the as or is operators with the value parameter, or can call GetType on that parameter to determine its type, and then do something appropriate. Her bir yöntemin dönüş değeri beklenen tür tarafından verilen targetType parametresi.The expected type of each method's return value is given by the targetType parameter. Bazen, değer dönüştürücüler farklı bir hedef türleri veri bağlamaları ile kullanılır; değer dönüştürücüsü kullanabilirsiniz targetType için doğru türde bir dönüştürme gerçekleştirmek için bağımsız değişken.Sometimes, value converters are used with data bindings of different target types; the value converter can use the targetType argument to perform a conversion for the correct type.

Gerçekleştirilmekte olan dönüştürme için farklı kültürler farklı ise, kullanın culture bu amaç için parametre.If the conversion being performed is different for different cultures, use the culture parameter for this purpose. parameter Bağımsız değişkeni Convert ve ConvertBack bu makalenin sonraki bölümlerinde ele alınmıştır.The parameter argument to Convert and ConvertBack is discussed later in this article.

Dönüştürücü özellikleri bağlamaBinding Converter Properties

Değer dönüştürücüsü sınıfları, özellikleri ve genel parametreler olabilir.Value converter classes can have properties and generic parameters. Bu özel değer dönüştürücü dönüştürür bir bool kaynak türünden bir nesne için T hedef için:This particular value converter converts a bool from the source to an object of type T for the target:

public class BoolToObjectConverter<T> : IValueConverter
{
    public T TrueObject { set; get; }

    public T FalseObject { set; get; }

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return (bool)value ? TrueObject : FalseObject;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return ((T)value).Equals(TrueObject);
    }
}

Anahtar göstergeleri sayfasını gösterir nasıl değerini görüntülemek için kullanılabilmesi için bir Switch görünümü.The Switch Indicators page demonstrates how it can be used to display the value of a Switch view. Bir kaynak sözlüğünde kaynağı olarak değer dönüştürücüler örneklemek için yaygın olsa da, bu sayfada alternatif gösterir: Arasındaki her değer dönüştürücü örneği Binding.Converter özellik öğesi etiketleri.Although it's common to instantiate value converters as resources in a resource dictionary, this page demonstrates an alternative: Each value converter is instantiated between Binding.Converter property-element tags. x:TypeArguments Genel bağımsız değişken belirtir ve TrueObject ve FalseObject hem de o türdeki nesneleri ayarlanır:The x:TypeArguments indicates the generic argument, and TrueObject and FalseObject are both set to objects of that type:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:DataBindingDemos"
             x:Class="DataBindingDemos.SwitchIndicatorsPage"
             Title="Switch Indicators">
    <ContentPage.Resources>
        <ResourceDictionary>
            <Style TargetType="Label">
                <Setter Property="FontSize" Value="18" />
                <Setter Property="VerticalOptions" Value="Center" />
            </Style>

            <Style TargetType="Switch">
                <Setter Property="VerticalOptions" Value="Center" />
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>

    <StackLayout Padding="10, 0">
        <StackLayout Orientation="Horizontal"
                     VerticalOptions="CenterAndExpand">
            <Label Text="Subscribe?" />
            <Switch x:Name="switch1" />
            <Label>
                <Label.Text>
                    <Binding Source="{x:Reference switch1}"
                             Path="IsToggled">
                        <Binding.Converter>
                            <local:BoolToObjectConverter x:TypeArguments="x:String"
                                                         TrueObject="Of course!"
                                                         FalseObject="No way!" />
                        </Binding.Converter>
                    </Binding>
                </Label.Text>
            </Label>
        </StackLayout>

        <StackLayout Orientation="Horizontal"
                     VerticalOptions="CenterAndExpand">
            <Label Text="Allow popups?" />
            <Switch x:Name="switch2" />
            <Label>
                <Label.Text>
                    <Binding Source="{x:Reference switch2}"
                             Path="IsToggled">
                        <Binding.Converter>
                            <local:BoolToObjectConverter x:TypeArguments="x:String"
                                                         TrueObject="Yes"
                                                         FalseObject="No" />
                        </Binding.Converter>
                    </Binding>
                </Label.Text>
                <Label.TextColor>
                    <Binding Source="{x:Reference switch2}"
                             Path="IsToggled">
                        <Binding.Converter>
                            <local:BoolToObjectConverter x:TypeArguments="Color"
                                                         TrueObject="Green"
                                                         FalseObject="Red" />
                        </Binding.Converter>
                    </Binding>
                </Label.TextColor>
            </Label>
        </StackLayout>

        <StackLayout Orientation="Horizontal"
                     VerticalOptions="CenterAndExpand">
            <Label Text="Learn more?" />
            <Switch x:Name="switch3" />
            <Label FontSize="18"
                   VerticalOptions="Center">
                <Label.Style>
                    <Binding Source="{x:Reference switch3}"
                             Path="IsToggled">
                        <Binding.Converter>
                            <local:BoolToObjectConverter x:TypeArguments="Style">
                                <local:BoolToObjectConverter.TrueObject>
                                    <Style TargetType="Label">
                                        <Setter Property="Text" Value="Indubitably!" />
                                        <Setter Property="FontAttributes" Value="Italic, Bold" />
                                        <Setter Property="TextColor" Value="Green" />
                                    </Style>                                    
                                </local:BoolToObjectConverter.TrueObject>

                                <local:BoolToObjectConverter.FalseObject>
                                    <Style TargetType="Label">
                                        <Setter Property="Text" Value="Maybe later" />
                                        <Setter Property="FontAttributes" Value="None" />
                                        <Setter Property="TextColor" Value="Red" />
                                    </Style>
                                </local:BoolToObjectConverter.FalseObject>
                            </local:BoolToObjectConverter>
                        </Binding.Converter>
                    </Binding>
                </Label.Style>
            </Label>
        </StackLayout>
    </StackLayout>
</ContentPage>

En son üç Switch ve Label çiftleri genel değişkeni ayarlanır Styleve tüm Style nesneleri değerleri için sağlanan TrueObject ve FalseObject.In the last of the three Switch and Label pairs, the generic argument is set to Style, and entire Style objects are provided for the values of TrueObject and FalseObject. Bunlar için örtük stili geçersiz kılmak Label kaynak sözlüğünde ayarlanırsa, bu nedenle bu stil özellikleri açıkça atanmış Label.These override the implicit style for Label set in the resource dictionary, so the properties in that style are explicitly assigned to the Label. Geçiş Switch karşılık gelen neden Label değişimi yansıtmak için:Toggling the Switch causes the corresponding Label to reflect the change:

Geçiş göstergeleriSwitch Indicators

Kullanmak da mümkündür Triggers diğer görünümleri tabanlı kullanıcı arabiriminde benzer değişiklikleri uygulamak için.It's also possible to use Triggers to implement similar changes in the user-interface based on other views.

Dönüştürücü parametreleri bağlamaBinding Converter Parameters

Binding Sınıfı tanımlayan bir ConverterParameter özelliği ve Binding işaretleme uzantısı da tanımlar bir ConverterParameter özelliği.The Binding class defines a ConverterParameter property, and the Binding markup extension also defines a ConverterParameter property. Bu özelliğin ayarlandığı sonra noktasına geçirilen değer Convert ve ConvertBack yöntemleri olarak parameter bağımsız değişken.If this property is set, then the value is passed to the Convert and ConvertBack methods as the parameter argument. Değer dönüştürücüsü örneğini birkaç veri bağlamaları arasında paylaşılan bile ConverterParameter biraz farklı dönüştürmeler gerçekleştirmek için farklı olabilir.Even if the instance of the value converter is shared among several data bindings, the ConverterParameter can be different to perform somewhat different conversions.

Kullanımını ConverterParameter bir renk seçimi programla gösterilmiştir.The use of ConverterParameter is demonstrated with a color-selection program. Bu durumda, RgbColorViewModel türünde üç özelliğe sahiptir double adlı Red, Green, ve Blue oluşturmak için kullandığı bir Color değeri:In this case, the RgbColorViewModel has three properties of type double named Red, Green, and Blue that it uses to construct a Color value:

public class RgbColorViewModel : INotifyPropertyChanged
{
    Color color;
    string name;

    public event PropertyChangedEventHandler PropertyChanged;

    public double Red
    {
        set
        {
            if (color.R != value)
            {
                Color = new Color(value, color.G, color.B);
            }
        }
        get
        {
            return color.R;
        }
    }

    public double Green
    {
        set
        {
            if (color.G != value)
            {
                Color = new Color(color.R, value, color.B);
            }
        }
        get
        {
            return color.G;
        }
    }

    public double Blue
    {
        set
        {
            if (color.B != value)
            {
                Color = new Color(color.R, color.G, value);
            }
        }
        get
        {
            return color.B;
        }
    }

    public Color Color
    {
        set
        {
            if (color != value)
            {
                color = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Red"));
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Green"));
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Blue"));
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Color"));

                Name = NamedColor.GetNearestColorName(color);
            }
        }
        get
        {
            return color;
        }
    }

    public string Name
    {
        private set
        {
            if (name != value)
            {
                name = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Name"));
            }
        }
        get
        {
            return name;
        }
    }
}

Red, Green, Ve Blue özellikleri aralık 0 ile 1 arasında.The Red, Green, and Blue properties range between 0 and 1. Ancak, bileşenlerin iki basamaklı bir onaltılık değer olarak gösterilecek tercih edebilirsiniz.However, you might prefer that the components be displayed as two-digit hexadecimal values.

Onaltılık değerler olarak XAML içinde görüntülemek için bunlar gerekir 255 ile çarpılan bir tamsayıya dönüştürülüp ve bir "X2" belirtimi ile ardından biçimlendirilmiş StringFormat özelliği.To display these as hexadecimal values in XAML, they must be multiplied by 255, converted to an integer, and then formatted with a specification of "X2" in the StringFormat property. İlk iki görev (255 tarafından çarparak ve bir tamsayıya dönüştürme) değer dönüştürücüsü tarafından işlenebilir.The first two tasks (multiplying by 255 and converting to an integer) can be handled by the value converter. Mümkün olduğunca genelleştirilmiş olarak değer dönüştürücü sağlamak için çarpma faktör ile belirtilebilir ConverterParameter girer, yani özellik Convert ve ConvertBack yöntemleri olarak parameter bağımsız değişkeni:To make the value converter as generalized as possible, the multiplication factor can be specified with the ConverterParameter property, which means that it enters the Convert and ConvertBack methods as the parameter argument:

public class DoubleToIntConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return (int)Math.Round((double)value * GetParameter(parameter));
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return (int)value / GetParameter(parameter);
    }

    double GetParameter(object parameter)
    {
        if (parameter is double)
            return (double)parameter;

        else if (parameter is int)
            return (int)parameter;

        else if (parameter is string)
            return double.Parse((string)parameter);

        return 1;
    }
}

Convert Dönüştürür bir double için int tarafından çarpılmasıyla elde ederken parameter değeri; ConvertBack tamsayı böler value bağımsız değişkeni tarafından parameter ve döndüren bir double sonucu.The Convert converts from a double to int while multiplying by the parameter value; the ConvertBack divides the integer value argument by parameter and returns a double result. (Aşağıda gösterilen programda değer dönüştürücü yalnızca biçimlendirme dizesi bağlantılı olarak bu nedenle kullanılan ConvertBack kullanılmaz.)(In the program shown below, the value converter is used only in connection with string formatting, so ConvertBack is not used.)

Türünü parameter bağımsız değişken veri bağlama kod ya da XAML tanımlanan bağlı olarak farklı olabilir.The type of the parameter argument is likely to be different depending on whether the data binding is defined in code or XAML. Varsa ConverterParameter özelliği Binding ayarlanmış kod içinde sayısal bir değere ayarlanmış olması olasılığı:If the ConverterParameter property of Binding is set in code, it's likely to be set to a numeric value:

binding.ConverterParameter = 255;

ConverterParameter Özelliği türüdür Object, C# Derleyici değişmez değer 255 tamsayı olarak yorumlar ve özelliği bu değere ayarlar.The ConverterParameter property is of type Object, so the C# compiler interprets the literal 255 as an integer, and sets the property to that value.

Ancak, XAML içinde ConverterParameter büyük olasılıkla şu şekilde ayarlayın:In XAML, however, the ConverterParameter is likely to be set like this:

<Label Text="{Binding Red,
                      Converter={StaticResource doubleToInt},
                      ConverterParameter=255,
                      StringFormat='Red = {0:X2}'}" />

Çünkü gibi bir numara, ancak 255 görünür ConverterParameter türünde Object, XAML ayrıştırıcı 255 bir dize olarak değerlendirir.The 255 looks like a number, but because ConverterParameter is of type Object, the XAML parser treats the 255 as a string.

Bu nedenle, yukarıda gösterilen değer dönüştürücü ayrı bir içerir GetParameter durumlarda işleyen yöntem parameter türünden double, int, veya string.For that reason, the value converter shown above includes a separate GetParameter method that handles cases for parameter being of type double, int, or string.

RGB Renk Seçici sayfa başlatır DoubleToIntConverter iki örtük stilleri tanımını aşağıdaki kaynak sözlüğünde:The RGB Color Selector page instantiates DoubleToIntConverter in its resource dictionary following the definition of two implicit styles:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:DataBindingDemos"
             x:Class="DataBindingDemos.RgbColorSelectorPage"
             Title="RGB Color Selector">
    <ContentPage.Resources>
        <ResourceDictionary>
            <Style TargetType="Slider">
                <Setter Property="VerticalOptions" Value="CenterAndExpand" />
            </Style>

            <Style TargetType="Label">
                <Setter Property="HorizontalTextAlignment" Value="Center" />
            </Style>

            <local:DoubleToIntConverter x:Key="doubleToInt" />
        </ResourceDictionary>
    </ContentPage.Resources>

    <StackLayout>
        <StackLayout.BindingContext>
            <local:RgbColorViewModel Color="Gray" />
        </StackLayout.BindingContext>

        <BoxView Color="{Binding Color}"
                 VerticalOptions="FillAndExpand" />

        <StackLayout Margin="10, 0">
            <Label Text="{Binding Name}" />

            <Slider Value="{Binding Red}" />
            <Label Text="{Binding Red,
                                  Converter={StaticResource doubleToInt},
                                  ConverterParameter=255,
                                  StringFormat='Red = {0:X2}'}" />

            <Slider Value="{Binding Green}" />
            <Label Text="{Binding Green,
                                  Converter={StaticResource doubleToInt},
                                  ConverterParameter=255,
                                  StringFormat='Green = {0:X2}'}" />

            <Slider Value="{Binding Blue}" />
            <Label>
                <Label.Text>
                    <Binding Path="Blue"
                             StringFormat="Blue = {0:X2}"
                             Converter="{StaticResource doubleToInt}">
                        <Binding.ConverterParameter>
                            <x:Double>255</x:Double>
                        </Binding.ConverterParameter>
                    </Binding>
                </Label.Text>
            </Label>
        </StackLayout>
    </StackLayout>
</ContentPage>    

Değerlerini Red ve Green özellikleri ile görüntülenir bir Binding işaretleme uzantısı.The values of the Red and Green properties are displayed with a Binding markup extension. Blue Özelliği, ancak başlatır Binding açık nasıl göstermek için sınıf double değeri ayarlanabilir ConverterParameter özelliği.The Blue property, however, instantiates the Binding class to demonstrate how an explicit double value can be set to ConverterParameter property.

Sonuç şu şekildedir:Here's the result:

RGB Renk SeçiciRGB Color Selector