65.9K
CodeProject 正在变化。 阅读更多。
Home

如何创建 Silverlight OOB 安装程序包装器 UI 库？

<b>Kunal Chowdhury «IN»</b>
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.97/5 (9投票s)

2010年7月16日

CPOL

9分钟阅读

viewsIcon

33172

downloadIcon

297

在本文中，我将指导您创建一个UI包装器库，用于您的Silverlight浏览器外应用程序的安装体验。

引言

在开始讨论下一部分之前，请允许我问您几个问题。您是Silverlight开发人员吗？如果是，您创建了多少次Silverlight浏览器外应用程序？为此，您创建了多少次UI并编写代码来指示用户将应用程序安装为OOB应用程序。我想答案会是“很多次”。

image

为了解决这个问题，我们将创建一个自定义UI包装器（如上面的快照），它将包含指导用户所需的所有代码。一旦完成，我们就不必在应用程序中一遍又一遍地编写相同的安装代码。阅读描述，别忘了留下您的评论和建议。

背景

在过去的几个月里，我创建了许多Silverlight浏览器外应用程序，但我没有添加任何说明来指导用户将其安装在浏览器窗口之外。我自己也面临着每次创建UI以及一遍又一遍地编写相同的代码来完成我的演示的困难。

因此，这次我决定创建一个包装器控件，我可以在我的所有Silverlight浏览器外应用程序中使用它，而无需进行太多设计或任何代码。我发现它非常有用，并决定与您分享，以便您也可以在您的应用程序中采用相同的方法。

先决条件

以下是项目开始的先决条件

  • Visual Studio 2008 或 Visual Studio 2010
  • Visual Studio 2008 SP1 的 Silverlight 3 工具或 Visual Studio 2010 的 Silverlight 4 工具
  • Expression Blend 3 或 Expression Blend 4（用于设计）

请记住，您只能在 Visual Studio 2010 中开发 Silverlight 4 应用程序，而 Silverlight 3 在 Visual Studio 2008 SP1 和 Visual Studio 2010 中都受支持。我将使用 Visual Studio 2010 和 Silverlight 4 进行演示。因此，此处附加的源代码只能在 Silverlight 4 和 Visual Studio 2010 环境中运行。

项目设置

设置好开发环境后，创建一个 Silverlight 项目。如果您是 Silverlight 应用程序开发新手，想了解 Silverlight 并学习如何深入创建新的 Silverlight 应用程序，请阅读Silverlight 教程。

  • 打开您的 Visual Studio 2010 IDE
  • 选择“文件”>“新建项目”或直接按 CTRL + SHIFT + N 打开“新建项目”对话框
  • 展开“Visual C#”节点，然后转到子节点“Silverlight”
  • 从右侧窗格中选择“Silverlight 类库”
image
  • 选择创建应用程序的位置（例如，“D:\Project Source\Silverlight 4 Demo Apps\”）
  • 现在为您的项目输入一个合适的名称（命名为：“Silverlight4.OOB.Installer.UIWrapper”）
  • 从顶部的组合框中选择 .NET Framework 版本（我默认使用 .NET Framework 4.0，因为我使用的是 Visual Studio 2010），然后单击“确定”
  • 在下一个对话框中，请确保您使用的是正确版本的 Silverlight。在我们的例子中，它是“Silverlight 4”

image

点击“确定”后，它将为您创建 Silverlight 类库项目。在解决方案资源管理器中，您会发现一个名为“Class1.cs”的文件是 Visual Studio 自动创建的。您可以删除该文件，因为它对我们没有用处。

image

使用 XAML 创建包装器控件

项目创建后，是时候创建包装器控件了。首先，我们将在XAML中操作UI，然后我们将转向代码。现在，右键单击项目，然后从弹出菜单中，转到“添加” –> “新建项”。

image

这将打开“添加新项”对话框。选择“Silverlight 用户控件”。输入一个名称（在我们的示例中，我们将使用“UIWrapperControl.xaml”）。点击“添加”。这将创建一个UserControl在您的项目中。

image

现在打开 UIWrapperControl.xaml 并根据您的喜好设计您的 UI。在这里，我们将为我们的示例创建以下屏幕，背景将具有一定的透明度，以便我们可以在控件后面看到。UI 将包含一些 TextBlock 和一个按钮，点击后将把应用程序安装到您的桌面，然后从浏览器外部启动。

