Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (150).NET Core  (25)Angular  (45)ASP.NET  (48)ASP.NET Core  (59)ASP.NET MVC  (84)Azure  (28)Blazor  (79)DocIO  (18)Essential JS 2  (67)Essential Studio  (161)Flutter  (92)JavaScript  (143)Microsoft  (101)PDF  (55)React  (32)Succinctly series  (120)Syncfusion  (460)TypeScript  (30)Uno Platform  (2)UWP  (4)Vue  (26)Webinar  (20)Windows Forms  (54)WPF  (111)Xamarin  (122)XlsIO  (24)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (105)Chart  (46)Cloud  (9)Company  (445)Dashboard  (6)Data Science  (3)Data Validation  (3)DataGrid  (38)Development  (246)Doc  (7)DockingManager  (1)eBook  (91)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (18)Extensions  (12)File Manager  (3)Gantt  (8)Gauge  (6)Git  (4)Grid  (26)HTML  (9)Installer  (2)Knockout  (2)LINQPad  (1)Linux  (1)M-Commerce  (1)Metro Studio  (11)Mobile  (197)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (21)Performance  (4)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (21)SfDataGrid  (8)Silverlight  (21)Sneak Peek  (15)Solution Services  (2)Spreadsheet  (6)SQL  (6)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (9)Tips and Tricks  (49)UI  (108)Uncategorized  (68)Unix  (2)User interface  (67)Visual State Manager  (1)Visual Studio  (18)Visual Studio Code  (10)Web  (175)What's new  (108)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Replicating Talent Casting UI in Xamarin.Forms

Replicating Talent Casting UI in Xamarin.Forms

In this blog, we’ll be replicating a talent-casting UI in Xamarin.Forms obtained from this Dribble design site.

Our design contains the following screens:

  • Talents: Shows the list of candidates and their details.
  • TalentsDetails: Shows more details about the candidate.

Refer to the following screenshot.
Replicating Talent Casting UI in Xamarin.Forms

Designing the Talents page

We will start by designing the first screen:

  • First, we’ll name it TalentPage.
  • To create the rating bar, we’ll be using the Syncfusion Xamarin Rating control.
  • Then, we are going to use a CollectionView to display a list of data. If you want to know more about it, you can refer to this blog.
  • Finally, we’ll add the PancakeView package to all our projects using the following namespace.
    xmlns:PanCake="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"

Let ‘s code!

Main layout structure

It’s important to make a good selection in the layouts that we will be using. In this case, for the main layout structure, I used the grid from the following namespace.

<!-- Main structure-->
 <Grid RowSpacing="0" RowDefinitions="Auto,Auto,Auto,*" ColumnDefinitions="*,Auto" Padding="25,60,25,0">
      <!-- You must write here what is explained from the step number 1 -->
 </Grid>

I recommend this article, which will help you a lot while building UIs with grids.

Step 1: Talent main bar

Talent main barTo start with, let’s divide the talent main bar into the following controls:

  • Title and number of talents
  • Profile picture (to make the rounded edges of the photos, we will use Pancake View.)
  • Search controls.

Code implementation

<!-- Header structure-->
  <!-- Title-->
  <Label Grid.Row="0" Grid.Column="0" Text="Talents" FontAttributes="Bold" FontSize="30"/>
  <!-- Profile imagen with rounded corners-->
  <PanCake:PancakeView Grid.Row="0" Grid.Column="1" HeightRequest="100" Grid.RowSpan="2"  CornerRadius="15">
         <Image Source="Nick"/>
  </PanCake:PancakeView>
  <!-- Subtitle with number of talents-->
  <Label Grid.Row="1" Grid.Column="0" Text="12 420 available" FontSize="15" TextColor="#90999f"/>
  <!-- Talent search bar-->
  <SearchBar Grid.Row="2" Grid.Column="0" Placeholder="Search talents ..." BackgroundColor="Transparent" Margin="0,15,0,0"/>
  <!-- Settings Icon -->
  <Image Grid.Row="2" Grid.Column="1" Source="Settings" Margin="15,20,15,0"/>

<!-- You must add here what is explained in the next step -->

Step 2: Talent list information

Talent list informationAs the main control, we will use the CollectionView to show the list of data.

