Scoped navigation service in Prism UWP - frame

I am using Prism 6 for UWP and Unity.
Scenario:
I have a login page, and some other selection pages before I navigate to a Menu page that hosts a SplitView control. I want the navigation from this point to only target the content area of the SplitView control, but because my INavigationService was created in the context of the initial Frame I cannot do this.
I have seen the SplitView example but that basically sets the SplitView UI as the top Window.Current.Content right off the bat. This is why I am seeing the current behavior. I cannot simply take the initial Frame and set is to the SplitView Content area.
What is a good way to have my navigation now target the SplitView Content area?
- Recreating a navigation service? Don't know how I would inject this in the correct pages.

Related

Even if the content page background color is set to transparent, while using PushModelAsync to navigate the page, the background color is always black

My goal is to view the content of the bottom page from the top of the other content page. In order to accomplish this, I used PushModalAsync to navigate and set the BackgroundColor property of the navigation page to Transparent. I can view the content on the bottom page on Android. However on the iOS platform, a black color is always displayed and I am unable to read the content of the bottom page. Why is the background color always black even when it is set to be transparent in PushModalAsync?
Note: The iOS platform displays a white screen when I change the navigation to PushAsync.
Expected Behavior:
Background color should not be black and it should be transparent when navigating using PushModalAsync
Actual Behavior:
Background color is always black even when the content page background color is set as transparent when navigating using PushModalAsync
Android Screenshot
iOS Screenshot
The issue reproducing sample is provided below:
DemoSample
If you want to do EXACTLY like that, it is not possible (it will require so much work that you can't expect someone to provide you the solution here).
On iOS that control (ViewController) is drawn that way in that presentation mode. So as long as you use that control and that mode it will work that way irrelevant if you use Xamarin or something else. As ViewControllers are most basic controls it is not realistic to replace them with something else. But you can replace presentation mode. In Xamarin.Forms you can do that this way:
<ContentPage ...
xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
ios:Page.ModalPresentationStyle="FormSheet">
...
</ContentPage>
This will result in somewhat different visual presentation but that is the only way to have one ViewController drawn over another without going into some deep customization that would require tons of code, especially on Xamarin.Forms.
You can also try some other values, but the default value will not work.
In iOS, the hierarchy is managed by the view controller. Each page has a separate view controller. A page consists of a window, a root view, and a subview. You cannot see the layout of the previous page by setting the background color to be transparent.
For more details, you can refer to the following documents:
User interface | Microsoft
The View Controller Hierarchy | Apple

Universal Windows App layout page

I'm starting a new universal windows app project. Normally I do web developer but have been asked to do a Universal Windows Application.
I'm starting to get somewhere now and have been using MVVM Light and have a couple of views set up.
Anyway here is my question, is there a way for me to have a "Layout" page, similar to what I would have it ASP.NET MVC?
For example, I have the main xaml page in my app, and the root control in that page is a SplitView. I have it so that when I click a button in the split view pane it takes me to the correct xaml view for that button. The thing is this page doesn't have the split view so I no longer have any navigation.
Surely I don't need to duplicate my menu across every view? I assume I'm missing something blindingly obvious.
Thanks,
The Splitview works this way that the page containing the split view will always be active (I normally call this page shell.xaml)
In here you can place your hamburger menu and add other things that should be visible all the time. Then you create a frame inside the splitview where your child pages live. handling navigation should only navigate using this frame and not the main page.
Here is a working sample that might explain this better:
https://code.msdn.microsoft.com/Sample-splitview-with-edcc2ca9
I think you need something like this.
You have to navigate your pages just to frame in SplitView content, not to default application's frame.
<SplitView>
<SplitView.Pane>
Your menu
</SplitView.Pane>
<SplitView.Content>
<Frame Name="ContentFrame" />
</SplitView.Content>
</SplitView>
And than in code-behind set the page you want like default
public MainPage()
{
this.InitializeComponent();
ContentFrame.Navigate(typeof(Homepage));
}

objects inside Ext.tab.Panel

I am writing simple apps with Sencha Touch 2. I see that the basic object in app/view/Main.js is Ext.tab.Panel.
What other Ext objects can be embedded directly into Ext.tab.Panel? Where can I look up this information?
From the Sencha Touch 2.3.1 docs, Ext.tab.Panel section:
http://docs-origin.sencha.com/touch/2.3.1/#!/api/Ext.tab.Panel
Tab Panels are a great way to allow the user to switch between several
pages that are all full screen. Each Component in the Tab Panel gets
its own Tab, which shows the Component when tapped on. Tabs can be
positioned at the top or the bottom of the Tab Panel, and can
optionally accept title and icon configurations.
Basically, you can put any view class which is subclass of Ext.Container inside a tab panel.
You can put any view you want.You can even put another container inside a container
Have a look at sencha touch docs.
http://docs.sencha.com/touch/2.3.1/#!/guide/views

Tabbar as main view (left side) of splitview controller

Just like the Dropbox app for iPad I want to add Tabbar in the main view controller of splitview.. wondering what is the best way to achieve this?
Checkout the screen grab of ipad dropbox app... I am referring to the tabbar used on bottom left.
Select the Navigation Controller of your Split View Controller in Xcode and in the properties panel it will give you checkboxes to enable/disable top navigation bar and bottom toolbar for it (Dropbox app in your screenshot have both, so you should check both of them if you need the same layout).

Question on Popover

In my app I have a navigation back button which occupies the top left of the navigation bar as such. Now I have a requirement to make the view in the navigation stack a split view. I'm doing my own custom split view controller. Now the question arises in the portrait mode of this split view. I want it to have the default popover behavior in portrait mode (like Apple's splitview in portrait). Can I manually set the location for the popover button on the navigation bar to some place other than top left without violating any UI guidelines? Since the back button is on top left corner by default already. I read over the UI guidelines but could not find anything concrete relating to this issue. Can the popover button be placed anywhere on the navigation bar for the portrait mode of my custom split view?
Thanks!
Yes, it can be done. As you said, there is no strict rule over placement of the pop-over in portrait mode.
This app uses custom split view and the placement of the button to display the navigator (inside a popover) in portrait mode varies on what view controller it is currently displaying. Whether it is the root of the navigation or if it is the view controller pushed over the navigation controller.