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>

the docs have examples of binding views to one another - https://learn.microsoft.com/en-us/xamarin/xamarin-forms/xaml/xaml-basics/data-binding-basics#view-to-view-bindings — Jason, Jan 25 '21 at 23:20

Leo Zhu · Accepted Answer · 2021-01-27T01:43:16.277

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>

How would I implement the binding from the ViewModel, not from Xaml file with the help of a Command? — EightyEightKeysDev, Jan 26 '21 at 13:05
@EightyEightKeysDev Generally, if you do not bind in xaml, we can bind in code behind. We will not bind in the viewmodel.You could check the update above,the binding in the code behind. — Leo Zhu, Jan 27 '21 at 01:41

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

1 Answers1