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