导出 (0) 打印
全部展开
信息
您所需的主题如下所示。但此主题未包含在此库中。

共享 XAML UI

2014/6/18

适用于: Windows Phone 8 和 Windows Phone Silverlight 8.1 | Windows 8

 

在本节中,我们探讨了如何在 Windows Phone 8 和 Windows 应用商店 应用之间共享 XAML UI。我们概述了为何在应用的此层进行共享不如共享应用逻辑有效,并探讨了如何使用用户控件在应用之间共享某些 UI。应遵循的准则是:为每个应用单独地生成 UI 以分别应用这些设计准则,并尽可能向用户提供最佳的用户体验。用于为 XAML 应用生成 UI 的生成块之间存在相似性。Windows Phone 8 和 Windows 8 之间的 XAML 控件对比中讨论了这一点。

本主题包括以下部分。

 

以下因素使您难以在应用之间共享 XAML UI。

  • Windows Phone 8 上的 XAML 和 Windows 8 上的 XAML 不是二进制兼容的。如上所述,用于在每个平台上生成 UI 的控件是相似的。它们在公开的名称、行为、编程接口或语法方面相似。但是,它们在每个平台上的实现都是特定的。

  • 面向 Windows Phone 8 的 XAML 和面向 Windows 8 的 XAML 在命名空间前缀上有所不同。通过查看在您从头创建它时包括在基础页中的命名空间,您可以获得对此的说明。

    Windows Phone 8 

    
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
        xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    
    

    Windows 8 

    
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:Win8App"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    
    

    通过对比这些命名空间导入,您可以在命名空间导入方式中发现细微但却非常重要的差异。在 Windows Phone 8 中,导入的命名空间以 clr-namespace: 为前缀。在 Windows 8 中,导入的命名空间以 using: 为前缀。这将使得相同的 XAML 难于使用,除非您可以使用相同的语法导入命名空间。

  • XAML 不支持条件编译。如使用预处理器指令进行条件编译中所示,通过编译面向特定平台的代码路径并在对另一平台进行编译时编译另一个代码路径,条件编译是处理平台差异的有效方法。这使得难以在两个平台之间共享 XAML 页面,因为您无法仅通过在使用 clr-namespace(对于 Windows Phone 8)和 using:(对于 Windows 8)的命名空间导入中进行条件编译来解决上一个问题。

不能将此视为在 Windows Phone 8 和 Windows 8 之间进行共享的绝对阻碍。用于清除障碍的准则是为每个平台设计和生成单独的 UI,并分别应用设计准则。也可以在技术上解决这些障碍。您可以在页初始化期间从代码创建 UI。您可以在运行时从资源加载特定于平台的 XAML,并将其作为字符串插入到页中。但是,所有这些方法都规模巨大并且使得构建核心资产(应用展示给用户的外观)成为一个繁琐且易出错的任务。通过尝试共享应用逻辑、数据模型和查看模型等,您在代码共享方面的投入将在进一步减少应用堆栈方面给您带来巨大的回报。

要共享在某些情况中可能会有用的 UI,一种方法是将 UI 的某些部分隔离在用户控件中并尝试共享它们。Windows Phone 8 和 Windows 8 都支持 XAML 用户控件。UserControl 是您定义的 UI 控件,它由现有的 UI 元素组成并包含自身逻辑。像平台上其他可用的控件一样,您可以将您定义的控件放置在 UI 中。有关 Windows Phone 8 中的 UserControl 类的信息,请参见 System.Windows.Controls.UserControl。有关 Windows 8 中的 UserControl 类的信息,请参见 Windows.UI.Xaml.Controls.UserControl

下表显示了在将新的 UserControl 添加到 Windows Phone 8 应用时创建的 XAML,以及在将新的 UserControl 添加到 Windows 应用商店 应用时创建的 XAML。如果省略来自 Windows 8 控件的本地命名空间,导入的命名空间是相同的。如果您不会引用该控件中的任何本地资源,则可以执行此操作。Windows Phone 8 控件还会定义控件的字体背景前景属性。这些属性都被设置为来自 Windows Phone 附带的样式的值。也可以删除这些属性,或者用一些更为常见的内容替代它们。在代码隐藏文件中设置这些属性也很简单。

Windows Phone 8 


<UserControl x:Class="MyApp.Controls.WP8.MyControl"
    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"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    d:DesignHeight="480" d:DesignWidth="480">
    
    <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">

    </Grid>
</UserControl>

Windows 8 


<UserControl
    x:Class="MyApp.Controls.Win8.MyControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MyApp.Controls.Win8"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">
    
    <Grid>

    </Grid>
</UserControl>

如果我们删除这些 XAML 示例中特定于平台的功能,将产生以下结果。


