如何基于切换输入显示/隐藏 xamarin 表单内容页面中的条目？

问题描述

我是 Xamarin 表单的新手。

我正在尝试在注册页面中实现一个开关，当切换时，它应该在同一页面上再显示 3 个条目，如果没有，它只显示前 3 个条目（电子邮件、密码和确认密码）。

我正在使用 MVVM，所以我已经创建了 RegistraPageviewmodel，并且希望继续使用这种架构。

附加的图像是我想要在切换开关之前和之后通过注册页面完成的内容。 RegistrationPage.xaml 下面的代码（仅与问题相关的部分）

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

解决方法

您只需要将 IsVisible 的 Entry 属性绑定到 IsToggled 的 Switch 属性。

类似：

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

更新：

 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");
    }

xml:

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