在一个 xaml 中包含多个 xaml 文件（Windows 通用）答案

【问题标题】：Including several xaml files in an xaml (Windows Universal)在一个 xaml 中包含多个 xaml 文件（Windows 通用）
【发布时间】：2015-09-22 09:59:57
【问题描述】：

我有两个文件 MyPagePort.xaml 和 MyPageLand.xaml 用于纵向和横向。我还想要一个“集成器”MyPage.xaml，它使用 VisualStateManager 在纵向和横向布局之间切换。

<VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="Portrait>
                 include MyPagePort.xaml
            </VisualState> 
            <VisualState x:Name="Landscape">
                 include MyPageLand.xaml  
            </VisualState> 
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

问题是我找不到包含多个 XAML 的方法。我只需要类似于 Android 中的“包含”的东西。

我发现了许多 WPF 示例（或），但似乎都不适用于 Windows Universal。

【问题讨论】：

标签： xaml win-universal-app

【解决方案1】：

我相信您尝试实现纵向和横向方向的方式不是最佳实践，也是错误的。但是如果你坚持用错误的方式做，你可以尝试使用 Frame 元素。

<Frame x:Name="frame" HorizontalAlignment="Left" VerticalAlignment="Top"/>

然后做

frame.Navigate(typeof(YourPage));

尝试最佳实践（您也可以在那里找到集成商）

【讨论】：

我认为处理两个方向没有任何问题，而且我正在按照那里的建议进行操作：使用 VisualStateManager 在方向之间切换，仅使用 Grid 在我的情况下不太合适。这个问题相当技术性：如何引用多个 XAML，因为在单个 XAML 中设计两种布局不太方便。

【解决方案2】：

可能最好的方法是使用用户控件，所以我可以有两个用户控件用于水平和垂直布局。一种方法是使一个可见，另一个折叠并根据方向切换可见性：

   <Grid x:Name="ContentPanel">
     <layouts:MainPagePort x:Name="ContentPortrait" />
     <layouts:MainMenuLand x:Name="ContentLandscape" Visibility="Collapsed" />


   </Grid> 

   <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="Portrait"/>
            <VisualState x:Name="Landscape">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames
                        Storyboard.TargetName="ContentPortrait"
                        Storyboard.TargetProperty="Visibility">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                    </ObjectAnimationUsingKeyFrames>

                    <ObjectAnimationUsingKeyFrames
                        Storyboard.TargetName="ContentLandscape"
                        Storyboard.TargetProperty="Visibility">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        </VisualStateGroup >
    </VisualStatemanager.VisualStateGroups>

但是这种方法有一个明显的缺点（这可能是 Stamos 不建议支持两种布局的原因），但有一个出路：如果布局复杂，未使用的布局会浪费空间并使其难以要运行的应用程序（尤其是在手机上）。一种解决方法是删除不必要的布局树和需要的布局树：

   public async void Window_SizeChanged  (object sender, WindowSizeChangedEventArgs e) 
   {

         ApplicationViewOrientation newOrientation = OrientationUtils.getScreenOrientation();
         if (newOrientation != curOrientation)
          {
              curOrientation = newOrientation;
              setupOrientation();
          }
     }

     private void setupOrientation()
     {
          Panel contentPane = FindName("ContentPanel") as Panel;
          if (contentPane != null) {
             var children = contentPane.Children;
             try
             {
                 children.Remove(children.Where(child => ((Control)child).Name.Equals("ContentChild")).First());
             }


              String layoutPath = "ms-appx:///MainPage" +
                  ((curOrientation == ApplicationViewOrientation.Portrait) ? "Port" : "Land") +
                         ".xaml";
              var newElement = new UserControl();
              Application.LoadComponent(newElement, new Uri(layoutPath),
                          ComponentResourceLocation.Application);
              newElement.Name = "ContentChild";
              children.Add(newElement);
        }
    }

【讨论】：