<UserControl
    x:Class="MyApp.Controls.Shared.MyControl"
    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"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">
    
    <Grid>

    </Grid>
</UserControl>

我们已更改了命名空间,来指示已共享了此控件。此 XAML 将在 Windows Phone 8 和 Windows 8 上运行,如果命名空间和控件名称相同,则可以进行共享。这会在共享的用户控件中限制您可以实现的内容。下面介绍了在 Windows Phone 8 和 Windows 8 之间共享 UserControl 时应采用的方法。下面的步骤演示了如何使用 UserControl 来共享 XAML UI。

  1. 在 Visual Studio 中,将新的 UserControl 添加到您项目中的任何一个。

  2. 将命名空间更改为指示其将被共享的命名空间,例如 MyApp.Shared.Controls。您还需要在 UserControl 的 XAML 中更新 Class 项,以使此新命名空间的名称生效。

  3. 打开 UserControl 的 XAML 并修改它,以使其与前一个代码中所示的精简 XAML 相似。

  4. 将 UI 元素添加到此控件。在本示例中,我们将添加 TextBoxTextBlockButton。为简单起见,已对字体和颜色进行了硬编码。以下代码段显示了更新的 XAML。

    
    <UserControl x:Class="MyApp.Shared.Controls.MyControl"
        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"
        mc:Ignorable="d"
        d:DesignHeight="480" d:DesignWidth="480">
        
        <Grid x:Name="LayoutRoot" Background="Black">
            <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                <TextBox x:Name="InputText"/>
                <Button x:Name="SayHelloButton" Click="SayHelloButton_Click_1" Content="Say Hello!"/>
                <TextBlock x:Name="OutputText" FontSize="28" Foreground="White"/>
            </StackPanel>
        </Grid>
    </UserControl>
    
  5. 通过将控件放置到应用中的某个页上来生成和测试控件。要使用此控件,您需要导入所选的命名空间。在 Windows Phone 8 应用中,通过将 xmlns:sharecontrols="clr-namespace:MyApp.Shared.Controls" 添加到 XAML 页面的 <UserControl> 开始标记导入命名空间。同样,对于 Windows 应用商店 应用,通过将 xmlns:sharecontrols="using:MyApp.Shared.Controls" 添加到 XAML 页面的 <UserControl> 开始标记导入命名空间。

  6. 现在,在页面上使用此控件。

    
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
                <sharecontrols:MyControl />
            </Grid>
    
    

    此时,您就已经创建了 UserControl。下一步是在两个项目中共享它。

  7. 在解决方案资源管理器中,右键单击该 UserControl,再选择“从项目中排除”。这将从项目中移除该控件,但是它仍位于磁盘上。

  8. 通过在解决方案资源管理器中右键单击该项目,然后选择“添加” | “现有项”,将控件添加回项目。

  9. 在对话框中选择 MyControl.xaml 和 MyControl.xaml.cs 文件,然后选择“添加为链接”。这会将两个文件作为链接的文件添加回您的项目。您应该在其再次工作之前,验证您放置该控件的页。

  10. 为其他项目重复之前的两个步骤,将控件作为链接的文件添加到该项目中。

  11. 由于 MyControl.xaml.cs 文件包含对平台特定的命名空间的引用,因此不会生成该项目。您可以使用条件编译为此项目类型添加正确的命名空间。下面显示了将控件添加到 Windows Phone 8 项目和 Windows 应用商店 项目后,命名空间声明部分的外观。代码还包含按钮的单击事件处理程序的实现。

    
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    
    #if NETFX_CORE
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml;
    #else
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Navigation;
    using Microsoft.Phone.Controls;
    using Microsoft.Phone.Shell;
    #endif
    
    namespace MyApp.Shared.Controls
    {
        public partial class MyControl : UserControl
        {
            public MyControl()
            {
                InitializeComponent();
            }
    
            private void SayHelloButton_Click_1(object sender, RoutedEventArgs e)
            {
                OutputText.Text = String.Format("Hello {0}", InputText.Text);
            }
    
        }
    }
    
    
  12. 生成、运行和测试两种应用以验证控件是否对两者皆可用。

上一个代码示例演示了如何为 Windows Phone 8 和 Windows 8 生成用户控件。然而,由于此讨论开头部分所提出的限制,此方法受限于基本的用户控制。除了这些限制,您应该考虑这样的准则,即始终生成适合目标平台的用户体验。可以共享 XAML 控件但也会受到限制。共享您想要在弹出窗口中显示的 UI 或其他要共享的小部件是此类共享的较好候选项,因为它们通常由基本的 UI 元素组成,没有复杂的 XAML 且样式简单。

显示:
© 2014 Microsoft