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, bir tür dizeyi bir dizeye dönüştürmek için bir veri StringFormat 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, IValueConverter arabirimi uygulayan bir sınıfa bazı özel kod yazmanız gerekir.For other types of conversions, you need to write some specialized code in a class that implements the IValueConverter interface. IValueConverter (Evrensel Windows platformu Windows.UI.Xaml.Data ad alanında adlı benzer bir sınıfı içerir, Xamarin.Forms ancak bu IValueConverter ad alanıdır.) Uygulayan IValueConverter sınıflara değer dönüştürücülerdenir, ancak genellikle bağlama dönüştürücüleri veya bağlama değeri dönüştürücüleriolarak 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ü int olan ancak Target özelliği bir boololan veri bağlamayı tanımlamak istediğinizi varsayalım.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, tamsayı kaynağı 0 ' false 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, IValueConverter arabirimini uygulayan bir sınıf ile yapabilirsiniz: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 Converter bir örneğini 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 yöntem, veriler kaynaktan OneWay hedefe veya TwoWay bağlamalara geçdiğinde çağrılır. ConvertThe Convert method is called when data moves from the source to the target in OneWay or TwoWay bindings. value Parametresi, 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 value gösterilen yöntemi parametresini int öğesine yayınlar ve sonra bool dönüş değeri için 0 ile karşılaştırır.The method shown here casts the value parameter to an int and then compares it with 0 for a bool return value.

Veriler hedeften TwoWay kaynağına veya OneWayToSource bağlamalara geldiğinde çağrılır. ConvertBackThe ConvertBack method is called when data moves from the target to the source in TwoWay or OneWayToSource bindings. ConvertBackters dönüştürmeyi gerçekleştirir: value parametrenin hedeften bir bool olduğunu varsayar ve kaynak için bir int 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, iki veri bağlamalarında StaticResource Converter ö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ı, Entry kullanıcının bir görünüme sahip olduğu metne Button göre bir işlem gerçekleştirdiğinde bir genel gereksinimi gösterir.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. Entry Öğesine Button hiçbir şey yazılmışsa, devre dışı bırakılmalıdır.If nothing has been typed into the Entry, the Button should be disabled. Her Button biri, IsEnabled özelliği üzerinde bir veri bağlama içerir.Each Button contains a data binding on its IsEnabled property. Veri bağlama kaynağı Length Text , karşılık gelen Entryözelliğin özelliğidir.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ştir ] etkinleştir (converters-images/enablebuttons-large.png#lightbox "Düğmeleri etkinleştir")Enable Buttons

Her birinin Entry içindeki özelliğinin boş bir dizeye başlatıldığını unutmayın. TextNotice that the Text property in each Entry is initialized to an empty string. Özelliği varsayılan olarak null olur ve veri bağlama bu durumda çalışmayacaktır. TextThe 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 bağlamalarda OneWay 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.

Yukarıda gösterilen value Yöntem bağımsız int değişkenin tür olduğunu ve dönüş değerinin türünden boololması gerektiğini varsayar. ConvertThe 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 bool olduğunu ve dönüş değerinin olduğunu intvarsayar.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. Convert as GetType Ve yöntemleri parametresiyle veya is işleçlerini kullanabilir ya da bu parametreyi kullanarak türünü belirleyebilir ve uygun bir şeyi gerçekleştirebilir. value ConvertBackThe 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ü targetType parametre tarafından verilir.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ü, doğru tür için targetType 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, bu amaçla culture parametresini kullanın.If the conversion being performed is different for different cultures, use the culture parameter for this purpose. Ve parameter için ConvertBack bağımsız değişkeni Bu makalenin ilerleyen kısımlarında ele alınmıştır. ConvertThe 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ü, kaynağı bool kaynağından hedef için türünden T bir nesneye dönüştürür: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 Switch görünümün değerini görüntülemek için nasıl kullanılabileceğini gösterir.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ü, özellik öğesi etiketleri arasında Binding.Converter 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. , Genel bağımsız değişkenini TrueObject x:TypeArguments FalseObject gösterir ve 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 TrueObject FalseObject Style Styleçiftinin en sonunda, genel bağımsız değişken olarak ayarlanır ve tüm nesneleri ve değerleri için sağlanır. LabelIn 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 Label ayarlanan örtülü stilini geçersiz kılar, bu nedenle söz konusu stildeki Özellikler açıkça Labelöğesine atanır.These override the implicit style for Label set in the resource dictionary, so the properties in that style are explicitly assigned to the Label. Bunu değiştirmek Switch , 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östergeleri ] (converters-images/switchindicators-large.png#lightbox "Anahtar göstergeleri")Switch Indicators

Diğer görünümlere göre Kullanıcı arabirimindeki benzer Triggers 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

Sınıfı bir ConverterParameter özelliği tanımlar ve Binding biçimlendirme uzantısı da bir ConverterParameter özelliği tanımlar. BindingThe Binding class defines a ConverterParameter property, and the Binding markup extension also defines a ConverterParameter property. Bu özellik ayarlandıysa, değeri Convert parameter bağımsız değişkeni olarak ve ConvertBack yöntemlerine geçirilir.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ı ConverterParameter arasında paylaşılsa bile, 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 adlı Red , Green ve double bir değer Color oluşturmak için kullandığı türünde üç özelliği vardır: BlueIn 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, Ve özellikleri Blue 0 ile 1 arasında değişir. GreenThe 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 StringFormat özelliğindeki "X2" belirtimine göre biçimlendirilmesi gerekir.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 ConverterParameter çarpma faktörü özelliği ile belirtilebilir, yani parameter bağımsız değişken olarak Convert ve ConvertBack yöntemlerini girer.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 Değerine göre int çarpırken öğesine dönüştürür ConvertBack ; tamsayı value bağımsız değişkenini double ile böler ve bir sonuç döndürür parameter . parameterThe 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.)

parameter Bağımsız değişkenin türü, 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 kodda ayarlandıysa, büyük olasılıkla Binding 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;

Özelliği türündedir Object, bu nedenle C# derleyici 255 sabit değerini bir tamsayı olarak yorumlar ve özelliği bu değere ayarlar. ConverterParameterThe 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 ConverterParameter xaml 'de, 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 Objectolduğu için 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 , int, veya stringtüründe parameter doubleolma durumlarını işleyen ayrı bir yöntem içerir.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ı, kaynak DoubleToIntConverter 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>    

Red Ve Green özelliklerinin değerleri, biçimlendirme uzantısıyla birlikte görüntülenir. BindingThe values of the Red and Green properties are displayed with a Binding markup extension. Ancak özelliği, bir double açık değerin özelliği Binding olarak ConverterParameter nasıl ayarlanbildiğini göstermek için sınıfını başlatır. BlueThe 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çicisi ] (converters-images/rgbcolorselector-large.png#lightbox "RGB Renk Seçicisi")RGB Color Selector