Let’s learn how to do it step by step:

    1. Use the following namespace to include the collection view in your application.
      <!-- Talent list information-->
        <CollectionView Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" Margin="5,0" 
                                           VerticalScrollBarVisibility="Never"
                                           HeightRequest="445"
                                           ItemsSource="{Binding talents}">
                               <CollectionView.ItemTemplate>
                                     <DataTemplate> 
                                       <!-- You must add here what is explained in the next step -->
                                     </DataTemplate>
                               </CollectionView.ItemTemplate>
        </CollectionView>
      
    2. Now the CollectionView is created. Let’s focus on how to create the layout that will contain the structure of the information. We’ll implement a grid that will have three columns and five rows using the following namespace.
      <Grid RowDefinitions="Auto,Auto,Auto,Auto,Auto" ColumnDefinitions="Auto,*,Auto">
         <!-- You must add here what is explained in the next step -->
      </Grid>
      
    3. Within the previous step, we are going to add the following information:
      • Main image
      • Talent name
      • Heart icon

      To do so, use the following namespace in your application.

      <!--Main imagen -->
      <PanCake:PancakeView Grid.Row="1" Grid.Column="0" Grid.RowSpan="6" CornerRadius="20">
          <Image Source="{Binding Picture}" HeightRequest="200" WidthRequest="130" Aspect="Fill"/>
      </PanCake:PancakeView>
      <!--Talent Name-->
      <Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Padding="10,0,0,0" Text="{Binding Name}" FontSize="18" FontAttributes="Bold"/>
      <!--Heart icon-->
      <Image Grid.Row="1" Grid.Column="2" HorizontalOptions="End" Margin="0,0,10,0" Source="Heart"/>
      
      <!-- You must add here what is explained in the next step -->
      
    4. And now, it’s time to add the Rating control. To create this, we will use the Syncfusion Xamarin Rating control, as we said earlier in this blog post.Add the  Syncfusion.Xamarin.SfRating NuGet package to all your projects. (You can read more information about it in this control documentation.)
      Add the Syncfusion.Xamarin.SfRating NuGet package to all your projects
    5. Then, add the following namespace in your XAML file.
      xmlns:rating="clr-namespace:Syncfusion.SfRating.XForms;assembly=Syncfusion.SfRating.XForms"
    6. And then, let’s add the rating control to our screen using the following namespace.
      <!--Rating component--> 
      <rating:SfRating Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" Margin="10,0,0,0" ItemCount="5" Value="{Binding Rating}" ReadOnly="true" ItemSize="13" ItemSpacing="2" />
      <Label Grid.Column="1" Grid.Row="2" Text="72" FontAttributes="Bold" TextColor="Silver" FontSize="13" HorizontalOptions="End" TranslationX="-20" />
       
      <!-- You must add here what is explained in the next step -->
      
    7. Now, add the age and location information in the screen. Here, I would like to highlight some controls that we use:
      • I have used FormattedString. This is a good option when we want a single label with different formats.
      • For the line, I have used the Xamarin.Forms Shapes. (You can read more information about it in this documentation.)

      Refer to the following code.

      <!--Location information-->
      <Label Grid.Row="3" Grid.Column="1" Padding="10,10,0,0">
             <Label.FormattedText>
               <FormattedString>
                    <Span Text="Location 
      " TextColor="Silver" FontAttributes="Bold"/>
                    <Span Text="{Binding Location}" TextColor="#393e42" FontSize="14" FontAttributes="Bold"/>
               </FormattedString>
             </Label.FormattedText>
       </Label>
       <Line  Grid.Row="3" Grid.Column="1" HorizontalOptions="End"  Y1="50" Margin="5" StrokeThickness="0.5" Stroke="Silver"/>
      
       <!--Age information-->
       <Label Grid.Row="3" Grid.Column="2" Padding="10,10,0,0">
              <Label.FormattedText>
                    <FormattedString>
                         <Span Text="Age 
      " TextColor="Silver" FontAttributes="Bold"/>
                         <Span Text="{Binding Age}" TextColor="#393e42" FontSize="14" FontAttributes="Bold"/>
                    </FormattedString>
              </Label.FormattedText>
        </Label>
        
        <!-- You must add here what is explained in the next step -->
      
    8. And finally, we add the set of Skills using the following code.
      <!--Skills-->
      <CollectionView Grid.Row="4" Grid.Column="1" Grid.ColumnSpan="2" ItemsSource="{Binding skills}"
                      HorizontalScrollBarVisibility="Never"
                      HeightRequest="72">
                      <CollectionView.ItemsLayout>
                          <GridItemsLayout Orientation="Horizontal" Span="2" />
                       </CollectionView.ItemsLayout>
                       <CollectionView.ItemTemplate>
                                       <DataTemplate> 
                                         <StackLayout Padding="5">
                                            <Button Text="{Binding Descripcion}" BackgroundColor="Transparent" CornerRadius="12" BorderColor="#9ca3a8" FontSize="9" BorderWidth="1.3" TextColor="Black" Opacity="0.7" HeightRequest="30" Padding="10" HorizontalOptions="Start"/>
                                         </StackLayout> 
                                   </DataTemplate>
                        </CollectionView.ItemTemplate>
      </CollectionView>
      

      We finally have our first screen ready!
      Designing the Talents page

Designing the TalentDetails page

Let’s continue with the last screen.

Step 3: Talent carousel

