title: XAML Master / Template pages with MVVM
body: <p>Is there a way to create master / template pages in XAML (for UWP applications)?</p>
  
  <p>The problem I'm trying to solve:<br>
  I have an application with a lot of similar sites, where only the content changes slightly but not the Buttons and the Layout. Example:</p>
  
  <pre><code>&lt;Page
      DataContext="{Binding WebpageViewModel, Source={StaticResource Locator}}"&gt;
  
      &lt;Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"&gt;
          &lt;Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"&gt;
              &lt;Grid.RowDefinitions&gt;
                  &lt;RowDefinition Height="Auto" /&gt;
                  &lt;RowDefinition Height="*" /&gt;
              &lt;/Grid.RowDefinitions&gt;
              &lt;TextBlock Grid.Row="0" Text="Edit Webpage" Style="{StaticResource BigTexBlock}" /&gt;
              &lt;ScrollViewer  Style="{StaticResource ContentScrollViewer}" Grid.Row="1" VerticalScrollMode="Enabled"&gt;
                  &lt;StackPanel Margin="10,0"&gt;
                      &lt;webpage:EditWebpage DataContext="{Binding }" /&gt;
                  &lt;/StackPanel&gt;
              &lt;/ScrollViewer&gt;
          &lt;/Grid&gt;
      &lt;/Grid&gt;
  
      &lt;Page.BottomAppBar&gt;
          &lt;CommandBar&gt;
              &lt;CommandBar.PrimaryCommands&gt;
                  &lt;!-- more buttons --&gt;
                  &lt;AppBarButton IsCompact="True" Command="{Binding SaveEntryCommand}" Icon="Save" Label="Save" /&gt;
              &lt;/CommandBar.PrimaryCommands&gt;
          &lt;/CommandBar&gt;
      &lt;/Page.BottomAppBar&gt;
  &lt;/Page&gt;
  </code></pre>
  
  <p>Only three parts of this template will change; the ViewModel in the <code>DataContext</code>, the Text of the <code>TextBlock</code>, and the <code>UserControl</code> which contains the editable fields.</p>
  
  <p>As this is an application with a lot of CRUD happening with simple Entities the amount of code to be repeated over and over again is a lot if I keep "solving" the problem like this. In the separated business logic I could avoid this problem with inheritance, but I'm struggling to find a elegant solution in XAML. </p>
  
  <p>Is there a way to refactor this so I may have a "Template Page"?<br>
  I like how for example twig has solved this problem: <a href="http://twig.sensiolabs.org/" rel="nofollow noreferrer">http://twig.sensiolabs.org/</a>. You define a master/template page and override parts of it in the children templates.</p>
  
  <p>Important to me is that</p>
  
  <ul>
  <li>I don't break the MVVM pattern.</li>
  <li>I don't want to hide/show UserControls in one "Main" XAML as the amount of different entities may become quite large</li>
  <li>I want navigation happening between the pages that the user sees the expected animations, and it does not break the separated view code I already have</li>
  </ul>