Role Selection

Eduardo Gomez 3,416 Reputation points
2024-03-07T22:48:18.2166667+00:00

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.

User's image

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

be able to select and deselect

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
2,861 questions
0 comments No comments
{count} votes

Accepted answer
  1. Leon Lu (Shanghai Wicresoft Co,.Ltd.) 68,491 Reputation points Microsoft Vendor
    2024-03-08T03:10:26.7633333+00:00

    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.


0 additional answers

Sort by: Most helpful