Changes
Status / Basic Design-
Currently the skin starts with a home/start screen the following is basic workflow navigation for the loading of the home screen.
When MP2 starts with the Metro skin enabled the first screen to load from the workflow state is the Home.xaml screen. This screen is a resource that has the masterhome.xaml as its main screen which acts as a background template. The basic idea is that masterhome.xaml
is a 3x3 grid with the content residing in the middle at grid.column=”1” and grid.row=”1” similar to the grid below purple = master_home.xaml and blue=Home.xaml.
The tiles are derived from the MenuModel class of the skin base. The Home.xaml contains a ListView with the menuitems from MenuModel added to a new itemslist via a copyto method. The logic behind this is to be able to manipulate the already populated list of
installed plugins by either adding custom URI’s as is the case for the image url’s of the tiles or you could remove an item from the list that doesn’t “fit” the metro ui design. For instance my idea would be to eliminate the settings
plugin from the list and add to a custom slide out panel from the right (like windows 8) that has a navigation link back to the home screen and also a link to push down the settings screen.
Once the home screen is loaded with all the tiles each tile is basically a button with an image that has its binding to the url added in the previous step. Also brought over from the copyto method is each button has a command that pushes a new workflow state.
Once a tile is clicked the sequence is as follows:
On Tile click new workflow state is loaded from the tile command. For example let’s reference the weather plugin. Once the weather tile is clicked the workflow state for the weather plugin is loaded and pushed down. Per the workflow state designated in
the weather plugin the first loaded screen is Weather.xaml. Very similar to our home screen this screen Weather.xaml is a resource that has the mastermenu.xaml as its background screen/resource which in turn has mastersubmenu.xaml as its background
screen. This is how all plugins are and should be designed to load the mastermenu.xaml as their master screen. The master submenu.xaml is setup identically to the master_home.xaml except instead of having a ListView with the menu it has the contents
from the plugin screen (ie the Weather.xaml screen in our example). Also included in grid.column=”2” and grid.row=”0” is a expander button and custom listview with the submenu items that are available for that plugin. The ListView only
displays on button click and hides when clicked again. The thought is that the whole screen get reserved to display the plugin content and options are only loaded when needed this is the same premise windows 8 uses.
Improvements / Further Work –
Live Tiles - Add ability to have live tiles instead of just images. Example change from just image to the following scenario:
Panel with Image binding to URI and add default image
Or
Content from plugins that get updated via messaging (not sure best way to implement)
Home Screen - Modify home screen to have the following:
User login to master_home grid layout in grid.column=”2” grid.row=”0”
Scrollable screen to handle when more plugins are installed then will fit in panel area
(see windows 8 demos to look at start screen or follow zune ui design)
Don’t want to just add another screen try to get away from loading of screens and have more flexible home screen to show the most content without being obtrusive.
Add animation when clicking on tile that fades and rotates out the masterhome screen and loads in the new mastermenu and master_submenu
Side Menu – Add side menu with the following:
Button to link back to home screen (need to research how to tie command to pushing workflow transition state in codebehind).
Button to link to custom settings screen
Plugins - Backgounds Example add animated background to weather plugin. For example have animated clouds, rain, fog, sun, and snow depending on weather forecast retrieved from plugin.
Custom Plugins - Design to make Metro experience better Outside this project possibly but still wanted to document ideas.
New News Feeder - Images and feeds
New Book Reader - Download view books from kindle amazon etc.. with page flips book shelf showing all books
Movies - List of movies to watch (Possibly import Moving pictures)
TV- List of TV shows either recorded (Possibly import MP-TVSeries), Live (slimtv), online, etc…
General -
Modify all default buttons to new metro style (still to be designed)
Keep plugins active allow for easy transition of open plugins - View Windows 8 demo to see flipping through open apps
Add ability to have side by side open plugins again view windows 8 demo for example