Layout Surface Project

From IPRE Wiki
Revision as of 18:16, 5 April 2010 by Ashgavs (Talk | contribs) (Screen Captures)

Jump to: navigation, search

Overview of the Layout Editor

What It Is The layout editor is intended to serve as a mock up device to those who are working on projects like magazines and books. However, it can double as an app that is used for general mock up as well (interior design, web design, etc.) Users are able to take photographs or texts, represented by tags in the physical world, and import them to their mock up by simply swiping them along the Microsoft Surface. In theory, a large database will house these tags but for demoing purposes they are hard coded in. When an image or text has been imported into the layout editor, the user can manipulate them as if they were real objects (slide them, rotate them, scale them etc.) all with their hands. The user can also delete said objects, or lock them into place once they are satisfied with their placement. In the final version of this app, multiple pages will be supported, as well as a text editor.

How It Works The main functionality of the layout editor is from the use of a ScatterView and ScatterViewItems. Each new text or picture placed onto a user's mock-up is a ScatterViewIem that is added to the ScatterView. ScatterViewItems are able to be moved and scaled, which allows the layout to be much more dynamic. You are also able to add event handlers to a ScatterViewItem, therefore when the user can interact with the items through holding the item, or double tapping it. Different gestures can call different functions that are linked through event handlers.

Screen Captures

File:Website.png | File:Website2.png

What We've Learned

XAML We learned that using the XAML we could create objects, such as scatter views, that directly link to our c# code, and even connect to specific functions, such as clearing all items. However, we also learned that you cannot reference items in the XAML that are dynamically created (e.g. scatter view items). For these we had to use event handlers defined in the C#. In addition to learning about objects created in XAML code, we learned about general interface design using XAML. For example, we learned how to create buttons, backgrounds, grids, etc. and how to connect these static items to our C# code.

Event Handlers Event handlers connect a user's interactions with the interface to specific functions. For example, when you touch and hold a ScatterViewItem, the Eventhandler will call a specific function related to that event (e.g. in our code holding a gesture will call a function called holdGesture). Eventhandlers pass 2 parameters into these functions, a sender (the object touched), and event arguments (information about the thing touching that object). An example of this would be a scatter view item and a finger. The sender is always sent as an object of the C# object class. This can be cast as the more specific and likely desired object with in the function itself. We primarily work with the sender in our code, and do little with the arguments.

ScatterViewItem We learned a lot about the ScatterViewItem class throughout this project. We learned most of its properties and methods, that it must be saved in a scatter view, but most importantly, that they are most useful when dynamically created, and thus cannot be manipulated in the XAML code. We have experimented with position, orientation, size, color, content, and are planning to write our own subclasses of scatterviewitems that correspond to the main uses of our project (text, captions, and images). These subclasses will contain their own properties and methods specific to our program.