Silverlight Telerik控件学习:RadTransitionControl

如果展示类似这种比较cool的图片轮换效果,用RadTransitionControl控件就对了,它提供的过渡效果非常cool!

原理并不复杂,可参见以前写的 Silverlight之ListBox/Style学习笔记--ListBox版的图片轮换广告.

xaml部分:

<UserControl xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"  x:Class="Telerik.Sample.Transition"
    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"
    xmlns:common="clr-namespace:Common.Silverlight;assembly=Common.Silverlight"
    xmlns:model="clr-namespace:BusinessObject;assembly=BusinessObject"
    xmlns:telerikTranstions="clr-namespace:Telerik.Windows.Controls.TransitionEffects;assembly=Telerik.Windows.Controls"
    mc:Ignorable="d"
    d:DesignHeight="313" d:DesignWidth="500" >
    <UserControl.Resources>

        <!--列表框的样式-->
        <Style x:Key="PhotoListStyle" TargetType="ListBox">
            <Setter Property="Background" Value="{x:Null}"/>
            <Setter Property="BorderThickness" Value="0"/>
        </Style>

        <!--列表框-数据项的样式-->
        <Style x:Key="PhotoListItemStyle" TargetType="ListBoxItem">
            <Setter Property="Padding" Value="0"/>
            <Setter Property="Margin" Value="1"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Background" Value="{x:Null}"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="TabNavigation" Value="Local"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Grid  Cursor="Hand">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To=".35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="RectMouseOver"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Unselected"/>
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="RectSelected"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unfocused"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Rectangle x:Name="RectMouseOver" Fill="AliceBlue" IsHitTestVisible="False" Opacity="0"  StrokeThickness="0" Margin="1"/>
                            <Rectangle x:Name="RectSelected" Fill="AntiqueWhite" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1" StrokeThickness="0" Margin="1"/>
                            <ContentPresenter x:Name="contentPresenter" 
								ContentTemplate="{TemplateBinding ContentTemplate}" 
								Content="{TemplateBinding Content}" 
								HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
								Margin="{TemplateBinding Padding}"/>
                            <Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" Stroke="#FFEFEFEF" StrokeThickness="0.5" Visibility="Visible" d:IsHidden="True"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!--列表框-布局模板-->
        <ItemsPanelTemplate x:Key="HorizontalItemPanel">
            <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>

        <!--列表框-数据项(内容)模板-->
        <DataTemplate x:Key="DataTemplate">
            <Grid Width="22" Height="22" Background="#11FFFFFF">
                <TextBlock Text="{Binding Text}" ToolTipService.ToolTip="{Binding Description}" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontSize="10" FontWeight="Bold"></TextBlock>
            </Grid>
        </DataTemplate>

        <!--示例数据源-->
        <common:ObjectCollection x:Key="PhotosCollection">
            <model:MenuItem ImageUri="/Common.Silverlight.Resource;component/img/ireland01.jpg" Text="1" Description="爱尔兰风景1"></model:MenuItem>
            <model:MenuItem ImageUri="/Common.Silverlight.Resource;component/img/ireland02.jpg" Text="2" Description="爱尔兰风景2"></model:MenuItem>
            <model:MenuItem ImageUri="/Common.Silverlight.Resource;component/img/ireland03.jpg" Text="3" Description="爱尔兰风景3"></model:MenuItem>
            <model:MenuItem ImageUri="/Common.Silverlight.Resource;component/img/ireland04.jpg" Text="4" Description="爱尔兰风景4"></model:MenuItem>
            <model:MenuItem ImageUri="/Common.Silverlight.Resource;component/img/ireland05.jpg" Text="5" Description="爱尔兰风景5"></model:MenuItem>
        </common:ObjectCollection>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot">
        <Grid VerticalAlignment="Center" HorizontalAlignment="Center"  Width="500" Height="313" MouseEnter="Grid_MouseEnter" MouseLeave="Grid_MouseLeave">
            
            <telerik:RadTransitionControl  Content="{Binding SelectedItem, ElementName=PhotosListBox}" >
                <telerik:RadTransitionControl.Transition>
                    <telerikTranstions:MotionBlurredZoomTransition />
                </telerik:RadTransitionControl.Transition>
                <telerik:RadTransitionControl.ContentTemplate>
                    <DataTemplate>
                        <Image Source="{Binding ImageUri}" Stretch="Uniform" />
                    </DataTemplate>
                </telerik:RadTransitionControl.ContentTemplate>
            </telerik:RadTransitionControl>

            <ListBox x:Name="PhotosListBox" 
				ItemsSource="{StaticResource PhotosCollection}" 
				ItemsPanel="{StaticResource HorizontalItemPanel}" 
				ItemTemplate="{StaticResource DataTemplate}"  
				VerticalAlignment="Bottom"  
				HorizontalAlignment="Right" 
				Margin="5" 
                SelectedIndex="0" 
				ItemContainerStyle="{StaticResource PhotoListItemStyle}" 
				Style="{StaticResource PhotoListStyle}"/>
        </Grid>
        
    </Grid>
