UI Design of listboxes in windows phone 7? - windows-phone-7

in a page 4 menus one by one like the below.
APPS
1.sample1
2.sample2
PERSONAL
1.info1
2.info2
Valuble
1.item1
2.item2.
More
1.item1
2.item2
like the above APPS,PERSONAL,Valuble,More these are Headings.in that items are binding from Sqlite DB.
intially there are no items .DB is creating .by click on button in that page navigating to another page here i'm binding categories[APPS,PERSONAL---] to combobox and one textbox is there.in that way i'm adding items to mainpage.
functionalty is ok but i taken four listboxes statically placed in that i'm binding the items.but intially no items while db creation.if whenever adding the PERSONAL item first the first listbox was empty and filling the second listbox.if whenever adding MORE items first ,the above listboxes are empty this is bad design i think.
How to design UI for that...

I would have thought this is is an ideal candidate for the LongList selector control of Windows Phone - similar to the contacts page.
Have a look here http://www.windowsphonegeek.com/articles/wp7-longlistselector-in-depth--part1-visual-structure-and-api
I haven't used it myself but would think that you should be able to use it to get the effect you require.

Related

WP7 Listbox how UI virtualization work

I'm using ListBox which has VirtualizingStackPanel, which is said to support UI virtualizing by default.
However, when I set my listStudent (of type ObservableCollection, and have 5 Students in it) as ItemsSource for my Listbox. Then whenever user scroll to the end, I add another 5 Students to my listStudent (and of course UI is notified). But I see that memory consumed keep increased. There's no different from StackPanel in term of memory
How UI virtualization work? How to keep memory low when adding new item to listStudent?
virtualization means list do not construct the list items which you have not scroll to yet.
so you can put your test code to item's loaded function or used converter code. you can see whether virtualization works
for example
you can bind a converter to student's name prop and you can log it .then you know when the item create indeed
Ensure that you don't modified ListBox ItemsPanel that destroys UI virtualization
Sheldon_Xiao on has pointed out some references on MSDN that helpfully explain UI virtualizartion

Updating Controls from Multiple Pages on Windows Phone

All, I am new to Windows 7 Phone. My situation is that I have a main page which contains a ScrollViewer which in turn houses a StackPanel. I want to populate this StackPanel with multiple sub-StackPanels (at runtime) which are to hold an Image Thumb nail a hyperlink and some basic information about the image.
This is all good when I do this from the main page, but I want to know how to update this control (which is on the main page), but from any page other than the main page. I would like to know what is considered best practice for updating a page's control (like that outlined above) from another page.
Obviously there are a number of ways to pass data between pages
PhoneApplicationService.Current.State["yourparam"] = param
NavigationService.Navigate(new Uri("/view/Page.xaml", UriKind.Relative));
then in other page simply
var k = PhoneApplicationService.Current.State["yourparam"];
and many others. But what is best practice for updating a generic control from a different page?
Note: There are many question about data access and passing between pages.
Passing data from page to page
How to pass the image value in one xaml page to another xaml page in windows phone 7?
Passing image from one page to another windows phone 7
and more. This is not what I am asking.
If I understand your question correctly, you are trying to update a control which is on for example MainPage.xaml from another page for example Page2.xaml.
As far as I know there is no way to reach a pages controls from another page, and that seems unnecessary for the cases that I can think of.
The method used to achieve what you are trying is usually done by triggering an action (like the press of a button ) and passing a parameter to the page you are trying to update the control. And on that page's onnavigatedto event (or viewmodel constructor if you are using the MVVM pattern), update your control based on the passed parameter.
If your update is based on data then the best practice is to bind an observable collection or an object that extends the INotifyPropertyChanged (basically any object that can signal that one of their property changed to the ui) and change the data based on the parameter that is passed.
If these two pages somehow are visible at the same time and there is no navigation needed between them( like a popup or sliding menu kind of ui) then you can make the page that you are showing in the popup a usercontrol, and reach to the parent's controls by this.Parent.
I can be more helpful if you give more specifics about your app's flow.
The MVVM pattern would be a good way to go. Saying MVVM is too complicated for small teams isn't exactly accurate - the purpose of MVVM is to decouple Silverlight or WPF code. Using the codebehind of a Silverlight page to directly access data creates coupling in your code and accrues technical debt. Whether you're one developer or 100, if your UI is coupled with your data classes, if you have to change your data classes, you will have to make changes to every UI element that uses those classes. This takes longer and makes your application more difficult to change.
MVVM makes it so your UI (the View) doesn't know anything about the data (your Model). The ViewModel is the code in between that the UI can bind to, and which manages events in the UI that need to be persisted to the Model, and also changes in the Model that need to be represented in the View. For this reason, it handles events, and that's what it sounds like you need in your code - an event that can exist off of the codebehind, that can update the Views bound to it when the data changes. If you have two pages, then an event on one of the pages will be sent to the ViewModel, which will make a change to the Model (data) if necessary, and pass it back to the ViewModel. The ViewModel would then update any of the UI elements (Views) bound to that piece of data.
There's a REALLY good demonstration of how to implement the MVVM design pattern here
. The guy goes through and takes a typical WPF application (just like Silverlight), where the UI codebehind implements event handlers that directly access data, and refactors it using the MVVM pattern.

