WPF轮播图动画交互 动画缩放展示图片

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