</UserControl>

后端cs代码

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Threading;

namespace Telerik.Sample
{
    public partial class Transition : UserControl
    {
       
        private DispatcherTimer timer = new DispatcherTimer();
        private bool isForward = true;

        public Transition()
        {
            InitializeComponent();

            this.Loaded += new RoutedEventHandler(Transition_Loaded);
        }

        void Transition_Loaded(object sender, RoutedEventArgs e)
        {            
            timer.Interval = new TimeSpan(0, 0, 0, 0, 2000);
            timer.Tick += new EventHandler(timer_Tick);
            timer.Start();
        }

        void timer_Tick(object sender, EventArgs e)
        {
            var _currentIndex = this.PhotosListBox.SelectedIndex;
            if (isForward) //如果 从左向右 递增 翻
            {
                if (_currentIndex < this.PhotosListBox.Items.Count - 1)
                {
                    this.PhotosListBox.SelectedIndex++;                    
                }
                else
                {
                    this.PhotosListBox.SelectedIndex--;                    
                    isForward = false;//换方向
                }
            }
            else 
            {
                if (_currentIndex > 0)
                {
                    this.PhotosListBox.SelectedIndex--;                    
                }
                else 
                {
                    this.PhotosListBox.SelectedIndex++;                   
                    isForward = true;
                }
            }            
        }

        private void Grid_MouseEnter(object sender, MouseEventArgs e)
        {
            timer.Stop();
        }

        private void Grid_MouseLeave(object sender, MouseEventArgs e)
        {
            timer.Start();
        }
    }
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏我和未来有约会

[Silverlight 4 RC]RichTextBox概览

我们知道在silverlight 4 beta的时候增加了RichTextArea的控件。做过RIA开发的朋友富媒体在动态文本的表现渲染方面是很弱的。我们看到的...

21880
来自专栏我和未来有约会

Silverlight性能优化

Silverlight性能优化 性能优化 监视性能(FPS) Silverlight的呈现性能会因指定的宿主参数和内容的复杂程度而异。 为了监视FPS的值我们...

21370
来自专栏我和未来有约会

Silverlight制作逐帧动画 v2 - part2

Silverlight制作逐帧动画 v2 - part2 在这里完善了一下算法,加入了fps的机制进去。 private string[] ...

21760
来自专栏我和未来有约会

Silverlight SEO优化

Silverlight SEO优化 SEO优化 2008年10月份,微软发布了针对Silverlight应用程序进行搜索引擎优化的指导文档,该文档描述了对Si...

20950
来自专栏我和未来有约会

Silverlight菜单控件 — CurveMenu

简介: CurveMenu是一个菜单控件,可对其内部的图片排出旋转的效果。 项目地址:http://curvemenu.codeplex.com/ 功能:...

227100
来自专栏我和未来有约会

巧用FireFox来调试Silverlight

做前端开发的朋友应该对FireFox再熟悉不过了,FireFox有一个附加组件FireBug。在HTML中可以直接写 <script type="text...

248100
来自专栏我和未来有约会

Silverlight 3.0 中的 Local Connection

现在很多的需求中需要一个插件实例和另一个实例进行通讯。在同一个页面中调用Html、js等来通讯,而这个往往有一些限制,需要专门的去设置一些权限。在Silverl...

22770
来自专栏我和未来有约会

Silverlight单元测试框架

Silverlight单元测试框架 微软的silverlight单元测试框架现在已经托管到了MSDN Code Gallery网站上,你可以在上边找到最新的Re...

24780
来自专栏我和未来有约会

Silverlight体积优化

Silverlight体积优化 Silverlight是运行在客户端的富媒体应用程序,他可以使表现形式更加的丰富多彩,相应的开发人员需要写大量的XAML、代买...

23980
来自专栏我和未来有约会

Silverlight 3.0 中的 WriteableBitmap

Silverlight 3.0 中的 WriteableBitmap 尽管矢量图形非常的强大但是在有些情况下还是需要用到位图,因为他们在运行时能得到更高的执行效...

21480

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励