question

78141243 avatar image
0 Votes"
78141243 asked KyleWang-MSFT commented

How to achieve Below UI Design In Xamarin forms

Hello Everyone,

I want to design UI design as per the attached image. where I want to show users review comments & ratings. also want to introduce pagination which was shown right top corner of the image.

128546-screenshot-2021-09-02-at-24027-pm.png


dotnet-xamarin
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

KyleWang-MSFT avatar image
1 Vote"
KyleWang-MSFT answered KyleWang-MSFT commented

Hi 78141243,

Welcome to our Microsoft Q&A platform!

You can create a ListView to show the customer reviews and use Labels to achieve "pagination".

Here is a simple demo you can refer to.
MainPage.xaml

 <ContentPage.BindingContext>
     <local:MainPageViewModel/>
 </ContentPage.BindingContext>
    
 <StackLayout>
     <StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand">
         <Label x:Name="firstLabel" Text="{Binding First}" TextColor="{Binding FirstColor}">
             <Label.GestureRecognizers>
                 <TapGestureRecognizer Command="{Binding TapCommand}" CommandParameter="{Binding Source={Reference firstLabel}, Path=.}"/>
             </Label.GestureRecognizers>
         </Label>
         <Label x:Name="secondLabel" Text="{Binding Second}" TextColor="{Binding SecondColor}">
             <Label.GestureRecognizers>
                 <TapGestureRecognizer Command="{Binding TapCommand}" CommandParameter="{Binding Source={Reference secondLabel}, Path=.}"/>
             </Label.GestureRecognizers>
         </Label>
         <Label x:Name="thirdLabel" Text="{Binding Third}" TextColor="{Binding ThirdColor}">
             <Label.GestureRecognizers>
                 <TapGestureRecognizer Command="{Binding TapCommand}" CommandParameter="{Binding Source={Reference thirdLabel}, Path=.}"/>
             </Label.GestureRecognizers>
         </Label>
     </StackLayout>
         <StackLayout>
         <ListView ItemsSource="{Binding ReviewContentList}"
                 HasUnevenRows="True"
                 SeparatorVisibility="None"
                 SelectionMode="None">
             <ListView.ItemTemplate>
                 <DataTemplate>
                     <ViewCell>
                         <Frame Margin="10,5,10,5">
                             <StackLayout>
                                 <Label Text="{Binding Title}"/>
                                 <StackLayout Orientation="Horizontal">
                                     <Label Text="{Binding Name}"/>
                                     <Label Text="{Binding Date}"/>
                                 </StackLayout>
                                 <Label Text="{Binding Comment}"/>
                             </StackLayout>
                         </Frame>
                     </ViewCell>
                 </DataTemplate>
             </ListView.ItemTemplate>
         </ListView>
     </StackLayout>
 </StackLayout>

MainPageViewModel.cs

 class MainPageViewModel : INotifyPropertyChanged
 {
     public Command<object> TapCommand { get; set; }
    
     public List<ReviewContent> ListofAll { get; set; }
     public ObservableCollection<ReviewContent> ReviewContentList { get; set; }
    
     string first;
     string second;
     string third;
     Color firstColor;
     Color secondColor;
     Color thirdColor;
    
     public string First
     {
         get => first;
         set { first = value; OnPropertyChanged("First"); }
     }
    
     public string Second
     {
         get => second;
         set
         { second = value; OnPropertyChanged("Second"); }
     }
    
     public string Third
     {
         get => third;
         set
         { third = value; OnPropertyChanged("Third"); }
     }
    
     public Color FirstColor
     {
         get => firstColor;
         set { firstColor = value; OnPropertyChanged("FirstColor"); }
     }
     public Color SecondColor
     {
         get => secondColor;
         set { secondColor = value; OnPropertyChanged("SecondColor"); }
     }
     public Color ThirdColor
     {
         get => thirdColor;
         set { thirdColor = value; OnPropertyChanged("ThirdColor"); }
     }
    
     public MainPageViewModel()
     {
         TapCommand = new Command<object>(Tap);
    
         ListofAll = new List<ReviewContent>();
    
         for (int i = 1; i < 10; i++)
         {
             ListofAll.Add(new ReviewContent
             {
                 Title = $"Title{i}",
                 Name = $"Name{i} Name{i}",
                 Date = $"yyyy/mm/dd{i}",
                 Comment = $"Comment{i}..."
             });
         }
    
         ReviewContentList = new ObservableCollection<ReviewContent>();
         // show first three reviews
         for (int i = 0; i < 3; i++)
         {
             ReviewContentList.Add(ListofAll[i]);
         }
    
         First = "1";
         Second = "2";
         Third = "3";
    
         FirstColor = Color.Black;
         SecondColor = Color.Gray;
         ThirdColor = Color.Gray;
     }
    
     void ResetSelection()
     {
         FirstColor = Color.Gray;
         SecondColor = Color.Gray;
         ThirdColor = Color.Gray;
     }
    
     void ResetItemsShown(int pageindex)
     {
         ReviewContentList.Clear();
         for (int i = (pageindex - 1) * 3; i < pageindex * 3; i++)
         {
             ReviewContentList.Add(ListofAll[i]);
         }
     }
    
     void Tap(object obj)
     {
         var lab = obj as Label;
         if (lab == null)
             return;
    
         switch (lab.Text)
         {
             case "1":
                 ResetSelection();
                 FirstColor = Color.Black;
                 ResetItemsShown(1);
                 break;
             case "2":
                 ResetSelection();
                 SecondColor = Color.Black;
                 ResetItemsShown(2);
                 break;
             case "3":
                 ResetSelection();
                 ThirdColor = Color.Black;
                 ResetItemsShown(3);
                 break;
         }
     }
    
     public event PropertyChangedEventHandler PropertyChanged;
    
     public void OnPropertyChanged(string propertyName)
     {
         var handle = PropertyChanged;
         if (handle != null)
         {
             handle(this, new PropertyChangedEventArgs(propertyName));
         }
     }
 }
    
 class ReviewContent
 {
     public string Title { get; set; }
     public string Name { get; set; }
     public string Date { get; set; }
     public string Comment { get; set; }
 }

As to the "RattingBar", you can refer to the thread: How can I create RatingBar with Xamarin Forms?.
Regards,
Kyle


If the response is helpful, please click "Accept Answer" and upvote it.

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.

· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

@78141243 Does this reply helps you? You can post any update here.

0 Votes 0 ·