One of the major challenges while designing a mobile application is that size of the mobile screen is very small compared to the regular screen size of the laptops or desktops. So it becomes really tedious in terms of the design even though most of the smart phones today have the scroll feature. Particularly when we want to design a page with many options, the page gets really crammed up with buttons. So what do we do? Recollect the concept of frames in a website. By frames what is I mean is that frames allow the designer to present multiple documents in a single interface.
While I was designing my windows phone 7 app, my main aim was user friendliness. It is very tedious for the user to navigate to different pages every by clicking numerous buttons. It doesn’t present a single interface for all the functions. For an end user it is not comfortable as it involves too much of navigation, interface keeps changing, No centralization etc. So when I decided to do something about this, as everyone does I googled my query with different tags. I ended up seeing something about Pivot and panorama controls which was also there in the offline training kit. Well I did find it interesting but at the same time, I thought of doing some experimentation. So here i provide my approach to the problem without using any of the pivot or panorama controls.
I started recollecting what grids were (Equivalently the canvas and stack panels). I recollected there is a property called height of a grid. What if I can make that height zero and resize it whenever I want to. So if I have multiple grids and make one appear at a time and at the same time make others not appear (make their height 0), it would solve the problem. Indeed, this approach did work. You can also use the same approach with width of the grid.
The first step is to categorize the options you have. The second step is to decide how you want the interface to be. Next step is the design an interface. I designed the page as follows. On the top section of the page, I had buttons denoting the categories and bottom of the page I had an area to display the associated items for that category like textbox, buttons etc.
When I click category one, the set of associated items should appear in the display area. Now how exactly do you achieve this is the next question. To do this first create different grids for different categories with each grid encapsulating the items belonging to that particular category. Let’s say for the sake example that the names of the grids are grid1,grid2,grid3 and so on for category1, category2, category3 etc. respectively. Now these grids are placed in the display area inside the main content panel. Under each grid encapsulate those items belonging to that category. Say for example, if category1 has 6 buttons and one textbox, then those items are to be placed under grid1. Now in the XAML code note the height or width of that grid and then make the height or width of the grid1 zero. Now repeat this procedure for all the grids so that you have a customized grid for each category. Please note that during design you won’t be able to see what you have done with previous grids(you can see only the present grid you are working with) as you have made the heights of those grids 0. You can view them by making the height of the present grid (the one you are working with) as zero and assign the height of the grid to that value, you have made note of earlier.
Coming to the coding part of it I am going to demonstrate using C# though this concept can be applied to VB also. In main constructor (Where the function initialize component is invoked) below the InitializeComponent() function give the following code.
grid1.Height = 0;
grid2.Height = 0;
grid2.Height = 0;
grid2.Height = 0;
grid2.Height = 0;
grid2.Height = 0;
You can also create an event handler when the page loads and give the above code there. This code is to make sure that all the grids are at zero height or in other words no category is displayed when the user enters the page. This is not mandatory and can vary depending on how you want the user to see the interface when he enters the page, the logic etc.
The next step is the event handlers when the category buttons are clicked. While placing the components, note the size of the grids which is according to your design. Let’s say for example sake that 255 is a height suitable for the design(the one you noted earlier). Create the event handler for click event of Category1 button by double clicking the category1 button in the design view. The following code goes into that:
grid1.Height = 255;
grid2.Height = 0;
grid2.Height = 0;
grid2.Height = 0;
grid2.Height = 0;
grid2.Height = 0;
Similarly for category 2 buttons, in the click event handler the following code goes:
grid1.Height = 0;
grid2.Height = 255;
grid2.Height = 0;
grid2.Height = 0;
grid2.Height = 0;
grid2.Height = 0;
This process is repeated for all the categories.
You can alternatively make the width of the grid also zero. The purpose is to make the other grids vanish and make only one grid appear at a time.
And there it is your own frames page in WP7 with vanishing grids.
Well the advantage with this technique is that it’s very simple to use, many of them are just copy pasting the things that have already been done, easy management, a single UI with multiple options etc. The disadvantage is that while designing if you lose track of what you have been doing it is very difficult to come back to what you have been designing because if you have large categories it is very much difficult as the XAML code becomes big. Apart from this I personally didn’t face any disadvantage.
0 comments:
Post a Comment