Xamarin Guide 4: Create the SessionDetailsView

Scope

This Xamarin Workshop Guide was created for The Portuguese National Meeting of IT Students (ENEI) by Sara Silva with the original content available here. With the goal to extend it to the global community, it was published in a new project called Xam Community Workshop that the main goal is for any developer or user group to be able to customize it to their events.

Before reading this article you must read:

Guide 4. Create the SessionDetailsView

In the last step, you created the menu for each Session and it created the “Details” option that has the goal to show the details from a selected session.

Let's create the SessionDetailsView!

Create a new XAML page, like you did to create the SessionsView page. Then open the SessionDetailsView and you should have something as in the following:

<?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="ENEI.SessionsApp.Views.SessionDetailsView">
</ContentPage>

Then create the content, as in the following:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="ENEI.SessionsApp.View.SessionDetailsView" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" BackgroundColor="White" Icon="ic_action_users.png">
<StackLayout BackgroundColor="White" Spacing="20">
<StackLayout Orientation="Horizontal" Padding="20,10,0,0">
<StackLayout.IsVisible>
<OnPlatform Android="false" WinPhone="true" iOS="false” x:TypeArguments="x:Boolean" />
</StackLayout.IsVisible>
<Image WidthRequest="48" HeightRequest="38" Source="Images/ic_action_users.png"/>
<Label FontSize="Large" FontAttributes="Bold" Text="{Binding Name}" TextColor="Black"/>
</StackLayout>
<StackLayout Orientation="Horizontal" Padding="20,20,20,0" Spacing="20">
<Image HorizontalOptions="Start" Source="{Binding Speaker.ImageUrl}" VerticalOptions="Start">
<Image.WidthRequest>
<OnPlatform Android="50" WinPhone="200" iOS="50" x:TypeArguments="x:Double" />
</Image.WidthRequest>
<Image.HeightRequest>
<OnPlatform Android="50" WinPhone="200" iOS="50" x:TypeArguments="x:Double" />
</Image.HeightRequest>
</Image>
<StackLayout HorizontalOptions="Start" Padding="10,0,0,0">
<Label Font="Large" HorizontalOptions="Start" LineBreakMode="WordWrap" Text=" {Binding Speaker.Name}" TextColor="Black" />
<Label Font="Small" HorizontalOptions="Start" LineBreakMode="TailTruncation" Text="{Binding Date}" TextColor="Black" />
</StackLayout>
</StackLayout>
<ScrollView VerticalOptions="FillAndExpand" Padding="20,20,20,0">
<Label Font="Medium" HorizontalOptions="Start" LineBreakMode="WordWrap" Text="{Binding Description}" TextColor="Black" />
</ScrollView>
</StackLayout>
</ContentPage>

And in the code behind define the BindingContext and the Title, as in the following:

public partial class SessionDetailsView : ContentPage
{
private readonly Session _session;
public SessionDetailsView(Session session)
{
_session = session;
InitializeComponent();
Title = session.Name;
BindingContext = session;
}
}

This page will have the BindingContext defined with the session object, but could be the page as in SessionsView.

The Details gesture

Now that you have the new page created, you need to connect both of the pages and it is possible through the “Detail” option for each session in ListView. This way, in the SessionsView we need to use the details gesture to navigate from the SessionsView to the SessionDetailsView, sending the selected session. The implementation can be something as in the following:

private void DetailsGesture_OnTapped(object sender, EventArgs e)
{
var tappedEventArg = e as TappedEventArgs;
if (tappedEventArg != null)
{
var session = tappedEventArg.Parameter as Session;
if (session != null)
{
Navigation.PushAsync(new SessionDetailsView(session), true);
}
}
}

Running the application

At this moment, you should navigate to the Session details view that the result should be as described in the following figure.

The navigation from SessionDetailsView is made using the back button provided in iOS and Android pages and by the physical back button from Windows Phone that does not require implementation.

7 Comments

Join the conversation! Your thoughts help the community grow.

Davronbek Umirov10y ago
Thanks for article...
Karthik Muthu Karuppan11y ago
Good
Nitin11y ago
Thanks for sharing
Abhishek Jaiswal11y ago
nice series.. new learning! :)
Santhakumar Munuswamy11y ago
Thanks for nice article
Sibeesh Venu11y ago
good one.
Upendra Pratap Shahi11y ago
nice article..