Share xaml between UWP app pages - c#

I have an app which has navigation bar at the bottom. I'd like to keep that part of the page static - it would be 'base' for all other pages. I could add the exact same part of the code to every xaml page, however, I feel like initializing navigation bar on each page is waste of resources and time.
To make it more clear, below is an image of Facebook app (iPhone), pretty much same UI on Windows 10. Red bordered part of the UI never changes no matter what page you move to. For those using Facebook app you know that when you slide left/right only content in the middle (without red border) changes and slide animation is applied only to that part of the page.
That is basically what I'd like to achieve. Static part of the code that will initialize only once, stay visible on all pages, and no animations or page transitions would apply to it while switching between pages. I've been reading documentation and have not found any helpful information on how to achieve that.

You can easily implement this by creating a page with the shared controls and a ContentControl object, which will be responsible of showing the actual page content.
The ContentControl represents a control with a single piece of content of any type; which means you can put, for example; a UserControl inside of it, even a Page.
That being said, keep in mind that by doing so; you will lose the Frame functionality and will need to handle many things on your own, such as the navigation stack and back button functionality.
I'll leave you this question on SO which can be of help in your case.

Related

windows phone skipping frames in navigation

I have an app where you could go through in views like;
play -> normal or custom -> select map -> summary -> start
I would like to make a shortcut option from play to summary, but I also want navigation back to select map page with the back button functionality.
So the normal workflow p->noc->sm->summary but I want to implement p->sm with the noc<-sm<-summary back functionality too (with the windows phone back button).
I saw how can I delete items from the backstack, but google not helped me how can I navigate through a couple of windows without showing that to the user.
Am I need to override the back button or there is a "better" way to do that?
It's a WP8 project.
Edit:
I didnt need the exact codesnippet for this just a design concept in this patform. (just for the is it duplicated guy)
My normal or custom and select map page should be randomized when I do the shortcut, both of these pages has a "button" which can randomize those settings, I just want a swipe->press->swipe->press->swipe actions shortened to a button press without loosing the 'post modification after randomized' feature.
After I read your comments I think I will handle the back button all of the mentioned views so the backstack will not be getting inconsistent at any state. If I understand well I can tell it in every page what is the "backed" page.
You can't inject pages into the backstack. You can override the back button and do a forward navigation with the animations you would normally do when going backward (and then remove the page you just came from off the stack), but honestly, this all gets complicated and for good reason. One of the few hard truths of Windows Phone design is that you shouldn't mess with the backstack.
Instead, I would rethink your flow. It seems like your second page is a setting of some sort (Normal or Custom). If that is changeable, maybe make a button that can float a modal popup on top of the page and move things around according to the new decision.
Looking again at your flow, it seems like several of the pages may be settings. Can you combine those into one page, maybe on a pivot or panorama? That way making changes is just a swipe away.
Regardless, while it is possible to do what you are looking to achieve, I would look long and hard at whether it is actually the best experience for your users.

WPF layout changes (Fill, Full, Snapped)

I am working on a Win8 app destined for the Windows Store. Hurdles I am trying to overcome is how to deal with the different ways an app can be displayed.
Currently, my main pages is a LayoutAwarePage so it has logic to handle different visual states. However, my question is more how to make my page render differently depending on its state.
I thought, initially, that you basically created a layout for each state that the application supports. But it seems like the VisualStateManager portion of the XAML is just an area where you make piecemeal modifications to the design (hide an element, change an alignment).
I am working with a grid that has many columns and rows to organize my controls and it looks great in fullscreen. However, this doesn't work at all in the snapped state, as most of my controls become hidden off screen. I could certainly add a ScrollViewer control, but this is basically a hack and a usability nightmare for a user.
Thanks for any insight!
It might be that your app doesn't lend itself to snapped view. You are allowed to simply display a message / image that states this. Alternatively, consider just showing the columns that are most important.
The standard MS way seems to be to replace horizontal oriented controls with vertical ones - maybe a listview or something would look better. You'll probably find your code easier to read if you have one control for snapped and another for full screen.
Not exactly related to your question, but Blend works very well with XAML to allow you to manipulate the grid or show the relevant control.
Here is a very good guide from Jerry Nixon.
http://blog.jerrynixon.com/2012/12/walkthrough-implementing-snapview-in.html

