Xamarin Community Toolkit - Featured Views

Introduction

In this post, we are going 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 and visit the post for 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. Step 1: Creating new Xamarin.Forms Projects.
2. Step 2: Setting up the Xamarin Community Toolkit in Xamarin.Forms .Net Standard Project.
3. Step 3: Implementation of Xamarin Community featured views.

Step 1: Creating 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 Xamarin Community Toolkit 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 click 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 expalined the usage with Avatar View and Expander View

• Open your XAML design file and add the following namespace to utilise the views in 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 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:

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