Image Cell In Xamarin.Forms Application For Android And UWP

ImageCell objects are used to place images and accompanying text into a table. Reading this article, you will learn how to use Image Cells with Table View in Xamarin Forms application for Android and Universal Windows Platform with XAML and Visual C#, in cross platform application development.

The following important tools are required for developing UWP.

1. Windows 10 (Recommended)
2. Visual Studio 2017 RC Community/Enterprise/Professional Edition (It is a Free trial software available online).
   
3. Using Visual studio 2017 Installer, Enable the feature of Mobile development with .NET.

Now, we can discuss step by step app development.

Step 1

Open Visual Studio 2017 RC. Go to Start -> New Project-> Cross-Platform (under Visual C#->Cross Platform App) -> Give suitable name for your App (XamFormImgCell) -> OK.



Step 2

Select the cross-platform template as Blank App >> Set UI Technology as Forms and Sharing as PCL and afterwards, Visual Studio creates 4 projects (Portable, Droid, iOS, UWP) and displays Getting Started.XamarinPage.



Step 3

Add images to XamFormImgCell_Droid project in Resources-> Drawable folder and XamFormImgCell_UWP project.

Step 4

In MainPage.Xaml page, add Label, and ImageCells in TableView.

<StackLayout>
    <Label Text="Xamarin Form Image Cell View in Android and UWP" VerticalOptions="Center" HorizontalOptions="Center" />
    <TableView Intent="Form">
        <TableRoot>
            <TableSection Title="Animals">
                <ImageCell ImageSource="Tiger.jpg" Text="Tiger" Detail="The tiger is the largest cat species, most recognisable for their pattern of dark vertical stripes on reddish-orange fur with a lighter underside." />
                <ImageCell ImageSource="Lion.jpg" Text="Lion" Detail="The lion is one of the big cats in the genus Panthera and a member of the family Felidae. The commonly used term African lion collectively denotes the several subspecies in Africa." />
                <ImageCell ImageSource="Elephant.jpg" Text="Elephant" Detail="Elephants are large mammals of the family Elephantidae and the order Proboscidea. Two species are traditionally recognised, the African elephant and the Asian elephant." /> </TableSection>
        </TableRoot>
    </TableView>
</StackLayout>

Step 5

We will test Android and UWP. So, we can set the multiple Startup Projects as XamFormImgCell.Droid and XamFormImgCell.UWP (Universal Windows).



Step 6

Change the "Configuration Manager " settings. Go to Build -> Configuration Manager, uncheck the "Build" and "Deploy" options for iOS and check them for Droid and UWP,



Step 7

Deploy your app to Android Emulator and Local Machine (UWP). The output of the XamFormImgCell app is shown below.



Summary

Now, you have successfully tested Image Cells in Xamarin.Forms application for cross-platform application development, using Visual C# and Xamarin.