image

这在 Microsoft Expression Blend 中更容易实现。所以，让我们在 Blend 中打开 XAML 文件。执行以下步骤：

  • 选择名为“LayoutRoot”的主网格，并将其背景色设置为“无画刷”。同时将其尺寸，即高度和宽度设置为“自动”，以便它可以在任何分辨率下伸展。
  • 在 LayoutRoot 内部添加一个图像控件和另一个网格控件，并将其尺寸设置为“Auto”。如果我们要显示示例的背景图像，我们将使用图像控件。这些控件将添加在第二个网格控件内部。
  • 现在选择第二个网格并将其背景颜色设置为SolidColorBrush。使用黑色作为颜色。

image

  • 现在，将 alpha 值设置为 30%，如上图所示。这将为您的 UI 创建一个透明背景。
  • 完成后，在第二个Grid控件内部添加一个边框控件。我们将它用作控件的矩形包装器。
  • 现在选择边框控件，并根据您的选择为其设置径向渐变背景色。这里我使用白色渐变色，带有一些 Alpha 值，这使您可以通过它看到透明效果。详情请参阅下面的两个快照

image

image

  • 现在，将边框控件的BorderThickness在所有方向上设置为“5”，并设置“20”的CornerRadius。
  • 设置控件的高度和宽度。在我们的例子中，它们分别是 250 和 500。

我的示例中的上述步骤将生成以下屏幕，该屏幕将在屏幕中心具有透明的渐变背景色。以下屏幕截图是显示在 Expression Blend 中创建的 UI 的一部分。

image

现在是时候在UI中放置一些文本，为您的用户提供指导，指示他们将应用程序安装为受信任的浏览器外控件。此外，放置一个按钮，让用户进行应用程序的安装。由于Border控件只能包含一个子控件，因此您必须在Border控件内部放置一个Grid控件，然后放置带有文本的TextBlock和按钮。

这是我的 UI 的 XAML 代码

<Grid x:Name="LayoutRoot">
  <Image x:Name="imgBackground"/>
  <Grid Background="#4C000000">
    <Border BorderBrush="#80FFFFFF" BorderThickness="5" 
            HorizontalAlignment="Center" VerticalAlignment="Center" 
            Width="500" Height="250" CornerRadius="20">
      <Border.Effect>
        <DropShadowEffect/>
      </Border.Effect>
      <Border.Background>
        <RadialGradientBrush>
          <GradientStop Color="#7FFFFFFF" Offset="1"/>
          <GradientStop Color="Transparent" Offset="0.121"/>
        </RadialGradientBrush>
      </Border.Background>
      <StackPanel Orientation="Vertical" Margin="0">
        <StackPanel.Effect>
          <DropShadowEffect/>
        </StackPanel.Effect>
        <TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" 
                   Margin="10,10,10,20" FontSize="24" FontWeight="Bold"
                   Foreground="#FFFFC700" Text="Out-of-Browser Installation Guide">
          <TextBlock.Effect>
            <DropShadowEffect/>
          </TextBlock.Effect>
        </TextBlock>
        <TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" 
                   Text="Your Application is currently running inside browser sandbox. 
                         It requires elevated privileges outside the browser." 
                   Width="460" FontSize="16" 
			TextAlignment="Center" Foreground="#FFFFC700"/>
        <TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" 
                   Text="Please click the button below to install this application 
                         in your desktop and run from there." Width="460" FontSize="16" 
                   TextAlignment="Center" Margin="0,10,0,0" Foreground="#FFFFC700"/>
        <Button Content="Install"
                HorizontalAlignment="Center" VerticalAlignment="Center" 
                Width="75" Style="{StaticResource ButtonStyle}"
                Click="Button_Click" Margin="0,20,0,0"/>
      </StackPanel>
    </Border>
  </Grid>
</Grid>

这是我在 Expression Blend 窗口中 UI 的截图

image

代码演练

既然我们的 XAML 已经准备好了，是时候深入到代码中实现安装功能了。希望您已经通过我之前的文章非常清楚地了解了如何进行 OOB 安装。对于新读者和 Silverlight 新手，我在这里再稍微描述一下。让我们再享受一次 微笑。但在这里，我们将为我们的控件实现提供正确的步骤。

让我们在 Visual Studio 2010 IDE 中打开 XAML.cs 文件（在我们的例子中是：UIWrapperControl.xaml.cs 文件）。

