Xamarin Lab 2 – Getting comfortable with XAML
This lab will help you get more comfortable with common tasks when designing the front end or user
interface for a Xamarin application. You will be expected to build an application that meets the below
requirements. Step by step instructions will be provided on how to set some pieces of the lab, others
you will have to refer to the cheat sheet, Xamarin documentation, online resources, or your notes to
complete. Another point of this project is to get you ready for your final project in the class. This lab is
less about logic and more about understanding XAML markup.
This lab will require you to have 3 CONTENT PAGES in your shared code project. Your goal will be to
have your screen look as close as possible to the specified layouts below. You can use your own images,
colors, and text to customize the application, HOWEVER, the size of the image, fonts, and sections of the
page (pay close attention to margin and padding) should match the example images as closely as
possible for full points. This lab will require you to tweak visuals and re-run your application several
times to achieve a close resemblance to what is provided. The basic point of this application would be
something similar to rotten tomatoes or IMDB where various movies and information about them can
be found.
Tools you will need to complete this lab:
1. StackLayouts, remember these can be nested and can be oriented horizontally or vertically to stack
elements.
2. ScrollViews, these allow certain elements to be scrolled up, down, left, and right. StackLayouts can
be placed inside of these to setup scrolling.
3. Labels, Images, and buttons – all of these are covered in the cheat sheet.
4. ListView, this is a special view for listing items, the code required to set this up will be partially
provided.
5. Margin and Padding attributes, read up about how to use them here:
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/margin-and-padding
6. Font sizes, BackgroundColor, and TextColor attributes
7. Grid Layouts (we will do some of this in class together)
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/grid
Lab checklist for max points:
1. MainPage with the following visual elements organized by stack or grid layout (or both):
a. Logo image (create your own or use something off the web)
b. User label
c. Password label
d. User entry
e. Password entry
f. Login button that takes you to the MovieListPage
g. custom background color or image for the page (NOT your logo)
h. Your logo should be most of the screen
i. Your labels should be directly beside your entry views and nothing should be cut off
2. MovieListPage with the following visual elements organized by stack layouts (you will need a
horizontal and a vertical)
a. At least 5 horizontally scrolling images (use a scrollview) to represent your favorite movies
(the scrolling movies should take up about half the screen)
b. A label for synopsis and quotes heading
c. Another scrollview with a label inside for the information about the movie selected. Don’t
worry about the c# programming required for this but you MUST give the label a valid x:Name
attribute in the xaml(set it as “MovieDescriptionLabel” so you can access the label in the code
behind to set the description later.
d. A button at the bottom of the page that when clicked takes you to the CastView page
e. Change the background color of at least one element on the page
f. Change the text color of at least one element on the page
3. CastPage with the following visual elements organized by a stackLayout
a. A single ListView should be present inside the stacklayout with the x:Name attribute set to
“CastListView”
b. Your listview should be populated in code with a string array of cast members from your
favorite move.
Instructions:
NOTE: You should be using Visual Studio 2019 for all Xamarin projects.
WARNING: Do not include ANY spaces, slashes, dashes, dots, etc in the project name or in any file
names, you will run into problems compiling and will have to recreate your project, keep it simple and
always smash words together using camel casing.
WARNING: Image files should be stored in the Resources->drawable folder of the Android project, if
you experience issues placing files there review the Xamarin one section in blackboard for tips to
resolve this. Also remember image files MUST ONLY CONTAIN LOWER CASE LETTERS, even the
extension must be lower case!
PART ONE – SETTING UP NAVIGATION AND PAGES
1. Create a new Xamarin.Forms project, remember you can search “mobile” in the search field to find
this project type. Include IOS and Android project types. Name the project XamLab2.
2. Remember aside from placing images in your project all work should take place in the shared project
that has the c# icon
3. Start off by adding in your required 2 additional content pages by right clicking on the c# project,
clicking “Add”, then clicking “New Item” (NOTE WE ARE NOT CLICKING NEW CLASS)
4. Make sure you select the Content Page with the <[]> icon as seen in this screenshot – if you can’t see
it select Xamarin.Forms in the left side of the window.
5. Name the first page MovieListPage (NO SPACES!!!) and click Add.
6. Repeat steps 3 through 5 to add the second new page, name that page CastPage.
7. In order to facilitate proper navigation you must always perform the following with a new Xamarin
project, open the App.xaml.cs (code behind, c#) file. You should see a constructor named App().
8. Change the code for that constructor to match this:
This allows us to use the navigation to pop and push pages onto the navigation stack, meaning we can
easily open and close pages.
9. Next we will setup basic navigation for the app, it will be your responsibility to follow the cheat sheet
to ensure your buttons are correctly setup to call this method. Remember each button should have a
“Clicked” attribute that points to the name of the method you want to fire when that button is clicked.
Add this code to your MainPage.xaml.cs code behind file (this is a method so it must be created inside
the class {} but NOT inside any other method or constructor):
10. Now we will add the code to move from your MovieListPage to the CastPage again using a method.
In the MovieListPAge.xaml.cs code behind file add the following code (same thing here, this is a method
treat it as such and place it inside the class {})
11. [STOP] You should have no red error markings in any file at this point, check all 3 content pages to
ensure this is the case. If you do, stop and diagnose the errors. Most errors will come from not
following the above directions about where to properly place the methods.
PART TWO – BUILDING LAYOUTS AND THE UI
12. Next we will put together some front end code, I will not provide step by step instructions for this
but instead visuals that you should attempt to match up to, each visual is accompanied by a wireframe
that lays out elements. The wireframe will help break down how the different layouts might be used to
achieve the visuals needed, this will take time and effort to get right. Below are some completed pics
that should also help, make sure to review the checklist for max points and be sure to complete PART
THREE where you wire up your methods to your buttons and setup a few programming items that can
happen only after the front end is complete.
*We are not actually writing the code to check a username and password at this point, just building the
visuals to support it, the only functional aspect of this page is the login button that when pressed should
take you to the MovieListPage.
*On this page it is OK to assign only one movie’s synopsis for the info section. You are not required to
setup text for multiple movies, the point is to understand you could change this label to text related to
each movie fairly simply by adding a gesture handler just like we did in the Halloween app to each
image. Your synopsis should scroll to be fully readable.
*When you first setup your ListView you will not have data to fill it yet, we add that in the next few
steps.
PART THREE – FINAL TOUCHES
13. Wire up your buttons to the correct methods to navigate to the next page on both your
MainPage.xaml and your MovieListPage.xaml pages, remember you need to add a Clicked attribute to
your button tag and assign the name of the method to call in your code behind file. If you are stuck on
this review the cheat sheet and lecture videos.
14. To get your CastPage to display items in the ListView you need to set the ItemSource property to
the list of contents you want to display in the ListView. This can be done in 2 different ways, you can
define the list in the xaml file or you can setup the list in the CastPage codebehind file,
CastPage.xaml.cs.
Here is a link to both examples
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/listview/data-and?databinding
The much more likely scenario is you will need to do this in code for a real application, this is because
listview data typically is pulled from a source of information that may change or be updated, such as a
list of products, videos, or people. To set this in code you must also setup a x:name attribute on the
ListView in your xaml file. Set the name like so in the xaml file:
Now you should be able to refer to the list view by NAME in your code behind file, which you can use to
assign an array of strings to the list view (remember, this is in the code behind file)
:
15. If you search IMDB or google you can find the cast for your favorite movie, add enough people in to
enable your list to scroll.
16. Some items do not have explicit instructions – it is up to you to review the checklist to maximize
points on the lab.
17. Test your app, check for crashes, navigate all pages and test all areas that should scroll before
submission.
18. When complete you must zip your entire solution and submit it via blackboard – note these
submissions are much larger than console apps and may take some time to upload.