WPF輪播圖動畫交互 動畫縮放展示圖片

• 效果如下圖：
  
  XAML代碼：

<Window x:Class="Caroursel.MainWindow"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:local="clr-namespace:Caroursel"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"Title="MainWindow"Width="1000"Height="450"mc:Ignorable="d"><Window.Resources><Style x:Key="MaskGrid" TargetType="Grid"><Setter Property="Background" Value="#5B000000" /><Style.Triggers><Trigger Property="IsMouseOver" Value="True"><Trigger.EnterActions><BeginStoryboard><Storyboard><DoubleAnimation Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.2" /></Storyboard></BeginStoryboard></Trigger.EnterActions><Trigger.ExitActions><BeginStoryboard><Storyboard><DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.2" /></Storyboard></BeginStoryboard></Trigger.ExitActions></Trigger></Style.Triggers></Style><Style x:Key="ContainerGrid" TargetType="Grid"><EventSetter Event="MouseEnter" Handler="Grid_MouseEnter" /><EventSetter Event="MouseLeave" Handler="Grid_MouseLeave" /></Style><Style TargetType="TextBlock"><Setter Property="FontSize" Value="18" /><Setter Property="FontWeight" Value="Bold" /><Setter Property="Foreground" Value="White" /><Setter Property="TextWrapping" Value="Wrap" /><Setter Property="Width" Value="18" /><Setter Property="VerticalAlignment" Value="Center" /><Setter Property="HorizontalAlignment" Value="Center" /></Style></Window.Resources><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="Auto" /><ColumnDefinition Width="Auto" /><ColumnDefinition Width="Auto" /><ColumnDefinition Width="Auto" /><ColumnDefinition Width="Auto" /></Grid.ColumnDefinitions><Grid x:Name="Grid1"Grid.Column="0"Width="200"Style="{StaticResource ContainerGrid}"><Image HorizontalAlignment="Center"VerticalAlignment="Center"Source="1.jpg"Stretch="UniformToFill" /><Grid Style="{StaticResource MaskGrid}"><TextBlock Text="迅捷斥候" /></Grid></Grid><Grid x:Name="Grid2"Grid.Column="1"Width="200"Style="{StaticResource ContainerGrid}"><Image HorizontalAlignment="Center"VerticalAlignment="Center"Source="2.jpg"Stretch="UniformToFill" /><Grid Style="{StaticResource MaskGrid}"><TextBlock Text="黑暗之女" /></Grid></Grid><Grid x:Name="Grid3"Grid.Column="2"Width="200"Style="{StaticResource ContainerGrid}"><Image HorizontalAlignment="Center"VerticalAlignment="Center"Source="3.jpg"Stretch="UniformToFill" /><Grid Style="{StaticResource MaskGrid}"><TextBlock Text="刀鋒舞者" /></Grid></Grid><Grid x:Name="Grid4"Grid.Column="3"Width="200"Style="{StaticResource ContainerGrid}"><Image HorizontalAlignment="Center"VerticalAlignment="Center"Source="4.jpg"Stretch="UniformToFill" /><Grid Style="{StaticResource MaskGrid}"><TextBlock Text="詭術妖姬" /></Grid></Grid><Grid x:Name="Grid5"Grid.Column="4"Width="200"Style="{StaticResource ContainerGrid}"><Image HorizontalAlignment="Right"VerticalAlignment="Center"Source="5.jpg"Stretch="UniformToFill" /><Grid Style="{StaticResource MaskGrid}"><TextBlock Text="潮汐海靈" /></Grid></Grid></Grid>
</Window>

C#代碼：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;namespace Caroursel
{/// <summary>/// MainWindow.xaml 的交互邏輯/// </summary>public partial class MainWindow : Window{public MainWindow(){InitializeComponent();SizeChanged += MainWindow_SizeChanged;}private void MainWindow_SizeChanged(object sender, SizeChangedEventArgs e){var targetWidth = Width / 5;DoubleAnimation da = new DoubleAnimation(targetWidth, new Duration(TimeSpan.FromSeconds(0.25)));Grid1.BeginAnimation(WidthProperty, da);Grid2.BeginAnimation(WidthProperty, da);Grid3.BeginAnimation(WidthProperty, da);Grid4.BeginAnimation(WidthProperty, da);Grid5.BeginAnimation(WidthProperty, da);}private void Grid_MouseEnter(object sender, MouseEventArgs e){var grid = sender as Grid;var targetWidth = Width / 5 * 3;DoubleAnimation da = new DoubleAnimation(targetWidth, new Duration(TimeSpan.FromSeconds(0.3)));da.EasingFunction = new CubicEase() { EasingMode = EasingMode.EaseOut };grid.BeginAnimation(WidthProperty, da);var remainingWidth = Width - targetWidth;targetWidth = remainingWidth / 4;da = new DoubleAnimation(targetWidth, new Duration(TimeSpan.FromSeconds(0.25)));if (grid != Grid1){Grid1.BeginAnimation(WidthProperty, da);}if (grid != Grid2){Grid2.BeginAnimation(WidthProperty, da);}if (grid != Grid3){Grid3.BeginAnimation(WidthProperty, da);}if (grid != Grid4){Grid4.BeginAnimation(WidthProperty, da);}if (grid != Grid5){Grid5.BeginAnimation(WidthProperty, da);}}private void Grid_MouseLeave(object sender, MouseEventArgs e){var targetWidth = Width / 5;DoubleAnimation da = new DoubleAnimation(targetWidth, new Duration(TimeSpan.FromSeconds(0.25)));Grid1.BeginAnimation(WidthProperty, da);Grid2.BeginAnimation(WidthProperty, da);Grid3.BeginAnimation(WidthProperty, da);Grid4.BeginAnimation(WidthProperty, da);Grid5.BeginAnimation(WidthProperty, da);}}
}