Talent carousel

  1. Let’s add the main structure of our page using the following namespace.
    <!-- Talent image Carousel-->
    <Grid RowDefinitions="*,Auto">
        <!-- You must add here what is explained in the next step -->
    </Grid>
    
  2. Then, add a ContentPage.Resources with the following code.
    <ContentPage.Resources>
            <ResourceDictionary>
                <DataTemplate x:Key="itemTemplate">
                    <Image Source="{Binding Picture}" 
                           Aspect="AspectFill"
                           HorizontalOptions="FillAndExpand"/>
                </DataTemplate>
            </ResourceDictionary>
     </ContentPage.Resources>
    
  3. Let’s continue by adding the CarouselView and the IndicatorView with the following code.
    <!-- Talent image Carousel-->
    <CarouselView Grid.Row="0" ItemsSource="{Binding talents}"
                          IndicatorView="indicatorView">
                    <CarouselView.ItemTemplate>
                        <DataTemplate>
                            <StackLayout>
                                <Image Grid.Row="0" Aspect="AspectFill" Source="{Binding Picture}"/>
                            </StackLayout>
                        </DataTemplate>
                    </CarouselView.ItemTemplate>
                </CarouselView>
    <!-- Talent image IndicatorView-->
    <IndicatorView Grid.Row="1" x:Name="indicatorView" VerticalOptions="Start" TranslationY="-75" 
              IndicatorsShape="Circle"
              IndicatorColor="LightGray"
              SelectedIndicatorColor="DarkGray" />
              
    <!-- You must add here what is explained in the next step -->
    

Step 4: Talent information

Talent informationFinally, we are going to add the Talent information. As the main component, everything will be contained in a frame.

Note: To make the rounded edges stand out a little, we will be using the TranslationY property with negative values.

We immediately create the structure of the layout that will organize the information. In this case, it is a grid divided into four rows and three columns.

Refer to the following code.

<!-- Talent informacion-->
<Frame Grid.Row="1" HasShadow="False" TranslationY="-30" CornerRadius="25" HeightRequest="205">
   <Grid RowDefinitions="Auto,Auto,Auto,Auto" ColumnDefinitions="*,*,*">
          <!-- You must add here what is explained in the next step -->           
   </Grid>
</Frame>

Within this structure, we will add all the following detailed information:

  • Talent Name
  • Heart icon
  • Rating component
  • Location, age, and gender information
  • Invite to casting button

Refer to the following code.

<!--Talent Name-->
<Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Text="Mathilda Lane" FontAttributes="Bold" FontSize="30" Padding="0,15,0,0"/>
<!--Heart icon-->
<Image Grid.Row="0" Grid.Column="2" HorizontalOptions="End" Margin="0,15,10,0" Aspect="Fill" WidthRequest="35" HeightRequest="35" Source="Heart"/>
<!--Rating component--> 
<rating:SfRating Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" ItemCount="5" Value="4" ReadOnly="true" ItemSize="17" ItemSpacing="2" />
<Label Grid.Row="1" Grid.Column="0" Text="72" FontAttributes="Bold" TextColor="Silver" FontSize="16" HorizontalOptions="End" TranslationX="16" />
<!--Location information-->
<Label Grid.Row="2" Grid.Column="0" Padding="0,10,0,0" FontAttributes="Bold" HorizontalOptions="Start">
       <Label.FormattedText>
             <FormattedString>
                 <Span Text="Location 
" TextColor="Silver"/>
                 <Span Text="Riga, Latvia" TextColor="#393e42"/>
             </FormattedString>
       </Label.FormattedText>
</Label>
<Line  Grid.Row="2" Grid.Column="0" HorizontalOptions="End"  Y1="50" Margin="5" StrokeThickness="0.5" Stroke="Silver"/>
<!--Age information-->
<Label Grid.Row="2" Grid.Column="1" Padding="5,10,0,0" FontAttributes="Bold" HorizontalOptions="Center">
       <Label.FormattedText>
           <FormattedString>
              <Span Text="Age 
" TextColor="Silver"/>
             <Span Text="29 years" TextColor="#393e42"/>
           </FormattedString>
       </Label.FormattedText>
</Label>
<Line  Grid.Row="2" Grid.Column="1" HorizontalOptions="End"  Y1="50" Margin="5" StrokeThickness="0.5" Stroke="Silver"/>
<!--Gender information-->
<Label Grid.Row="2" Grid.Column="2" Padding="5,10,0,0" FontAttributes="Bold" HorizontalOptions="Center">
       <Label.FormattedText>
             <FormattedString>
                 <Span Text="Gender 
" TextColor="Silver"/>
                 <Span Text="Female" TextColor="#393e42"/>
             </FormattedString>
       </Label.FormattedText>
</Label>
<!-- Invite to casting button-->
<Button Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" Text="Invite to casting" FontSize="18" HeightRequest="50" TextColor="White" FontAttributes="Bold" CornerRadius="20" BackgroundColor="#ef5360"/>

We finally have our second screen ready!
Designing the TalentDetails page

Reference

To see the complete code structure, please refer to this Github repository.

Conclusion

Thanks for reading! In this blog post, we have seen how to replicate a talent-casting UI in Xamarin.Forms. Let’s practice these steps and build our own UI!

Syncfusion’s Xamarin suite offers over 150 UI controls, from basic editors to powerful, advanced controls like DataGrid, Charts, ListView, and RTE. Try them out and leave your comments below.

You can also contact us through our support forumDirect-Trac, or feedback portal. We are always happy to assist you!

If you liked this post, we think you will also like the following articles:

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top