All code can be found in my Github repository.

In this post, ill make a simple contact us page that will be rendered on both platforms iOS and Android. In this page we will have two sections, the first section will be social media icons that are tappable to get redirected and the second section is a contact us form to be filled out and sent via email.
Note: we will handle the UI part only for the contact us form, we won’t cover the backend handling for now.

Building UI using XAML

In the Pages folder, add a new Forms content page Xaml and name it ContactUsPage, then you may write down the following XAML to draw a cross-platform contact us page.

<?xml version=1.0 encoding=UTF-8?>
<ContentPage xmlns=http://xamarin.com/schemas/2014/forms xmlns:x=http://schemas.microsoft.com/winfx/2009/xaml x:Class=PuzzlersJordan.ContactUsPage Title=Contact us>
    <ContentPage.Content>
        <ScrollView>
            <StackLayout Orientation=Vertical Padding=20 Spacing=10>
                <!–Social Media section–>
                <StackLayout Orientation=Horizontal HorizontalOptions=CenterAndExpand Spacing=10>
                    <Button BorderRadius=25 HeightRequest=50 WidthRequest=50 BackgroundColor=#3b5998 Clicked=facebook_clicked Image=Facebook_icon>
                    </Button>
                    <Button BorderRadius=25 HeightRequest=50 WidthRequest=50 BackgroundColor=#1da1f2 Clicked=twitter_clicked Image=Twitter_icon>
                    </Button>
                    <Button BorderRadius=25 HeightRequest=50 WidthRequest=50 BackgroundColor=#cd201f Clicked=youtube_clicked Image=Youtube_icon>
                    </Button>
                    <Button BorderRadius=25 HeightRequest=50 WidthRequest=50 BackgroundColor=Gray Clicked=phone_clicked Image=Phone_icon>
                    </Button>
                </StackLayout>
                <StackLayout Orientation=Horizontal HorizontalOptions=CenterAndExpand >
                    <BoxView HeightRequest=0.5 VerticalOptions=CenterAndExpand HorizontalOptions=FillAndExpand BackgroundColor=Black />
                    <Label Text=Or>
                    </Label>
                    <BoxView HeightRequest=0.5 VerticalOptions=CenterAndExpand HorizontalOptions=FillAndExpand BackgroundColor=Black />
                </StackLayout>
                <!–Contact us section–>
                <Label Text=Name x:Name=NameLabel >
                </Label>
                <Entry Placeholder=John Smith>
                </Entry>
                <Label Text=Email>
                </Label>
                <Entry Placeholder=email@domain.com Keyboard=Email>
                </Entry>
                <Label Text=Phone>
                </Label>
                <Entry Placeholder=(123) 456-7890 Keyboard=Telephone>
                </Entry>
                <Label Text=Message>
                </Label>
                <Editor HeightRequest=90>
                </Editor>
                <Button HorizontalOptions=FillAndExpand Text=Send>
                </Button>
            </StackLayout>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>

From the above code, I’ll talk about each section separately.

Section 1: Social media icons

In order to make sure all contents fit on the page, we shall add them inside a scroll view.
So the first section will reside in a stack layout, oriented in a horizontal way so icons can look in a row starting from the centre.
To make them tappable we have added them as buttons with an image property assigned to each one.
Note: adding images is already covered in this link.

Adding more properties like BorderRadius will add a sense of user of experience to our UI that will make them look better as shown below:

Note: in case you’re wondering why icons on Android don’t have rounded corners check this StackOverflow link.
Quick tip, each button has its own handler from code behind as shown below:

        public void facebook_clicked(object sender, EventArgs e)
        {
            Device.OpenUri(new Uri(Constants.FacebookUrl));
        }
        public void youtube_clicked(object sender, EventArgs e)
        {
            Device.OpenUri(new Uri(Constants.YoutubeUrl));
        }
        public void twitter_clicked(object sender, EventArgs e)
        {
            Device.OpenUri(new Uri(Constants.TwitterUrl));
        }
        public void phone_clicked(object sender, EventArgs e)
        {
            Device.OpenUri(new Uri(tel:+962799892728));
        }

Section 2: Contact Us form

Another Stack layout but this time we leave defaulted it to a vertical orientation which will contain a list of controls of kind Label, Entry, Button and Editor.
Each of these controls has its own properties and it looks like this:

Now, notice that the editor in the iOS platform doesn’t look like a real native iOS editor (Maybe because it doesn’t have borders nor rounded corners).
In the next part ill talk about how to fix this issue using Customer Renderers.

2 thoughts on “Contact us page – Part 4a

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s