Building a custom control in C# (Metro App) that has a page flip effect

I want to create a custom control for Metro Applications written in C# (from my recent research I guess what I am trying to implement is an ItemsControl) that can hold a number of pages, each page can contain any combination of XAML controls, very similar to the FlipView control.
In my custom control I want to show two pages at a time in a book format and with page flip animations that are dynamically bound to the position of the user's drag, exactly like this example: http://turnjs.com/
I have no idea on where to look for references since the only page about creating custom controls is still under development: http://msdn.microsoft.com/en-us/library/windows/apps/hh465455.aspx
Can someone point me at the right direction?
I wish to know how to create a custom control that manages pages with arbitrary content.

WPF slideshow using full screen views as slides

I've been stuck on this for a while now and simply don't know how to proceed. I need to create a slideshow using full screen views (UserControls) as slides. By this I mean that I want to transition between full screen views by means of a sliding animation.
The basic idea is to position one view off screen and to the side of the currently displayed view and then to simply slide them both accross. This works well with small images and objects with a PRESET size.
The problem that I have found is obtaining the actual size of each view at runtime. I need this value to feed to the DoubleAnimation that is responsible for moving the views. How can I find out the 'ActualSize' of each UserControl/view before they are displayed?
If you have any suggestions, I'd be glad to hear them. Many thanks in advance.
UPDATE >>>
While the third party transition code worked well for most situations, it turns out that the main problem that I was having was due to the WPF WebBrowser control.
Apparently, you cannot create a Visual for a VisualBrush from it because it is basically a wrapper for the WinForms control.
Personally, I would go for a project like transitionals to handle the actual transition.
Then you could consider rendering your usercontrol to some Viewboxed Brush and display that full screen. Mark rendle did a project called Code projector which he uses to render Visual Studio's code window to an external screen. That technique could be useful for what you are trying.

How to change into different sections of your application easily

Im currently trying to create an application that will require 10+ different "pages" with different content and controls, and i need to switch back and forth between them on particular events.
What ive been doing, is just creating all the different sections in grids, and setting their visibility to collapsed, and then when i need to show them, just switch out the visible grid to the new one.
This has several drawbacks, im assuming its very poor from a coding standpoint, and this pretty much dis-allows me from using the designer at all. (i have no idea what performance implications it has, either)
on top of that, every time i switch to the new page, i need to reset all the components (textbox's etc) to their default states, as they dont get reset by becoming invisible :P
on to my question: i need a way to map out all the different pages, provide visually attractive transitions between them, and be able to use a designer to create them (and i dont mean designing it somewhere and then just copying the xaml)
I had looked around, and ran into SketchFlow and it seemed like the perfect solution, i could fade between pages and map everything on a flow chart easily, and then i realized it was only for app prototypes and i couldnt actually compile it as a normal application... and i needed to inherit from a custom Window class aswell.
is there something out there that allows me to do this? or how can i code this to work properly?
note: this ABSOLUTELY needs to stay within one window. i cant venture out into having 10+ different windows that pop up every time i need to change to something. as this happens very frequently
Split the separate sections in individual user controls. This would allow you to design each of them easily. Then on your form use code to create and load a new instance of particular user control that represents the section you need to show, and when transitioning, load the new section and unload the current. this would allow your form to stay relatively lightweight.
An alternative is to create a navigation application and split your sections into separate XAML view and use the standard navigation service to switch between them.
WPF Navigation Overview
Creating Navigation Applications video tutorial
You might wanna convert your "Pages" to usercontrols and use some transitions like mentioned in the below link to switch between controls
http://www.tanguay.info/web/index.php?pg=codeExamples&id=280
for more on using transitions look here
http://www.japf.fr/2009/04/adding-transitions-to-a-mvvm-based-dialog/
or
http://www.japf.fr/2008/07/8/comment-page-1/

Categories