.NET MAUI IsVisible MultiTrigger of StackLayout not working-CodePudding

I am trying to set my StackLayout Visibility to False if my Picker's SelectedIndex is on the last three options and not the first two.

This is the picker's list:

"1 - Yes",
"2 - No",
"97 - Don't Know",
"98 - No Answer",
"99 - Not Applicable"

XAML:

<!-- Intention to Use Family Planning --> 
<StackLayout Padding="10,0,10,10"> 
    <Label Text="Intention to use Family Planning?" 
           VerticalTextAlignment="Center" 
           FontAttributes="Bold"/> 
    <Border Padding="10,0,0,0"> 
        <StackLayout> 
            <Picker x:Name="PckIntentionFP" 
                    Title="Select a Family Planning Intention Option" 
                    ItemsSource="{Binding IntentionToFamilyPlanningItems}">
            </Picker>
        </StackLayout> 
    </Border> 
</StackLayout> 

<!-- Intention Yes/No -->
<StackLayout Padding="10,0,10,10">
    <StackLayout.Triggers>
        <MultiTrigger TargetType="StackLayout">
            <MultiTrigger.Conditions>
                <BindingCondition Binding="{Binding Source={x:Reference PckIntentionFP}, 
                                                    Path=SelectedIndex}" 
                                  Value="2"/>
                <BindingCondition Binding="{Binding Source={x:Reference PckIntentionFP}, 
                                                    Path=SelectedIndex}" 
                                  Value="3"/>
                <BindingCondition Binding="{Binding Source={x:Reference PckIntentionFP}, 
                                                    Path=SelectedIndex}"
                                  Value="4"/>
            </MultiTrigger.Conditions>
            <Setter Property="IsVisible" Value="False" />
        </MultiTrigger>
    </StackLayout.Triggers>
    <Label Text="If 'Yes', what method? If 'No', why not?"
           FontAttributes="Bold"
           VerticalTextAlignment="Center"/>
    <Frame Padding="10,0,10,0"
           Margin="5">
        <Entry VerticalOptions="Center"
               TextTransform="Uppercase"
               Text="{Binding LastName}">
        </Entry>
    </Frame>
</StackLayout>

This is my first time asking a question here, sorry in advance.

As i run the application in my tablet it does not set the StackLayout Visibility to False when I selected the last three options.

I am really confused on what I mmight have missed on using the MultiTrigger.

CodePudding user response：

You could use SelectedIndexChanged handler of Picker.

In xaml file:

<Picker x:Name="PckIntentionFP" 
    Title="Select a Family Planning Intention Option" 
    ItemsSource="{Binding IntentionToFamilyPlanningItems}"
    SelectedIndexChanged="PckIntentionFP_SelectedIndexChanged"> // add this event handler for picker

//set a name for StackLayout
<StackLayout Padding="10,0,10,10" x:Name="mystack" >
            ...
               
</StackLayout>

And in .cs file, implement it:

void PckIntentionFP_SelectedIndexChanged(System.Object sender, System.EventArgs e)
{
    var p = sender as Picker;
    if (p.SelectedIndex == 1 || p.SelectedIndex == 0)
    {
        mystack.IsVisible = true;
    }else
    {
        mystack.IsVisible = false;
    }
}

Another way i think you could use three parallel Data triggers for selected index of 2,3 and 4 separately.

Hope it works for you.

CodePudding user response：

You want boolean. (IsVisible). You have integer. (Selected index).

You can use Value Converters, for binding.

https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/data-binding/converters?view=net-maui-7.0

The very first example is int to bool converter. If you have questions, please ask.