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>

UniformGrid

The UniformGrid is like the Grid, with the possibility of multiple rows and columns, but with one important difference: all rows and columns have the same size. That size is determined by the largest width and height of all the child elements. The child element with the largest width does not necessarily have to be the child element with the largest height. Use the UniformGrid when you need the Grid behavior without the need to specify different sizes for the rows and columns.

<xct:UniformGrid>
    <BoxView Color="Red" />
    <BoxView Color="Yellow" />
    <BoxView Color="Orange" />
    <BoxView Color="Purple" />
    <BoxView Color="Blue" />
    <BoxView Color="Green" />
    <BoxView Color="LightGreen" />
    <BoxView Color="Gray" />
    <BoxView Color="Pink" />
</xct:UniformGrid>

Here, I have listed the few views featured in the XCT plugin and the below controls are available with XCT,

1. AvatarView
2. BadgeView
3. CameraView
4. DockLayout
5. Expander
6. LazyView
7. MediaElement
8. Popup
9. RangeSlider
10. Shield
11. StateLayout
12. TabView
13. UniformGrid

Full Code

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="XamarinCommunityToolkit.MainPage">

    <StackLayout Spacing="0">
        <Frame BackgroundColor="#2196F3" Padding="24" CornerRadius="0">
            <Label Text="Xamarin Community Toolkit Tutorial Series!" HorizontalTextAlignment="Center" TextColor="White" FontSize="36"/>
        </Frame>

        <Label Text="Avatar View"
               FontSize="16"
               Padding="10"
               FontAttributes="Bold"/>

        <xct:AvatarView Text="M" Source="https://www.c-sharpcorner.com/UploadFile/AuthorImage/553bbc20200726035629.jpg" 
                        HorizontalOptions="Center"/>
        <Label Text="Expander View"
               FontSize="16"
               Padding="10"
               FontAttributes="Bold"/>
        
        <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>
        
        <Label Text="Uniform Grid"
               FontSize="16"
               Padding="10"
               FontAttributes="Bold"/>
        
        <xct:UniformGrid>
            <BoxView Color="Red" />
            <BoxView Color="Yellow" />
            <BoxView Color="Orange" />
            <BoxView Color="Purple" />
            <BoxView Color="Blue" />
            <BoxView Color="Green" />
            <BoxView Color="LightGreen" />
            <BoxView Color="Gray" />
            <BoxView Color="Pink" />
        </xct:UniformGrid>
    </StackLayout>

</ContentPage>

Demo

Download Code

GitHub. If you have doubt, feel free to post a comment. If you like this article and is useful to you, do like, share the article & star the repository on GitHub.