Xamarin Community Toolkit - Featured Views

Introduction

In this post, we are going to see the featured views available in Xamarin Community Toolkit and how to use them. This post is a part of Xamarin Community Toolkit - Tutorial Series visit the post to know about the Xamarin Community Toolkit. The Xamarin Community Toolkit is a collection of reusable elements for mobile development with Xamarin.Forms, including animations, behaviors, converters, effects, and helpers. It simplifies and demonstrates common developer tasks when building iOS, Android, macOS, WPF, and Universal Windows Platform (UWP) apps using Xamarin.Forms.

Coding Part

Steps

1. Creating new Xamarin.Forms Projects.
2. Setting up the Xamarin Community Toolkit in Xamarin.Forms .Net Standard Project.
3. Implementation of Xamarin Community featured views.

Step 1: Creating a new Xamarin.Forms Projects

Create New Project by Selecting New Project -> Select Xamarin Cross Platform App and Click OK.

Note
Xamarin.Forms version should be greater than 5.0.

Then Select Android and iOS Platforms as shown below with Code Sharing Strategy as PCL or .Net Standard and Click OK.

Step 2: Setting up the scanner in Xamarin.Forms .Net Standard Project

In this step, we will see how to setup the plugin.

• Open the Nuget Manager in the Visual Studio Solution by right clicking the solution and select “Manage Nuget Packages”.
  
• Then select “Xamarin Community Toolkit” and check all the projects in the solution, install the plugin
  

Step 3: Implementation of Xamarin Community featured views.

In this step, we will see how to implement the XCT featured views in XAML. We have explained the usage with Avatar View and Expander View

Open your XAML design file and add the following namespace to utilise the views on the screen.

xmlns:xct="http://xamarin.com/schemas/2020/toolkit"

AvatarView

The AvatarView control allows the user to display an avatar or the user's initials if no avatar is available. By binding the Source property the user can assign an image to the AvatarView. Simultaneously binding the Text property will allow the user to also set the initials to be shown if no valid image is provided. It can be used like the below code part.

<xct:AvatarView Text="M" Source="https://www.c-sharpcorner.com/UploadFile/AuthorImage/553bbc20200726035629.jpg" HorizontalOptions="Center"/>

ExpanderView

The Xamarin.CommunityToolkit Expander control provides an expandable container to host any content. The control has a header and content, and the content is shown or hidden by tapping the Expander header. When only the Expander header is shown, the Expander is collapsed. When the Expander content is visible the Expander is expanded. To know more about this control, click here.

<xct:Expander >
    <xct:Expander.Header>
        <Grid Padding="10">
            <Label Text="Xamarin Community Toolkit - Views"
           FontSize="16" />
            <Image Source="expand.png"
                   WidthRequest="16"
                   HorizontalOptions="End"
                   VerticalOptions="Center">
                <Image.Triggers>
                    <DataTrigger TargetType="Image"
                         Binding="{Binding Source={RelativeSource AncestorType={x:Type xct:Expander}}, Path=IsExpanded}"
                         Value="True">
                        <Setter Property="Rotation"
                        Value="180" />
                    </DataTrigger>
                </Image.Triggers>
            </Image>
        </Grid>
    </xct:Expander.Header>
    <xct:Expander.ContentTemplate>
        <DataTemplate>
            <Grid Padding="10"
                  HorizontalOptions="FillAndExpand"
                  VerticalOptions="FillAndExpand">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Image Source="https://tinyurl.com/4pp4mn7e"
                       HeightRequest="45"
                       Aspect="Fill"/>
                <Label Grid.Column="1"
                       VerticalOptions="FillAndExpand"
                       Text="The Xamarin Community Toolkit is a collection of reusable elements for mobile development with Xamarin.Forms, including animations, behaviors, converters, effects, and helpers. It simplifies and demonstrates common developer tasks when building iOS, Android, macOS, WPF and Universal Windows Platform (UWP) apps using Xamarin.Forms."
               FontAttributes="Italic" />
            </Grid>
        </DataTemplate>
    </xct:Expander.ContentTemplate>
</xct:Expander>