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

Örnek indirin örnek indirinDownload Sample Download the sample

Veri bağlamaları genellikle verileri bir kaynak özelliğinden Target özelliğine aktarır ve bazı durumlarda Target özelliğinden Source özelliğine.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 aktarım, kaynak ve hedef özellikler aynı türde olduğunda veya bir tür örtük bir dönüştürme yoluyla diğer türe dönüştürülebileceği zaman 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. Böyle bir durum değilse, bir tür dönüştürme gerçekleşmelidir.When that is not the case, a type conversion must take place.

Dize biçimlendirme makalesinde, StringFormat bir tür dizeyi bir dizeye dönüştürmek için bir veri bağlamanın özelliğini nasıl kullanabileceğinizi gördünüz.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 dönüştürme türleri için, arabirimi uygulayan bir sınıfa bazı özel kod yazmanız gerekir IValueConverter .For other types of conversions, you need to write some specialized code in a class that implements the IValueConverter interface. (Evrensel Windows Platformu ad alanında adlı benzer bir sınıfı içerir IValueConverter Windows.UI.Xaml.Data , ancak bu IValueConverter Xamarin.Forms ad alanıdır.) Uygulayan sınıflara IValueConverter değer dönüştürücüler denir, ancak genellikle bağlama dönüştürücüleri veya bağlama değeri dönüştürücüleri olarak da anılır.(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 arabirimiThe IValueConverter Interface

Kaynak özelliğin türü olan int ancak Target özelliği bir olan veri bağlamayı tanımlamak istediğinizi varsayalım 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ğlamasının, false tamsayı kaynağı 0 ' a eşit olduğunda bir değer oluşturmasını 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.

Bunu, arabirimini uygulayan bir sınıf ile yapabilirsiniz IValueConverter :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;
    }
}

Bu sınıfın bir örneğini Converter Binding sınıfının özelliğine veya Converter Binding biçimlendirme uzantısının özelliğine ayarlarsınız.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ğlamasının bir parçası haline gelir.This class becomes part of the data binding.

Bu Convert Yöntem, veriler kaynaktan hedefe OneWay veya bağlamalara geçdiğinde çağrılır TwoWay .The Convert method is called when data moves from the source to the target in OneWay or TwoWay bindings. valueParametresi, veri bağlama kaynağından alınan nesne veya değerdir.The value parameter is the object or value from the data-binding source. Yöntem, veri bağlama hedefinin türünün bir değerini döndürmelidir.The method must return a value of the type of the data-binding target. Burada gösterilen yöntemi value parametresini öğesine yayınlar int ve sonra dönüş değeri için 0 ile karşılaştırır bool .The method shown here casts the value parameter to an int and then compares it with 0 for a bool return value.

ConvertBackVeriler hedeften kaynağına TwoWay veya OneWayToSource bağlamalara geldiğinde çağrılır.The ConvertBack method is called when data moves from the target to the source in TwoWay or OneWayToSource bindings. ConvertBack ters dönüştürmeyi gerçekleştirir: value parametrenin hedeften bir olduğunu varsayar bool ve int kaynak için bir dönüş değerine dönüştü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ğlama de bir StringFormat ayar içeriyorsa, sonuç bir dize olarak biçimlendirilmeden önce değer Dönüştürücüsü ç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.

Veri bağlama gösterileri örneğinde düğmeleri etkinleştir sayfası, bu değer dönüştürücünün bir veri bağlamasında nasıl kullanılacağını 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. Daha sonra, StaticResource Converter iki veri bağlamalarında özelliği ayarlamak için bir biçimlendirme uzantısıyla başvurulur.It is then referenced with a StaticResource markup extension to set the Converter property in two data bindings. Veri dönüştürücülerinin sayfada birden çok veri bağlaması arasında paylaşılması çok yaygındı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>

Uygulamanızın birden çok sayfasında bir değer dönüştürücüsü kullanılıyorsa, app. xaml dosyasındaki kaynak sözlüğünde örneğini oluşturabilirsiniz.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.