在控件的构造函数中，调用一个名为“CheckOOBInstallation”的新实现方法，并在其中编写以下代码。该方法将检查应用程序是否已安装在用户的计算机上，以及应用程序是否正在浏览器内运行。根据if()条件中做出的决定，我们将设置控件的可见性。作为一个通用调用，这确保您每次使用此UserControl时都不必编写任何代码。只需将其添加到主页面的 XAML 中，它就会以自己的方式执行。好吧，好吧。我们稍后再讨论这一点。首先，做我们想要实现的事情。

这是“CheckOOBInstallation”方法的实现

private void CheckOOBInstallation()
{
    if (Application.Current.InstallState == InstallState.NotInstalled && 
                            Application.Current.IsRunningOutOfBrowser == false)
    {
        Visibility = Visibility.Visible;
    }
    else
    {
        Visibility = Visibility.Collapsed;
    }
}

现在，在“安装”按钮的点击事件中，检查您的应用程序是否已安装到用户的PC上，如果尚未安装，则在点击安装按钮时，通过调用此方法开始进行OOB安装。

private void Button_Click(object sender, RoutedEventArgs e)
{
    if (Application.Current.InstallState == InstallState.NotInstalled)
    {
        Application.Current.Install();
    }
}

您的代码现在几乎准备就绪。如果您需要额外的功能，只需实现它。例如，如果您想在此WrapperControl后面设置一个图像，只需在您的 CS 文件中创建一个DependencyProperty以通用方式设置ImageSource，并将该属性绑定到我们在设计 UI 时添加的图像控件的ImageSource。

在真实应用程序中使用我们的包装器控件

既然我们的设计和代码实现部分已经完成，现在是时候在任何实际应用程序中使用它来检查我们在此期间开发了什么。您想做吗？是的！！！好的，让我们在 Visual Studio 2010 中打开您的任何 Silverlight OOB 应用程序项目或创建一个新的 Silverlight 应用程序。只需按照我上一篇文章“使用 Silverlight 4 COM 互操作的文件浏览器”中提到的步骤（配置应用程序以支持浏览器外）操作。

完成后，将我们包装器项目的输出程序集引用添加到Silverlight应用程序中，并在应用程序的主XAML中声明XMLNS命名空间，如下所示：

xmlns:uiWrapper="clr-namespace:Silverlight.OOB.Installer.UIWrapper;
	assembly=Silverlight.OOB.Installer.UIWrapper"

现在在您的LayoutRoot内部，将UserControl添加到页面的顶部元素，就像下面的代码一样

<uiWrapper:UIWrapperControl />

完成后，在浏览器窗口中运行您的应用程序，您将看到它弹出在您的应用程序UI之上，禁用您的应用程序的整个部分。

image

点击“安装”按钮，在将应用程序安装到您的硬盘驱动器之前，它会首先显示安全警告。

image

点击“安全警告”对话框中的“安装”以继续。这会将应用程序作为浏览器外应用程序安装到您的硬盘驱动器中，安装完成后，它将从您的本地驱动器运行应用程序，而不是从网络运行。

惊讶的笑容 哇……我的 OOB 应用程序中的UIWrapper控件在哪里？冷静一下。回忆一下我们的代码。我们编写了一段代码，根据应用程序状态（即应用程序是否作为受信任的应用程序在浏览器窗口之外运行）使控件可见或折叠。太棒了！！！它既没有显示任何信息对话框，也没有禁用 UI。是的。这就是我们想要在这里实现的行为。

image

What Next?

我想，读完这篇完整的文章后，您应该清楚了。您现在知道可以使用已实现的控件做什么。是的。

  • 首先，您不必在所有应用程序中一遍又一遍地编写逻辑
  • 其次，您可以根据应用程序的主题进行一些小的 UI 更改
  • 第三件事是，您现在可以在包装器控件本身中编写更新应用程序功能，并在您的应用程序中使用它。

太棒了。全部源代码和二进制文件均可免费获取。下载并在需要时使用。这只是一个演示，旨在向您展示其功能，以便您学习。因此，下载源代码后，请仔细阅读以充分理解。根据您的要求进行修改，并在每次需要时使用它。

如果您有任何疑问/意见和/或改进建议，请随时告诉我。通过这种方式，我可以改进它并以更适当的方式向您展示……干杯。

© . All rights reserved.