xamarin.formsmvvmswitch-statementcontent-pagesstacklayout

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


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>

Solution

  • 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>