Xamarin留学生代做、XAML编程语言代做、代写XAML、代写C#程序

日期：2019-11-03 01:21

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.