Role Selection

Question

I have a page, where you can select a role.

  <sfPopup:SfPopup
      AnimationMode="Zoom"
      HeightRequest="280"
      IsOpen="True"
      StaysOpen="True">
      <sfPopup:SfPopup.HeaderTemplate>
          <DataTemplate>
              <Label
                  FontAttributes="Bold"
                  FontSize="16"
                  HorizontalTextAlignment="Center"
                  Text="{Binding Path=WelcomeText, Source={x:RelativeSource AncestorType={x:Type vm:RoleSelectionPageViewModel}}}"
                  VerticalTextAlignment="Center" />
          </DataTemplate>
      </sfPopup:SfPopup.HeaderTemplate>
      <sfPopup:SfPopup.ContentTemplate>
          <DataTemplate>
              <VerticalStackLayout BindableLayout.ItemsSource="{Binding Roles}">
                  <BindableLayout.ItemTemplate>
                      <DataTemplate>
                          <Border Margin="10">
                              <Label
                                  Margin="10"
                                  HorizontalTextAlignment="Center"
                                  Text="{Binding .}" />
                              <Border.Triggers>
                                  <DataTrigger
                                      Binding="{Binding Path=IsSelected, Source={x:RelativeSource AncestorType={x:Type vm:RoleSelectionPageViewModel}}}"
                                      TargetType="Border"
                                      Value="true">
                                      <Setter Property="BackgroundColor" Value="CornflowerBlue" />
                                  </DataTrigger>
                              </Border.Triggers>
                              <Border.GestureRecognizers>
                                  <TapGestureRecognizer
                                      Command="{Binding Path=RoleSelectedCommand, Source={x:RelativeSource AncestorType={x:Type vm:RoleSelectionPageViewModel}}}"
                                      CommandParameter="{Binding .}" />
                              </Border.GestureRecognizers>
                          </Border>
                      </DataTemplate>
                  </BindableLayout.ItemTemplate>
              </VerticalStackLayout>
          </DataTemplate>
      </sfPopup:SfPopup.ContentTemplate>
  </sfPopup:SfPopup>

The thing is, that I want a visual representation of the role that selected.

public enum Roles {
    Teacher,
    Student,
    Coordinator,
}

and this is the viewModel

public partial class RoleSelectionPageViewModel : BaseViewModel {
    [ObservableProperty]
    string? welcomeText;
    [ObservableProperty]
    bool? isSelected;
    Roles SelectedRole;
    public List<Roles> Roles { get; set; }
    public RoleSelectionPageViewModel() {
        Roles = Models.User.GetUserRoles();
        welcomeText = "Welcome user, choose your role";
    }
    [RelayCommand]
    public void RoleSelected(Roles SelectedRole) {
        this.SelectedRole = SelectedRole;
        if(this.SelectedRole == SelectedRole) {
            IsSelected = true;
        }
    }
}

and every time Is click on one, all my roles turn blue.

But I want to turn blue the one that I selected, and the other ones will be normal.

be able to select and deselect

Answer 1

Hello,

You can do this by creating a new Model and move the isSelected in it like following code. If you add the isSelected to the ViewModel. When the value of isSelected changed, all of the items's background color will be changed.

 public partial class MyRolesWithSelctedStatus: ObservableObject
    {
        public string Role { get; set; }

       [ObservableProperty]
        private bool? isSelected;
    }

Then you can change the List<Roles> to the List<MyRolesWithSelctedStatus>, add all Roles data to the List<MyRolesWithSelctedStatus> Roles.

Next, you need to change the type to MyRolesWithSelctedStatus in RoleSelected method, when you selected item and set the IsSelected to true, but items set the IsSelected to false.

You can refer to the following code.

public partial class RoleSelectionPageViewModel : BaseViewModel 
{
     [ObservableProperty]
     private string? welcomeText;


    Roles SelectedRole;
     public List<MyRolesWithSelctedStatus> Roles { get; set; }
     public RoleSelectionPageViewModel()
     {
         Roles = new List<MyRolesWithSelctedStatus>();
         List<Roles> GetRolesWithoutStatus =  Models.User.GetUserRoles();
         foreach (Roles role in GetRolesWithoutStatus)
         {
             MyRolesWithSelctedStatus myRolesWithSelctedStatus=    new MyRolesWithSelctedStatus() { Role = role.ToString(), IsSelected=false };
             Roles.Add(myRolesWithSelctedStatus);
         }
        
         WelcomeText = "Welcome user, choose your role";


    }


    [RelayCommand]
     public void RoleSelected(MyRolesWithSelctedStatus SelectedRole)
     {
         SelectedRole.IsSelected = true;
         foreach (MyRolesWithSelctedStatus item in Roles)
         {
             if(item!= SelectedRole)
             {
                 item.IsSelected = false;    
             }
         }
     }
}

In my tested demo, Border.GestureRecognizers is not working in my side. So, I use a Button to implement the same result, you can check the following layout code.

  <sfPopup:SfPopup
      AnimationMode="Zoom"
      HeightRequest="280"
      IsOpen="True"
      StaysOpen="True">
                <sfPopup:SfPopup.HeaderTemplate>
                    <DataTemplate>
                        <Label
                  FontAttributes="Bold"
                  FontSize="16"
                  HorizontalTextAlignment="Center"
                  Text="{Binding Path=WelcomeText, Source={x:RelativeSource AncestorType={x:Type vm:RoleSelectionPageViewModel}}}"
                  VerticalTextAlignment="Center" />
                    </DataTemplate>
                </sfPopup:SfPopup.HeaderTemplate>
                <sfPopup:SfPopup.ContentTemplate>
                    <DataTemplate>
                        <VerticalStackLayout BindableLayout.ItemsSource="{Binding Roles}">
                            <BindableLayout.ItemTemplate>
                                <DataTemplate>
                                    <Border Margin="10">
                                        <Button Text="{Binding Role}"
                                                TextColor="Black"
                                                Background="Transparent"
                                                Command="{Binding Path=RoleSelectedCommand, Source={x:RelativeSource AncestorType={x:Type vm:RoleSelectionPageViewModel}}}"
                                                CommandParameter="{Binding .}"       
                                                >
                                        </Button>
                                        <Border.Triggers>
                                            <DataTrigger
                                                  Binding="{Binding Path=IsSelected}"
                                                  TargetType="Border"
                                                  Value="true">
                                                <Setter Property="BackgroundColor" Value="CornflowerBlue" />
                                            </DataTrigger>
                                        </Border.Triggers>
                                    </Border>
                                </DataTemplate>
                            </BindableLayout.ItemTemplate>
                        </VerticalStackLayout>
                    </DataTemplate>
                </sfPopup:SfPopup.ContentTemplate>
            </sfPopup:SfPopup>

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.