What is the best way to share common resources within a shared Windows Phone/Store app? - windows-phone

Question

Migrating from individual Windows Phone and Windows Store (Desktop) apps to the new shared app paradigm, I'm having trouble sharing resources between them. For example, specifically, when I want to style the Pivot control (and its children items), I try to place the style and its features into the central App.xaml file and I get the error that the Pivot control (and its children items) are not found in the Windows.Phone.Controls(.Primitives) assembly, when I know they ARE described there.
However, when I place the same style in-line within the page OR in a separate resource dictionary in the Windows.Phone folder section, the style works. This seems to defeat the purpose of having an all-in-one app system that should share common resources. After trudging through multiple SO answers, forums and the MSDN system, I don't find a straight-forward solution to this problem.
What is the proper way to share common resources between the Windows Phone and Windows Store sections of the new shared Windows app solution???

Answer 1

First, the reason why the Pivot control is not defined in the App.xaml file resources is that it is SPECIFIC to the Windows Phone system - it is NOT defined in Windows Store the same way (Windows Store apps use a Hub control, which is very similar). SO, the way to share resources appropriately between the two sections of a Shared Windows Phone/Store app is to:
1) create commonly named resource dictionary files in both folder systems, but ONLY where these components will be different from Phone to Store implementations (Pivot vs. Hub is an example). E.g., create a StylesResources.xaml dictionary in BOTH folder systems (Phone and Store).
2) create truly SHARED resource dictionaries in the "Shared" folder system. E.g., create a StringResources.xaml dictionary ONCE in the MyApp.Shared folder system.
3) do NOT place any resources directly into the App.xaml file in the MyApp.Shared folder system - instead, MERGE all your shared and non-shared dictionaries there, like this:
<Application
x:Class="MyApp.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="MyApp">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="ColorResources.xaml" />
<ResourceDictionary Source="ControlResources.xaml" />
<ResourceDictionary Source="DimensionResources.xaml" />
<ResourceDictionary Source="FontResources.xaml" />
<ResourceDictionary Source="StyleResources.xaml" />
<ResourceDictionary Source="StringResources.xaml" />
<ResourceDictionary Source="TemplateResources.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
In the example above, only StringResources.xaml and ColorResources.xaml are in the MyApp.Shared folder... the rest are duplicate dictionary names created in BOTH the Phone and Store folder systems.
When the system compiles for Phone, it uses the merged Phone dictionaries and it uses the Store dictionaries when it compiles for that system. This way, you don't have to repeat the declarations in the individual pages - you can share COMMON resources and define individually ONLY the resources that will be different from Phone to Store.
(This makes sense, because, for example, your margins and fonts are likely to be different when building for Pone vs. Store and the reverse.)