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

Silverlight 3：幻灯片

CS Rocks
starIconstarIconstarIconstarIconstarIcon

5.00/5 (12投票s)

2009 年 10 月 6 日

CPOL

4分钟阅读

viewsIcon

99555

downloadIcon

5397

这是一个可在 Silverlight 3 UserControl 中使用的幻灯片。

引言

哇！我非常兴奋能与您分享这个幻灯片！并非因为它有多么棒，而是因为它（不仅）是我创建的第一个 Silverlight 幻灯片，也是我创建的第一个 Silverlight 用户控件！

但在开始之前，请允许我向您展示一些我找到的非常棒的 Silverlight 幻灯片

现在，在我决定创建自己的幻灯片之前，我actually尝试使用了这些幻灯片，因为它们是很棒的幻灯片！它们唯一的问题是它们必须直接嵌入到 ASP.NET 网页中，这意味着它们无法嵌入到 Silverlight 用户控件（*.xaml）中。这很令人沮丧！特别是如果您，和我一样，拥有一个完整的 Silverlight 3 网站，并且需要幻灯片能够在 Silverlight 用户控件中运行。

创建 Silverlight 网站

首先，我们将创建一个 Silverlight 网站，用于测试我们的幻灯片。所以，启动 Visual Studio 2008…… 

  • 点击文件菜单 | 新建 | 项目…

当“新建项目”窗口打开时，执行以下操作

  • 在项目类型TreeView中，展开 Visual Basic 节点，然后单击 Silverlight 节点。
  • 从模板ListView中选择 Silverlight 应用程序。
  • 确保您选择了“.NET Framework 3.5”。 
  • 将项目命名为“SlideShowTest”。 
  • 准备好后，单击“确定”按钮。

这是我的样子

单击“确定”按钮后，将打开以下“新建 Silverlight 应用程序”窗口。只需单击“确定”按钮接受默认设置，并创建解决方案。

下载源代码

如果您还没有完成，请下载“SlideShow 类库”源代码到您的计算机。源代码在一个 zip 文件中，所以打开 zip 文件并将SlideShow 项目提取到“SlideShowTest”解决方案文件夹中。

添加项目

下载源代码并将其提取到解决方案文件夹后，将其作为引用添加到您的项目中： 

  • 单击文件菜单 | 添加 | 现有项目…… 
  • 当“添加现有项目”窗口打开时，浏览到“SlideShowTest”解决方案文件夹，然后到“SlideShow”文件夹，并选择“SlideShow.vbproj”。

如果您已成功添加项目，则解决方案资源管理器现在应该看起来像这样

添加项目后，您需要为它添加引用

  • 在解决方案资源管理器中，右键单击“SlideShowTest”项目节点，然后从弹出菜单中选择“添加引用…” 
  • 当“添加引用”窗口打开时，单击“项目”选项卡，然后选择“SlideShow”，并单击“确定”按钮。

添加您的图像

接下来，右键单击SlideShow 项目中的“images”文件夹，然后选择添加 | 现有项……，然后添加您想在幻灯片中查看的所有图像。

请注意，如果您不想添加图像，则不必添加。如果您有网络上图像的 URL，并且想在幻灯片中查看它们，那么您可以使用这些 URL 而不是本地图像。我已经添加了几个图像，如您所见

添加图像后，右键单击SlideShowControl 并选择查看代码。在AddImages() 方法中，按以下方式添加图像的 URL

' Add the URLs of your images here.
'
' This is the only sub that you need to update.
'
Private Sub AddImages()

    'Add the images to be displayed here.
    ImageList.Add("images/Blue hills.jpg")
    ImageList.Add("images/Sunset.jpg")
    ImageList.Add("images/Water lilies.jpg")
    ImageList.Add("images/Winter.jpg")

    'You can also add URLs to images on the web
    ImageList.Add("http://tiny.cc/NX6Kv")

End Sub  'AddImages

添加 ContentGrid

一旦您的图像就位，您就可以在SlideShowTest 项目中的MainPage.xaml用户控件中添加一个网格来托管Slideshow。所以，双击MainPage.xaml用户控件以打开设计视图。然后，将一个Grid从ToolBox 拖到 XAML 设计器上，并将其命名为ContentGrid，如下所示

<Grid x:Name="LayoutRoot">
    <Grid x:Name="ContentGrid"> 
          
    </Grid> 
</Grid>

保存并生成您的项目。

连接起来

添加ContentGrid后，您就可以连接SlideShowControl 了。所以，右键单击 XAML 设计器，并选择“查看代码”以打开代码窗口。

然后，在New() 构造函数方法中，创建一个SlideShowControl 的新实例，并将其添加到ContentGrid.Children 集合中。

Partial Public Class MainPage 
    Inherits UserControl
 
    Public Sub New() 
        InitializeComponent() 

        Dim ssc As New SlideShow.SlideShowControl() 
        Me.ContentGrid.Children.Add(ssc) 

    End Sub
 
End Class

运行项目

就这样！保存您的项目，然后运行它（F5），查看幻灯片……

结论

我真心希望您觉得这个幻灯片像我一样有用。代码易于修改，所以如果您愿意，可以进去进行调整。

编程愉快！

历史

  • 2009年10月6日：首次发布
© . All rights reserved.