`
gstarwd
  • 浏览: 1536819 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

Silverlight Carousel: Creating a Silverlight Control Displays Picture in an Inte

阅读更多

http://www.codeproject.com/KB/silverlight/carousel.aspx

 

screen capture

Introduction and Background

What is Carousel? Carousel is just a Silverlight 2.0 (now it's has been updated to Silverlight v3) control which can display collections of pictures like a carousel (have you ever see a carousel?). When I creating Mashup in Microsoft Popfly I saw a display control named "Carousel." It was very attractive to me so I wanted to find one like this to use it in my own application. Using Google I found YetAnotherCarousel , but it was too coarse to use. And the other one I found was created in Silverlight V1 and was very hard to use. But the idea dogged me, attracted me day and night. I Googled again and again but could not find a perfect one. So one day, I asked myself, "Why not create one for myself?"

Key Features

  • It's really a Silverlight V2 (v3 also) Control, all written in C#.
  • Very simple to use.
  • Has many useful properties to control it's behaviour.
  • Can turning continuous or step by step.

Using the Control

Using the Carousel control is very simple just like any other control. First of all, you add the assembly (cokkiy.display.carousel ) and reference it to your Silverlight Project. Then look at the code:

  1. Add the XMLNS reference to your Page XAML file beginning.
    Collapse
    <
    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. Place the Carousel in your layout control. I put it in a grid, and you can put it in any UIElement as a content or child item.
    Collapse
    <
    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
    >
    

The ImageSource property just is the Silverlight Image's source, so you can set it any valid Url as Image's source do, more info about it you can refer MSDN's Image's source property.

Notice how I added a Carousel in my page. The Carousel has 8 images as its children. Let's look at the screen capture.

Screen capture

How It Works?

From the screen capture we can know the Carousel is composed of three main parts. The Canvas where the image placed, the small item (the carousel leaf) contains an image which can turn around with the ellipse (it is a virtual image ellipse does not exist) and the panel displays the selected image (the large image in the picture). All three parts are also Silverlight controls which have their own properties. The carousel leaf control I called is CarouselItem which calculates the position of where to place the Canvas , and the scale range by itself. The key point is in placing each item in a proper point and making its size fit any position, and making it turn along with the ellipse.

To make the Carousel control like a real carousel, we must ensure:

  • The farther item is smaller than the nearer item, and the nearest item is the biggest item.
  • The item in the back (father) is under the item in the front (near).
  • The item in the foreground is blurred.

Let's see the following figure demo the concept.

carousel figure

When the center point, O , is constant, the positon and size of CarouselItem at point P only depends to the angle of A . We can calc the positon and size like following code.

Collapse
    //
 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);

The position and size all only depends on the angle, so it's very easy to make it turn around the ellipse. Silverlight support the DependencyProperty animation, so we make the angle as a DependencyProperty . And make a DoubleAnimation on each item's angle property. The DoubleAnimation has a property named By which means the total amount by which the animation changes its starting value. When we set it to 2*PI, it starts turning a lap.

Collapse
    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"
));

We create a storyboard for each item and then add all these storyboards to a global storyboard. Then if we want the carousel to turn, we just start the global storyboard.

History

  • 23rd November, 2008: Initial post
  • 26rd November, 2008: Fixed a bug in source code. When remove an item from the collection, it's will throw an exception, now fixed.
  • 2nd  August,2009, Updated the control to Silverlight V3.

My English is not very good so I hope you can understand what I've said. The sample code  include some pictures from public web, you should not use the image in your product.

<!-- Main Page Contents End -->

License

This article, along with any associated source code and files, is licensed under The Microsoft Public License (Ms-PL)

About the Author

cokkiy


Member
The God created the world.
The programer made the world easy.
I am a programer like c# and c++, so I am writting application in it.
Creating beautiful application make life easy.
If you have a project and looking for a man, I'll be say "hi, I am just the man you are looking for."
Occupation: Team Leader
Location: China China

 

Other popular Silverlight articles:

分享到:
评论

相关推荐

    react-carousel:轻巧的旋转木马组件,用于React

    安装npm i react react-dom @trendyol-js/react-carousel --save用法import React from 'react' ;import ReactDOM from 'react-dom' ;import { Carousel } from '@trendyol-js/react-carousel' ;import { Item } ...

    v4u-magento2-owlcarousel:Magento2使用OwlCarousel添加滑块

    如何在Magento2中使用OwlCarousel添加滑块? 下载此模块:V4U OwlCarousel 复制此模块并粘贴到magento-root / app / code文件夹中 运行以下命令: php bin / magento模块:状态 php bin / magento模块:启用V4U_...

    carousel:with使用Next.js的简单轮播

    :carousel_horse: 一个带有Next.js的简单轮播。 :joystick: 在这里测试: 即将推出... :hammer_and_wrench: 入门 视窗: 您可以通过键入以下命令通过CMD(命令提示符)克隆存储库: git clone ...

    simple_carousel:简单的旋转木马

    这是一个存储库,我在其中应用了一些 javascript 概念来进行研究。 我打算改进代码的幻灯片并使其更具活力,请随时贡献:) 运行应用程序: 安装 。 初始化竖琴服务器: $ harp server 您的应用程序将在 ...

    适用于RecyclerView的Android Carousel LayoutManager-Android开发

    用于RecyclerView的Android LayoutManager以支持Carousel视图样式示例与Gradle实现'com.azoft.carousellayoutmanager:carousel:version'的集成请用Android LayoutManager for RecyclerView来支持Carousel视图样式...

    flutter-carousel:带有多种配置选项的颤振轮播程序包

    Flutter_Carosel 一个简单的带有多个配置选项的Carousel窗口小部件。 ...dependencies : ... flutter_multi_carousel : ^1.0.0... 并使用flutter packages get安装它,并将其放在您的项目文件夹中。 之后,只需导入...

    carousel:旋转木马

    "carousel:旋转木马"是关于网页开发中的一个组件,主要功能是展示一系列图标或图片,以轮播的形式呈现,通常用于网站的横幅、产品展示等区域,为用户提供动态浏览体验。这种组件的设计通常注重用户体验,使得内容...

    vue-carousel:适用于Vue.js的灵活,响应快速,触摸友好的轮播

    目录安装npm install vue-carousel 或者如果您更喜欢纱线yarn add vue-carousel用法全球您可以全局安装Vue Carousel: import Vue from 'vue' ;import VueCarousel from 'vue-carousel' ;Vue . use ( VueCarousel ) ...

    carousel:Javascript 照片轮播

    【标题】"carousel:Javascript 照片轮播" 涉及的核心技术是JavaScript,这是一种广泛用于网页动态效果和交互的编程语言。照片轮播,也称为旋转木马,是网页设计中常见的元素,用于展示一系列图片或内容,通常以滑动...

    nuka-carousel:Pure React Carousel组件

    努卡旋转木马 纯ReactJS轮播组件 安装 要将nuka-carousel添加到您的项目...import Carousel from ' nuka-carousel ' ; export default class extends React.Component { render () { return ( &lt; Carousel&gt; &lt; img

    ayetunes-carousel:Javascript 库免费 iTunes,如带有大图像的旋转木马

    AyeTunes-轮播。 (iTunes 喜欢 Carousel) 视频在这里。 库免费的 javascript 模块,用于创建带有... carousel:'left', callbackfunc:cbFunction, sections:[ {id:'at0', sm:'img/PNG_S_0.png',lg:'img/PNG0.png

    pm-carousel:使用JS编写的可访问轮播插件,无依赖项

    旋转木马使用JS编写的可访问轮播... button type =" button " data-pm-carousel-playstop =" Stop the carousel|Play the carousel " hidden &gt; {text} &lt;/ button &gt; &lt; ul&gt; &lt; li&gt; &lt; button type =" button

    react-carousel:React中的轮播组件

    import Carousel from "@jjunyjjuny/react-carousel"; const Container = styled.div` margin: 0 auto; margin-top: 100px; width: 480px; `; const Item = styled.div` background: #dbe4ff; text

    angular-picture-carousel:演示使用角度等等

    **Angular Picture Carousel 演示详解** Angular Picture Carousel 是一个基于 AngularJS(也称为 Angular)框架的图片轮播组件,它允许开发者轻松地在网页应用中实现动态且交互性强的图片展示功能。AngularJS,...

    Images-Carousel:https

    【标题】"Images-Carousel:https"是一个与网页开发相关的项目,重点在于实现一个能够适应屏幕尺寸的图片轮播功能。在这个项目中,开发者利用了HTTPS(超文本传输安全协议)来确保数据在传输过程中的安全性,为用户...

    Carousel:小程序应用

    总结来说,"Carousel:小程序应用"涉及到的知识点包括小程序的轮播组件`&lt;swiper&gt;`和`&lt;swiper-item&gt;`的使用,以及如何通过设置相关属性和监听事件来实现轮播功能。同时,也展示了小程序与HTML的关联,虽然不是直接使用...

    video-carousel:视频播放统计

    总的来说,"video-carousel:视频播放统计"项目是基于Vue.js的前端开发实践,涉及到了组件化开发、事件驱动、数据统计、用户体验优化等多个方面的技术知识。这个项目不仅展示了Vue.js的强大功能,也体现了现代Web开发...

    ngu-carousel:Angular通用轮播

    轮播 角度通用旋转木马Note: This carousel doesn't include any css. go and customize css for buttons, items except ngucarousel and ngucarousel-inner 演示版在Stackblitz演示可演示安装角版本ngu-carousel...

    react-spring-3d-carousel:一个3D Carousel组件,用于使用React构建并利用React Spring来控制幻灯片过渡的图像

    例子安装及使用通过npm安装: npm i react-spring-3d-carousel 或纱线: yarn add react-spring-3d-carousel 然后像这样导入Carousel组件: import Carousel from 'react-spring-3d-carousel'; 该组件唯一需要运行的...

    slick-carousel:使用 Slick javascript 库生成轮播的 Wordpress 插件

    === 圆滑的旋转木马 === 贡献者:lloydwatkin 标签:carousel,slick 至少需要:4.0.0 稳定标签:trunk 许可证:MIT Wordpress 的轮播插件。 使用 carousel 库。简码选项所有这些选项也可以通过设置页面进行设置,...

Global site tag (gtag.js) - Google Analytics