Bind various panaroma/pivot items using MVVM - windows-phone-7

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.

Related

Sitecore page editor dropdown

I would kindly ask for your help :) From couple of days I am trying to achieve "linked" custom field in content editor and dropdown in page editor.
Basically I want to have dropdown in page editor and content editor which are responsible for a same thing.
In my c# code i have enums which represent directions. I created custom field which accepts assembly and class with overridden onload method and successfully populate dropdown values in the content editor. So far so good but i have no idea how to create dropdown which will represent the same functionality inside page editor.
So please give me any ideas...
Judging from your reply to my comment you need to think of the following: How is my field value being rendered onto a page?
If you are always using 1 control to do this then you just need to ensure that this control has 2 different rendering modes depending on the Context.PageMode
But as I understand it you want this dropdown to also appear when someone renders your custom field using a <sc:FieldRenderer>. In this case you'll need to look into the RenderField pipeline of Sitecore. There you find a processor called RenderWebEditing. Possibly through some manipulation here you can get your dropdown appear as you wish.

How to set theme id property on Components?

Whatever I do, only theme set in application properties applies. Theme id doesnt work as expected.
For example:
I have two custom controls and each has 5 views. I try to set view title property for all views in first custom control with theme and same with second custom control, but with different theme (and title).
Both custom controls exist on same page.
Problem Im trying to solve is, instead of typing functions for properties for each component of same type I want to do it only in one place. In that case all views in one custom control. Or all views in a panel...
Regarding Themes: afaik we only can define a single theme per application. This theme can inherit from other themes but those need to be installed and registered at the file system level for the entire server.
Regarding your scenario:
If you really want to solve that with themes you could work with separate theme ids. But I really don't see the benefit of using themes here. As far as I understand your task I would solve it using custom properties for your custom controls. The view title would then be computed to reference that property as in
<xp:viewTitle xp:key="viewTitle" id="viewTitle1"
value="#{javascript:compositeData.ccViewTitle}">
</xp:viewTitle>
At design time the containing Xpage or Custom Control would then feed the appropriate view title to the child control:
<xc:ccInner ccViewTitle="View Title for First CC in Page"></xc:ccInner>
<xc:ccInner ccViewTitle="View Title for Second CC in Page"></xc:ccInner>
You also could compute this value, if necessary.

AngularJS: "Global" menu buttons for multiple views

I've (very) recently dived into Angular, but I'm struggling a bit with how to design my layout.
For my site I've created a menu containing an input field and some buttons. The idea is that the input field combined with either of the buttons should service a function. So say for viewA, the input field should only act as a search bar. If the user however clicks one of the buttons the input field value should be used to as a basis to create a new item in another viewB.
The search function works great for viewA, but I'm unable to make the buttons switch views. I'm suspecting (or know, but don't know how to address it) this is because the mentioned buttons are outside the view (ng-view) and thus don't have a controller.
I've searched around for "multiple controllers / views", where suggestions vary from using the include function or create a service. Problem is I have no idea what would best practise or if it's even necessary for my case.
The menu + input field is another view. It should have its own controller. Based on the route – $on($routeChangeSuccess, ...) – you can use ng-switch to switch between the appropriate HTML/template in that view. If your templates are large, you can use ng-include inside the ng-switch directives. Otherwise don't bother, and just in-line the HTML inside each ng-switch-when.
For an example of how so use $routeChangeSuccess (but not ng-switch), see https://stackoverflow.com/a/11910904/215945

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.

Using PhoneApplicationPage as a nested view container

In MVVM Light toolkit for Windows Phone, whenever I am to add a new MvvmLightView (WP) item, I end up with the template creating a PhoneApplicationPage for me.
What about cases, when I want to create a nested view, for example in case of a ListBox ItemTemplate view.
Before MVVM Light, every time I needed a view to separate markup to, I would have created a standard UserControl and that worked fine.
Should I only use MvvmLightView whenever creating a navigable pages?
The item template is a guidance, that produces some code for you. It is not, nor does it intend to be, the single way of creating views or sub views.
In the case you are mentioning, it is usual to create a user control hat is backed on its own view model. This sub-view view model is then included as a property in your main view model. To pass it to your sub-view (e.g. a user control) you bind this property to the user control's DataContext.
<ext:MyUserControl DataContext="{Binding MySubViewProperty}"/>
However, you do not need a separate view model, in some cases it is more appropriate to share the main view model. In this case you do not need to do the above binding, as it is do one implicitly. Also, when you are using the user control within an DataTemplate the templates DataContext is passed to the user control implicitly and you do not need the binding. In general you only need to set the data context when you want to bind to a property of the current context, or to another context.
MVVM is about freedom and MVVM Light about supporting the developer in using this freedom. All guidance are best practises and provide usually the easiest an/or most consistant way, but nothing stops you going down another route for a good reason. Especially the templates are just shortcuts that provide for one problem, but not for the general (meaning every) case.

Resources