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();
        }
    }
}