master-detail with Windows Phone 7 listbox

I've got a very basic and common scenario I'm trying to work through in my WP7 silverlight application.
I have a basic listbox inside a panorama control that I'm databinding a collection of objects to. Right now i have a datatemplate that just renders a single textbox for every row.
I would like to implement some sort of master/detail strategy for this.
For example, my listbox is just a list of people
John
Bob
Bill
Mike
...
If I were to click on John, I want to pass an ID for that row into some type of subview that will show a simple form that would let me edit the details of that row (invoking some transition, of course)
How would I go about doing this?
The Windows Phone Databound Application project template can be used as a model for how to build this.
During the CTP the equivelant project template had a transition animation, but this one doesn't.
However you can implement the transition following either Christian Schormann's CL02 Mix 10 talk or Shawn Wildermuth's blog post.
Shawn Wildermuth - Bring Back Page Transitions to the Windows Phone List Application Template

SL3 dataform validation indicators don't show in tab pages

I have a Prism/SL3 application with a tab control and each page of the tab control is a "Region" that has its own view and viewModel. when I want to validate the main page, I call dataForm.ValidateItem(), then I go to all the child views and do the same. the problem is, only the pages which user has clicked on them (on the tab page), get instantiated and the pages that are never shown, don't have their view instantiated, thus I can't validate them.
any help?
I created a psuedo work around for this. It's very hacky, but it does work. My example involved walking the visual tree (up and down) to find respective controls that are invalid and then "expanding" the selected item. I have used an accordian in my example, but have also tested this with tab:
http://thoughtjelly.wordpress.com/2009/09/24/walking-the-xaml-visualtree-to-find-a-parent-of-type-t/
HTH,
Mark
EDIT: Link updated.

Communication between components (software design question)

I have an application with the following UI components:
Main Menu
Folders Tree
Query Builder
Tabbed Lists (each tab has a grid that can display data entities)
The application is based on MVC, so each component listed above has a controller and a view.
The first three components need to display data entities on the list (as new tabs):
Double clicking on a folder will display the folder's items in a new list.
When clicking the search button in the query builder it will open the search results in a new tab.
When clicking "Open..." menu item it and selecting a file it will open a new tab with the items in the file.
Since there could be a lot of items the process of loading them from the database is done asynchronously by the grid (the grid is being filled as you are looking at it).
My question is this: which of the following is a "cleaner" design? (if you have better solutions, I will appreciate it very much)
The first solution I have is to use an EventAggregator, define a "ShowQuery" event, make the lists controller subscribe to it, and the other controllers will publish it when they want to display the query results.
The other solution is something like the Unity Container, and from the other controllers resolve the "IListsController" interface, and call the "ShowQuery" method.

Resources