xaml - 如何在 UWP Windows 10 中重用 XAML 中的网格

Question

我目前有一个具有 3 个网格的 Pivot 和一个具有相同网格的 ScrollViewer。正如任何软件工程师都会做的那样，我希望只拥有一次代码，而不是两次。所以我的问题是:我该怎么做？

Answer 1

得到解决方案:我将三个网格放在三个单独的 DataTemplate 中，并从 Pivot 和 ScrollViewer 中引用这些模板:

<Page.Resources>
   ...
   <DataTemplate x:Key="JustANormalGridNr1">
      <Grid />
   </DataTemplate>
   <DataTemplate x:Key="JustANormalGridNr2">
      <Grid />
   </DataTemplate>
   <DataTemplate x:Key="JustANormalGridNr3">
      <Grid />
   </DataTemplate>
</Page.Resources>

<Grid x:Name="MasterGrid">
   <Pivot>
      <Pivot.Items>
         <PivotItem>
            ...
            <Grid>
               <ContentControl ContentTemplate="{StaticResource JustANormalGridNr1}" /><!--instead of the grid, a reference to it -->
            </Grid>
         </PivotItem>
         <PivotItem>
            ...
            <Grid>
               <ContentControl ContentTemplate="{StaticResource JustANormalGridNr2}" /><!--instead of the grid, a reference to it -->
            </Grid>
         </PivotItem>
         <PivotItem>
            ...
            <Grid>
               <ContentControl ContentTemplate="{StaticResource JustANormalGridNr3}" /><!--instead of the grid, a reference to it -->
            </Grid>
         </PivotItem>
      </Pivot.Items>
   </Pivot>

   <ScrollViewer>
      <Grid>
         <Grid>
            ...
            <Grid Grid.Column="0">
               ...
               <ContentControl Grid.Row="1" ContentTemplate="{StaticResource JustANormalGridNr1}" /><!-- Instead of the grid, a reference to it -->
            </Grid>
            <Grid Grid.Column="1">
               ...
               <ContentControl Grid.Row="1" ContentTemplate="{StaticResource JustANormalGridNr2}" /><!-- Instead of the grid, a reference to it -->
            </Grid>
            <Grid Grid.Column="2">
               ...
               <ContentControl Grid.Row="1" ContentTemplate="{StaticResource JustANormalGridNr3}" /><!-- Instead of the grid, a reference to it -->
            </Grid>
         </Grid>
      </Grid>
   </ScrollViewer>
</Grid>