Düğmeleri etkinleştir sayfası, Button kullanıcının bir görünüme sahip olduğu metne göre bir işlem gerçekleştirdiğinde bir genel gereksinimi gösterir Entry .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. Öğesine hiçbir şey yazılmışsa, Entry Button devre dışı bırakılmalıdır.If nothing has been typed into the Entry, the Button should be disabled. Her biri Button , özelliği üzerinde bir veri bağlama içerir IsEnabled .Each Button contains a data binding on its IsEnabled property. Veri bağlama kaynağı, Length Text karşılık gelen özelliğin özelliğidir Entry .The data-binding source is the Length property of the Text property of the corresponding Entry. Bu Length özellik 0 değilse, değer Dönüştürücüsü döndürülür true ve Button etkinleştirilir:If that Length property is not 0, the value converter returns true and the Button is enabled:

Düğmeleri etkinleştirEnable Buttons

TextHer birinin içindeki özelliğinin Entry boş bir dizeye başlatıldığını unutmayın.Notice that the Text property in each Entry is initialized to an empty string. TextÖzelliği varsayılan olarak olur null ve veri bağlama bu durumda çalışmayacaktır.The Text property is null by default, and the data binding will not work in that case.

Bazı değer dönüştürücüler özellikle belirli uygulamalar için yazılmıştır, diğerleri genelleştirilir.Some value converters are written specifically for particular applications, while others are generalized. Bir değer dönüştürücünün yalnızca OneWay bağlamalarda kullanılacağını biliyorsanız, 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.

ConvertYukarıda gösterilen yöntem value bağımsız değişkenin tür olduğunu int ve dönüş değerinin türünden olması gerektiğini varsayar 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 value bağımsız değişkenin tür olduğunu bool ve dönüş değerinin olduğunu varsayar 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.

Daha genelleştirilebilmeniz ve birçok farklı veri türünü kabul etmek için değer dönüştürücülerini yazabilirsiniz.You can write value converters to be more generalized and to accept several different types of data. ConvertVe ConvertBack yöntemleri as is parametresiyle veya işleçlerini kullanabilir ya da value GetType Bu parametreyi kullanarak türünü belirleyebilir ve uygun bir şeyi gerçekleştirebilir.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 yöntemin dönüş değerinin beklenen türü parametre tarafından verilir targetType .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ı hedef türlerin veri bağlamaları ile kullanılır; değer Dönüştürücüsü, targetType doğru tür için bir dönüştürme gerçekleştirmek için bağımsız değişkenini kullanabilir.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ştirilen dönüştürme farklı kültürler için farklıysa, culture Bu amaçla parametresini kullanın.If the conversion being performed is different for different cultures, use the culture parameter for this purpose. parameterVe için bağımsız Convert değişkeni ConvertBack Bu makalenin ilerleyen kısımlarında ele alınmıştır.The parameter argument to Convert and ConvertBack is discussed later in this article.

Bağlama dönüştürücü özellikleriBinding Converter Properties

Değer dönüştürücü sınıflarında Özellikler ve genel parametreler bulunabilir.Value converter classes can have properties and generic parameters. Bu belirli değer Dönüştürücüsü, bool kaynağı kaynağından hedef için türünden bir nesneye dönüştürür T :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ı, bir görünümün değerini görüntülemek için nasıl kullanılabileceğini gösterir Switch .The Switch Indicators page demonstrates how it can be used to display the value of a Switch view. Değer dönüştürücülerinin kaynak sözlüğünde kaynak olarak örneğinin oluşturulması yaygın olsa da bu sayfada bir alternatif gösterilir: her bir değer Dönüştürücüsü, Binding.Converter özellik öğesi etiketleri arasında oluşturulur.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şkenini gösterir ve TrueObject FalseObject her ikisi de bu türdeki nesneler olarak 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>

Üç Switch ve çiftinin en sonunda Label , genel bağımsız değişken olarak ayarlanır Style ve tüm Style nesneleri ve değerleri için sağlanır TrueObject 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, kaynak sözlüğünde ayarlanan örtülü stilini geçersiz kılar Label , bu nedenle söz konusu stildeki Özellikler açıkça öğesine atanır 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. SwitchBunu değiştirmek, karşılık gelen Label değişikliği yansıtmasına neden olur:Toggling the Switch causes the corresponding Label to reflect the change:

