xamarin.forms - How to show/hide entries in xamarin forms content page based on a switch input?

Question

I'm new to Xamarin forms.

I'm trying to implement a switch in a registration page, that when toggled, it should show 3 more entries on the same page, if not, it just shows the first 3 entries (email, password and confirmPassword).

I'm using MVVM so I already have the RegistraPageViewModel created and would love to keep using this architecture.

Attached images are what I want to accomplish with the registration page before and after toggling the switch. Code below of the RegistrationPage.xaml (only the section pertinent to the question)

<StackLayout Orientation="Horizontal" Spacing="10">
       <Label Text="Are you a service provider?"/>
       <Label Text="Yes/No"/>

       <Switch x:Name="SwitchIsToggled" HorizontalOptions="CenterAndExpand"
               OnColor="Orange"
               IsToggled="False"
               ThumbColor="{StaticResource MainButtonColor}"
               />

   </StackLayout>
   
   <StackLayout x:Name="IsProvider" IsVisible="{Binding SwitchIsToggled}">
       <StackLayout.Triggers>

           <DataTrigger TargetType="StackLayout"
                        Binding="{Binding Source={x:Reference IsProvider}}">
               
              <Setter Property="IsVisible" Value="false"/>
           </DataTrigger>

       </StackLayout.Triggers>
    <Entry x:Name="providerCompanyEntry"
           Placeholder="Company Name"
           Keyboard="Default"/>

    <Entry x:Name="timEntry"
           Placeholder="TIN"
           Keyboard="Numeric"/>

    <Entry x:Name="addressEntry"
           Placeholder="Address"
           Keyboard="Default"/>
   </StackLayout>

question from:https://stackoverflow.com/questions/65893710/how-to-show-hide-entries-in-xamarin-forms-content-page-based-on-a-switch-input

Answer 1

You just need to bind the IsVisible propery of Entry to the IsToggled property of the Switch.

somethig like :

<StackLayout>
        <Switch x:Name="SwitchIsToggled" HorizontalOptions="CenterAndExpand"
           OnColor="Orange"
           IsToggled="False"
           ThumbColor="{StaticResource MainButtonColor}"
           />
        <Entry Placeholder="email"></Entry>
        <Entry Placeholder="password"></Entry>
        <Entry Placeholder="confirm password"></Entry>
        <Entry Placeholder="Company Name" IsVisible="{Binding IsToggled}" BindingContext="{x:Reference SwitchIsToggled}"></Entry>
        <Entry Placeholder="TIN" IsVisible="{Binding IsToggled}" BindingContext="{x:Reference SwitchIsToggled}"></Entry>
        <Entry Placeholder="Address" IsVisible="{Binding IsToggled}" BindingContext="{x:Reference SwitchIsToggled}"></Entry>
</StackLayout>

Update :

 public Page2()
    {
        InitializeComponent();
        cname.BindingContext = SwitchIsToggled;
        cname.SetBinding(Entry.IsVisibleProperty, "IsToggled");
        tin.BindingContext = SwitchIsToggled;
        tin.SetBinding(Entry.IsVisibleProperty, "IsToggled");
        address.BindingContext = SwitchIsToggled;
        address.SetBinding(Entry.IsVisibleProperty, "IsToggled");
    }

xaml:

<StackLayout>
        <Switch x:Name="SwitchIsToggled" HorizontalOptions="CenterAndExpand"
           OnColor="Orange"
           IsToggled="False"
           ThumbColor="{StaticResource MainButtonColor}"
           />
        <Entry Placeholder="email"></Entry>
        <Entry Placeholder="password"></Entry>
        <Entry Placeholder="confirm password"></Entry>
        <Entry x:Name="cname" Placeholder="Company Name"></Entry>
        <Entry x:Name="tin" Placeholder="TIN" ></Entry>
        <Entry x:Name="address" Placeholder="Address" ></Entry>
</StackLayout>