Xamarin.Forms
Triggers en gedrag

Xamarin Forms Trigger-voorbeeld

Trigger zijn een gemakkelijke manier om wat UX-responsiviteit aan uw toepassing toe te voegen. Een eenvoudige manier om dit te doen is om een Trigger toe te voegen die de TextColor een Label TextColor basis van het feit of er al dan niet tekst in de bijbehorende Entry is ingevoerd.

Als u hiervoor een Trigger kan de Label.TextColor van grijs (wanneer geen tekst wordt ingevoerd) naar zwart veranderen (zodra de gebruiker tekst Label.TextColor ):

Converter (elke converter krijgt een Instance variabele die wordt gebruikt in de binding zodat er geen nieuwe instantie van de klasse wordt gemaakt elke keer dat deze wordt gebruikt):

/// <summary>
/// Used in a XAML trigger to return <c>true</c> or <c>false</c> based on the length of <c>value</c>.
/// </summary>
public class LengthTriggerConverter : Xamarin.Forms.IValueConverter {

    /// <summary>
    /// Used so that a new instance is not created every time this converter is used in the XAML code.
    /// </summary>
    public static LengthTriggerConverter Instance = new LengthTriggerConverter();

    /// <summary>
    /// If a `ConverterParameter` is passed in, a check to see if <c>value</c> is greater than <c>parameter</c> is made. Otherwise, a check to see if <c>value</c> is over 0 is made.
    /// </summary>
    /// <param name="value">The length of the text from an Entry/Label/etc.</param>
    /// <param name="targetType">The Type of object/control that the text/value is coming from.</param>
    /// <param name="parameter">Optional, specify what length to test against (example: for 3 Letter Name, we would choose 2, since the 3 Letter Name Entry needs to be over 2 characters), if not specified, defaults to 0.</param>
    /// <param name="culture">The current culture set in the device.</param>
    /// <returns><c>object</c>, which is a <c>bool</c> (<c>true</c> if <c>value</c> is greater than 0 (or is greater than the parameter), <c>false</c> if not).</returns>
    public object Convert(object value, System.Type targetType, object parameter, CultureInfo culture)     { return DoWork(value, parameter); }
    public object ConvertBack(object value, System.Type targetType, object parameter, CultureInfo culture) { return DoWork(value, parameter); }

    private static object DoWork(object value, object parameter) {
        int parameterInt = 0;

        if(parameter != null) { //If param was specified, convert and use it, otherwise, 0 is used

            string parameterString = (string)parameter;

            if(!string.IsNullOrEmpty(parameterString)) { int.TryParse(parameterString, out parameterInt); }
        }

        return (int)value > parameterInt;
    }
}

XAML (de XAML code maakt gebruik van de x:Name van het Entry om erachter te komen in het Entry.Text pand is meer dan 3 karakters lang zijn.):

<StackLayout>
    <Label Text="3 Letter Name">
        <Label.Triggers>
            <DataTrigger TargetType="Label"
                         Binding="{Binding Source={x:Reference NameEntry},
                                           Path=Text.Length,
                                           Converter={x:Static helpers:LengthTriggerConverter.Instance},
                                           ConverterParameter=2}"
                         Value="False">
                <Setter Property="TextColor"
                        Value="Gray"/>
            </DataTrigger>
        </Label.Triggers>
    </Label>
    <Entry x:Name="NameEntry"
           Text="{Binding MealAmount}"
           HorizontalOptions="StartAndExpand"/>
</StackLayout>

Multi-triggers

MultiTrigger is niet vaak nodig, maar er zijn enkele situaties waarin het erg handig is. MultiTrigger gedraagt zich op dezelfde manier als Trigger of DataTrigger, maar heeft meerdere voorwaarden. Alle voorwaarden moeten waar zijn voor een Setters om te vuren. Hier is een eenvoudig voorbeeld:

<!-- Text field needs to be initialized in order for the trigger to work at start -->
<Entry x:Name="email" Placeholder="Email" Text="" />
<Entry x:Name="phone" Placeholder="Phone" Text="" />
<Button Text="Submit">
    <Button.Triggers>
        <MultiTrigger TargetType="Button">
            <MultiTrigger.Conditions>
                <BindingCondition Binding="{Binding Source={x:Reference email}, Path=Text.Length}" Value="0" />
                <BindingCondition Binding="{Binding Source={x:Reference phone}, Path=Text.Length}" Value="0" />
            </MultiTrigger.Conditions>
            <Setter Property="IsEnabled" Value="False" />
        </MultiTrigger>
    </Button.Triggers>
</Button>

Het voorbeeld heeft twee verschillende vermeldingen, telefoon en e-mail, en een daarvan moet worden ingevuld. De MultiTrigger schakelt de verzendknop uit wanneer beide velden leeg zijn.