How many view models for a panorama page - windows-phone-7

I'm starting to play with the windows phone 7 panorama control.
I looked at the panorama project template provided in visual studio and saw that the two panorama items use the same view model (and in fact the same data from the model).
How is it in real world applications? Should I best use one view model per panorama item or is it best practice to have only one view model for the complete panorama?

I think that is one View Model per page (a panorama is just a control, not multiple pages). So one ViewModel on a page and every PanoramaItem will use it (My opinion).

It depends on what you are doing.
In most cases I would have separate view models for each page, but if for instance each page is very simple then you may not need it.
An example could be a panorama with each page displaying an image. In this case you might get away with binding the the panorama control to a single list of images.

It really depends on the application. What you saw in the default template is simply there to show you the basics of a MVVM-based design. I personally use a ViewModel for a set of pages that have a similar purpose (e.g. managing media content). There is a single ViewModel locator (per application) that ties them all together.
Bottom line - it is more of a question of preference, as long as the concerns are separated.

Related

Load a XAML Layout dynamically based on User interaction

Good day, I am quite new to windows phone and so please bear with me. I have a requirement to load a XAML layout based on what the user chooses. For example, if i have 4 XAML layouts A, B, C, D, when the user chooses C, the respective XAML layout should be loaded and if A is choosen later, that should come up. I can create different XAML layouts and use the OnNavigateTo Method, but i think its not very efficient. Is there a way, i can group the XAML Layouts together so that it can switch between them easily?.. I have heard of using templates, but can't really find any concrete example of how it works. Any help or links will be greatly appreciated. Thank you.
From my understanding you do not need to use templates. Since there are four different actions that have four different views associated with them, there shouldn't really be a problem with having a separate page for each action.
The problem might also be this - how different are the layouts? If data is the only thing that changes across them, you might think about having a view model to bind to and simply change the bindable source.
Bottom line: just use pages, or a single page bound to dynamic data, depending on your scenario.
In my knowledge , I ask you to prefer the UserControls implementation in your UI. You can have A,B,C and D layouts as a separate UserControls and can have those UserControls in the same page. Just make the visibility changes based on the condition that recognize it in the code behind. I think it may help you.
You can solve this in many different ways. If you are not supposed to load the layout on the same page, create 4 separate pages for each view and navigate to correct page.
If you are required to update the current view, you can choose one of the following:
- Place all four layouts into each own Grid and set Visibility="Collapsed" for each one. Then, when you need to show a layout, simply change its Visibility to True.
- Same as above, but use Visual States to add some animations.
- Create 4 user controls and dynamically create the one you need and add it to the current page.
You need to account for several factors here:
- Clean code and clean design.
- Animations and transitions.
- What about Back key? If user is supposed to navigate back to selection screen once he is done, consider navigating to separate pages.
Don't forget the last point, it may be crucial when choosing the right solution.

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.

Bind various panaroma/pivot items using MVVM

could someone help me with design/understanding the problem: what I need to achieve is page with Panorama/Pivot control, where its items (panos/pivots) will be set via binding, using standard MVVM pattern. Problem is I need to have different content (different user controls) on each pano/pivot, that means If I define a panorama/pivot item template, I doom all of them to be alike, which is not what I want.
I found this question here already asked: Databound windows phone panorama with MVVM design but its still not clear to me. Many thanks.
If you have a dynamic page count on panorama/pivot you could use selector to choose what template is right according to your content.
Implementing DataTemplateSelector
Also, Data Binding Pivot to MVVM may help you too
You could add a dependency property to the user control that you want to use as a data template, a dependency property named "Type" for example and depending on that property you can change the layout of your user control (data template) - for example you could have multiple grids inside your user control and you could show and hide them depending on the type.

How to create a side bar like twitter for OSX ? Suggestions about development choices

I'm curious to know how to create the sidebar used in twitter and many other Apps
What i'm asking for is not about graphics, but i'd like to know which is the better way to create a structure to permit switching between different sections.
I don't like asking for help without start by an opinion, thus, this is mine:
Generic view structure would be created with a NSSplitView
I Need a generic Model class managing sections and taking a pointer to the current one.
Here i'd add informations about image used for any section etc... (something like a custom UITabBarController for iOS.
The Left view of the split View would be connected to the generic Model and would be able to present its section and get the current one. Pushing a button will ask the generic Model to change the current section and load content in the Right view (some doubts about this use a Model that way :P probably not the better one)
The Right view loads other view controller as requested by left View (i have may doubts about how do that!)
I'm on the right way ? how would you build a structure like that of Twitter ?
(Off topic: I'd really appreciate correction of my terrible English to keep this question suitable for all users)
Here's what you need https://github.com/erndev/EDSidebar
That's pretty much how I would do it although what you call a "generic model" object, I would call a controller (because it fits in the controller part of MVC).
The right view would be a Tab View with the style set to "tabless" so you don't get the selection buttons at the top and the individual views within the tab view would be selected by the controller using -selectTabViewItemWithIdentifier:
That's how I would do it anyway.

Razor view engine RenderSection

I am really digging this new Razor View Engine... For someone just coming from another web platform the new MVC 3 efforts are starting to feel right at home for me...
My question is about sections, I see it is possible to define sections in your layout and inject content into them but from all the samples I have seen it appears that this is done from the view. For me it makes more sense to assign content or output for each section from the controller.
So if I have a layout that contains a side bar that I want to load widgets into my view file should not be responsible for rendering the content into those sections. If this were the case then if the side bar content was shared across multiple views then I would have to duplicate that code across view files. My view files should be ignorant of what content is rendered in the side bar next to them.
Ideally I would like to assign content to my sections in the side bar from my controller so my question, is this possible?
In ASP.NET MVC (and other MVC based web application architectures) controllers prepare the data that is rendered by the views. How, where and maybe even when this data is rendered is the view's job to figure out. This is of course more of a architectural design discussion.
A nice thing about ASP.NET MVC is their 'convention over configuration' standpoint which (especially with Razor) lets you change how a lot of things behave. I don't think there's a View.Sections["section1"] = <some data>; option, but you could make a ViewModel that is based on sections, then have some generic master view that just takes apart this ViewModel and sends the correct data to correct partial views. This view model for sections could even hold HTML that has to be rendered, as Razor can be used made to render HTML outside .cshtml files. For more go to Andrew Nures' blog: http://blog.andrewnurse.net/
As you can see this transfers a lot of responsibility from view to the controllers. I myself like that rendering is totally separated from the controllers as then I can hypothetically build very different websites just by changing how data is rendered.

Resources