如果展示类似这种比较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();
}
}
}
作者：菩提树下的杨过
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