Anahtar göstergeleriSwitch Indicators

TriggersDiğer görünümlere göre Kullanıcı arabirimindeki benzer değişiklikleri uygulamak için de kullanabilirsiniz.It's also possible to use Triggers to implement similar changes in the user-interface based on other views.

Bağlama dönüştürücü parametreleriBinding Converter Parameters

BindingSınıfı bir özelliği tanımlar ConverterParameter ve Binding biçimlendirme uzantısı da bir ConverterParameter özelliği tanımlar.The Binding class defines a ConverterParameter property, and the Binding markup extension also defines a ConverterParameter property. Bu özellik ayarlandıysa, değeri Convert ConvertBack bağımsız değişkeni olarak ve yöntemlerine geçirilir parameter .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ünün örneği çeşitli veri bağlamaları arasında paylaşılsa bile, ConverterParameter 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ı, ConverterParameter renk seçim programı ile gösterilmiştir.The use of ConverterParameter is demonstrated with a color-selection program. Bu durumda, RgbColorViewModel öğesinin double adlı, Red Green ve Blue bir değer oluşturmak için kullandığı Color türünde üç özelliği vardır: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 0 ile 1 arasında değişir.The Red, Green, and Blue properties range between 0 and 1. Ancak, bileşenlerin iki basamaklı onaltılık değerler olarak görüntülenmesini tercih edebilirsiniz.However, you might prefer that the components be displayed as two-digit hexadecimal values.

Bunları XAML 'de onaltılık değerler olarak göstermek için, 255 ile çarpılmaları, bir tamsayıya dönüştürülmesi ve sonra özelliğindeki "X2" belirtimine göre biçimlendirilmesi gerekir StringFormat .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 ile çarpma 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. Değer dönüştürücüsünü mümkün olduğunca genelleştirilemez hale getirmek için çarpma faktörü özelliği ile belirtilebilir ConverterParameter , yani Convert ConvertBack bağımsız değişken olarak ve yöntemlerini girer parameter .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 double int Değerine göre çarpırken öğesine dönüştürür parameter ; ConvertBack tamsayı value bağımsız değişkenini ile böler parameter ve bir double sonuç döndürür.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üsü yalnızca dize biçimlendirmesi ile bağlantılı olarak kullanılır, bu nedenle ConvertBack kullanılmaz.)(In the program shown below, the value converter is used only in connection with string formatting, so ConvertBack is not used.)

Bağımsız değişkenin türü, parameter veri bağlamasının kodda veya xaml 'de tanımlanıp tanımlanmayacağı konusunda farklılık açmış olabilir.The type of the parameter argument is likely to be different depending on whether the data binding is defined in code or XAML. ConverterParameterÖzelliği Binding kodda ayarlandıysa, büyük olasılıkla sayısal bir değere ayarlanabilir: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ündedir Object , bu nedenle C# derleyicisi 255 sabit değerini bir 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 'de, ConverterParameter bunun gibi büyük olasılıkla şöyle ayarlanabilir: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}'}" />

255 bir sayı gibi görünür, ancak ConverterParameter türünde olduğu IÇIN Object XAML ayrıştırıcısı, 255 öğesini 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üsü GetParameter parameter ,, veya türünde olma durumlarını işleyen ayrı bir yöntem içerir double int 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çicisi sayfası, DoubleToIntConverter kaynak sözlüğünde iki örtük stilin tanımını izleyen bir örneği oluşturur: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>    

Ve özelliklerinin değerleri, Red Green Binding biçimlendirme uzantısıyla birlikte görüntülenir.The values of the Red and Green properties are displayed with a Binding markup extension. BlueAncak özelliği, Binding bir açık double değerin özelliği olarak nasıl ayarlanbildiğini göstermek için sınıfını başlatır ConverterParameter .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çicisiRGB Color Selector