How to add same control to every screen?

Question

There are a couple of different ways to do this. It really matters on whether you need it to be the same control (same instance) or if it is just a header/footer control which is added to each page and changes based on what you put into it.

Firstly, if this is something that can be incorporated into a CommandBar, that's the first thing I suggest you try. Then you can just create a StaticResource for each CommandBar, styled in the way you want for the header and footer. When you declare each page, in the root declaration, just set:

Page.TopAppBar="{StaticResource MyHeader}"
Page.BottomAppBar="{StaticResource MyFooter}"

You can make them Sticky and style them in any way that you would prefer, including having a collapsed version with just an ellipsis (...) to hide/show it. You can store all of the data for them inside of their own ViewModels, and have the control's DataContext just bind directly to the VM so that each instantiation pulls from the same data.

If it's not something that can be incorporated into a type of CommandBar, then I suggest you create your own Page subclass. The Template for it will wrap its ContentPresenter in your custom Header and Footer objects, likely in a Grid panel. This way will create a new copy of them each time, so they'll still need to bind to a ViewModel.

The final option that I see is to create a parent Page which has, similar to the subclass method, your header and footer wrapping the content. This time though, have them wrap a Frame. Then, all you have to do is call Frame.Navigate on that Frameand the header/footer controls will not be recreated, only the content in between them.

You can see something similar to this done in most of the Windows 8/8.1 app samples. They create a Content Frame, then navigate that through each page of the sample, generally on a selection from a navigation ListBox.

If you add a bit more information, I can try and tailor the answer a bit and provide some more specificity, but these are the general ways that I can see for you to accomplish what you have described.

Update:

Based on what you've said, to me it seems like the easiest thing to do would be to go with the third option, a Page wrapping a Frame. I suggest this because then it makes it quite easy for the bottom bar to affect navigation, and it sounds like you don't want the header or footer to be affected by page transitions.

If you check out the official ListView sample, you'll note their main page is declared something like this:

<Page
     ...> 
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
        <!-- Navigation and other stuff -->
        <Frame Grid.Column="1" x:Name="ScenarioFrame" Margin="30,50,30,0" /> 
    </Grid> 
</Page>

This is your basic main page declaration. You can then declare three Rows, one for your header, one for your Content, and one for your footer. If you want the footer to pop in and out, you can totally build the footer you have described into a CommandBar and include it on this page. Whenever you need to Navigate, just call ScenarioFrame.Navigate from your code-behind. You can now create Pages like normal, and Navigate to them like you would any other app.

This should also be 'Universal', so you should be able to include it in a Universal app, so long as you make sure your footer scales to the size of the screen (which you should already do). If you do try this, make sure that your navigation code in your main page is as generic as possible and the majority of the 'specialty navigation', such as Panes and settings are handled each platform-specific page, or at least via messaging (such as that provided by MvvmLight) and a NavigationHelper class.

Hope this helps and happy coding!