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

Silverlight 轮播：创建显示图片在交互式轮播中的 Silverlight 控件

cokkiy
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.89/5 (54投票s)

2008年11月23日

Ms-PL

4分钟阅读

viewsIcon

733132

downloadIcon

6135

本文介绍了如何创建和使用 Silverlight Carousel 控件。

screen capture

引言和背景

什么是 Carousel？Carousel 只是一个 Silverlight 2.0（现在已更新到 Silverlight v3）控件，它可以像旋转木马一样（你见过旋转木马吗？）显示图片集合。当我创建 Microsoft Popfly 的 Mashup 时，我看到了一个名为“Carousel”的显示控件。它对我非常有吸引力，所以我想找一个这样的控件用在我的应用程序中。通过 Google，我找到了 YetAnotherCarousel，但它太粗糙了，无法使用。我找到的另一个是在 Silverlight V1 中创建的，而且非常难用。但这个想法困扰着我，日夜吸引着我。我一遍又一遍地谷歌搜索，但找不到一个完美的。于是有一天，我问自己，“为什么不自己创建一个呢？”

主要特点

  • 这确实是一个 Silverlight V2（v3 也支持）控件，全部用 C# 编写。
  • 使用非常简单。
  • 拥有许多有用的属性来控制其行为。
  • 可以连续转动或分步转动。

使用控件

使用 Carousel 控件非常简单，就像使用任何其他控件一样。首先，将程序集（cokkiy.display.carousel）添加到你的 Silverlight 项目并引用它。然后看代码

  1. 首先在你的 Page XAML 文件中添加 XMLNS 引用。
    <UserControl x:Class="ControlTest.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:display="clr-namespace:Cokkiy.Display;assembly=Cokkiy.Display.Carousel"
             Width="800" Height="600">
  2. 将 Carousel 放置在你的布局控件中。我把它放在了一个网格中，你也可以把它作为内容或子项放在任何 UIElement 中。
    <display:Carousel x:Name="carousel" TurnDirection="Counterclockwise"
      Padding="5,5,5,5" >
            <display:Carousel.Background>
                <LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
                    <GradientStop Color="#FF000000"/>
                    <GradientStop Color="#FFFFFFFF" Offset="1"/>

                </LinearGradientBrush>
            </display:Carousel.Background>
            <display:Carousel.ItemSources>
                <display:ItemSource Title="01" ImageSource="Images/01.jpg"/>
                <display:ItemSource Title="02" ImageSource="Images/02.jpg"/>
                <display:ItemSource Title="03" ImageSource="Images/03.jpg"/>

                <display:ItemSource Title="04" ImageSource="Images/04.jpg"/>
                <display:ItemSource Title="05" ImageSource="Images/05.jpg"/>
                <display:ItemSource Title="06" ImageSource="Images/06.jpg"/>
                <display:ItemSource Title="07" ImageSource="Images/07.jpg"/>
                <display:ItemSource Title="08" ImageSource="Images/08.jpg"/>
            </display:Carousel.ItemSources>

        </display:Carousel>

ImageSource 属性就是 Silverlight Image 的源，所以你可以将其设置为任何有效的 URL 作为 Image 的源，更多关于此的信息，你可以参考 MSDN 的 Image 的源属性。

请注意我是如何将 Carousel 添加到我的页面的。Carousel 有 8 张图片作为其子项。让我们看看屏幕截图。

Screen capture

它是如何工作的？

从屏幕截图可以看出，Carousel 由三个主要部分组成。放置图片的 Canvas，小项（轮播图叶片）包含一个可以在椭圆（这是一个虚拟的、不存在的椭圆）周围旋转的图像，以及显示所选图像的面板（图片中的大图像）。所有这三个部分也都是 Silverlight 控件，它们有自己的属性。我称之为 CarouselItem 的轮播图叶片控件会自己计算放置 Canvas 的位置和缩放范围。关键在于将每个项目放置在合适的位置，并使其大小适应任何位置，并使其沿着椭圆旋转。

为了使 Carousel 控件像一个真正的旋转木马，我们必须确保

  • 离得远的项比离得近的项小，而离得最近的项最大。
  • 后面的（远的）项在前面的（近的）项下面。
  • 前景中的项是模糊的。

让我们看下面的图演示这个概念。

carousel figure

当中心点O保持不变时，点P处 CarouselItem 的位置和大小仅取决于角度A。我们可以按如下代码计算位置和大小。

    // Position 
    double dx = Axis.Width * Math.Cos(newAngle) + Center.X; 
    double dy = Axis.Height * Math.Sin(newAngle) + Center.Y; 
    Canvas.SetLeft(this, dx);
    Canvas.SetTop(this, dy); 
    // Scale 
    double sc = 2 + Math.Cos(newAngle - Math.PI / 2); 
    ScaleTransform st = (
        this.RenderTransform as TransformGroup).Children[0] as ScaleTransform; 
    st.ScaleX = sc; 
    st.ScaleY = sc; 
    // Set the ZIndex based the distance from us, the far item 
    // is under the near item 
    Canvas.SetZIndex(this, (int)dy);

位置和大小都仅取决于角度，因此使其沿着椭圆旋转非常容易。Silverlight 支持 DependencyProperty 动画，因此我们将角度作为 DependencyProperty。并对每个项目的角度属性进行 DoubleAnimation。DoubleAnimation 有一个名为 By 的属性，它表示动画改变其起始值的总量。当我们将其设置为 2*PI 时，它开始转动一圈。

    Storyboard storyboard = new Storyboard();
    //this.Resources.Add(name, storyboard);

    // Angle animation
    DoubleAnimation doubleAnimation = new DoubleAnimation();
    doubleAnimation.By = 2*Math.PI;
    doubleAnimation.Duration = duration;
    doubleAnimation.RepeatBehavior = RepeatBehavior.Forever;

    // Set storyboard target property
    storyboard.Children.Add(doubleAnimation);
    Storyboard.SetTarget(doubleAnimation, item);
    Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("Angle"));

我们为每个项目创建一个故事板，然后将所有这些故事板添加到全局故事板中。然后，如果我们想让旋转木马转动，我们只需启动全局故事板。

历史

  • 2008年11月23日：初次发布
  • 2008年11月26日：修复了源代码中的一个 bug。当从集合中删除一个项时，会抛出异常，现已修复。
  • 2009年8月2日：将控件更新至 Silverlight V3。

我的英语不太好，希望你能理解我所说的。示例代码包含一些来自公共网站的图片，你不应该在你的产品中使用这些图片。

© . All rights reserved.