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

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

• 效果如下图：
  
  
  
  XAML代码：
  

1. <Window x:Class="Caroursel.MainWindow"
2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5.         xmlns:local="clr-namespace:Caroursel"
6.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
7.         Title="MainWindow"
8.         Width="1000"
9.         Height="450"
10.         mc:Ignorable="d">
11.     <Window.Resources>
12.         <Style x:Key="MaskGrid" TargetType="Grid">
13.             <Setter Property="Background" Value="#5B000000" />
14.             <Style.Triggers>
15.                 <Trigger Property="IsMouseOver" Value="True">
16.                     <Trigger.EnterActions>
17.                         <BeginStoryboard>
18.                             <Storyboard>
19.                                 <DoubleAnimation Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.2" />
20.                             </Storyboard>
21.                         </BeginStoryboard>
22.                     </Trigger.EnterActions>
23.                     <Trigger.ExitActions>
24.                         <BeginStoryboard>
25.                             <Storyboard>
26.                                 <DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.2" />
27.                             </Storyboard>
28.                         </BeginStoryboard>
29.                     </Trigger.ExitActions>
30.                 </Trigger>
31.             </Style.Triggers>
32.         </Style>
33.         <Style x:Key="ContainerGrid" TargetType="Grid">
34.             <EventSetter Event="MouseEnter" Handler="Grid_MouseEnter" />
35.             <EventSetter Event="MouseLeave" Handler="Grid_MouseLeave" />
36.         </Style>
37.         <Style TargetType="TextBlock">
38.             <Setter Property="FontSize" Value="18" />
39.             <Setter Property="FontWeight" Value="Bold" />
40.             <Setter Property="Foreground" Value="White" />
41.             <Setter Property="TextWrapping" Value="Wrap" />
42.             <Setter Property="Width" Value="18" />
43.             <Setter Property="VerticalAlignment" Value="Center" />
44.             <Setter Property="HorizontalAlignment" Value="Center" />
45.         </Style>
46.     </Window.Resources>
47.     <Grid>
48.         <Grid.ColumnDefinitions>
49.             <ColumnDefinition Width="Auto" />
50.             <ColumnDefinition Width="Auto" />
51.             <ColumnDefinition Width="Auto" />
52.             <ColumnDefinition Width="Auto" />
53.             <ColumnDefinition Width="Auto" />
54.         </Grid.ColumnDefinitions>
55.         <Grid x:Name="Grid1"
56.               Grid.Column="0"
57.               Width="200"
58.               Style="{StaticResource ContainerGrid}">
59.             <Image HorizontalAlignment="Center"
60.                    VerticalAlignment="Center"
61.                    Source="1.jpg"
62.                    Stretch="UniformToFill" />
63.             <Grid Style="{StaticResource MaskGrid}">
64.                 <TextBlock Text="迅捷斥候" />
65.             </Grid>
67.         </Grid>
69.         <Grid x:Name="Grid2"
70.               Grid.Column="1"
71.               Width="200"
72.               Style="{StaticResource ContainerGrid}">
73.             <Image HorizontalAlignment="Center"
74.                    VerticalAlignment="Center"
75.                    Source="2.jpg"
76.                    Stretch="UniformToFill" />
77.             <Grid Style="{StaticResource MaskGrid}">
78.                 <TextBlock Text="黑暗之女" />
79.             </Grid>
80.         </Grid>
82.         <Grid x:Name="Grid3"
83.               Grid.Column="2"
84.               Width="200"
85.               Style="{StaticResource ContainerGrid}">
86.             <Image HorizontalAlignment="Center"
87.                    VerticalAlignment="Center"
88.                    Source="3.jpg"
89.                    Stretch="UniformToFill" />
90.             <Grid Style="{StaticResource MaskGrid}">
91.                 <TextBlock Text="刀锋舞者" />
92.             </Grid>
93.         </Grid>
95.         <Grid x:Name="Grid4"
96.               Grid.Column="3"
97.               Width="200"
98.               Style="{StaticResource ContainerGrid}">
99.             <Image HorizontalAlignment="Center"
100.                    VerticalAlignment="Center"
101.                    Source="4.jpg"
102.                    Stretch="UniformToFill" />
103.             <Grid Style="{StaticResource MaskGrid}">
104.                 <TextBlock Text="诡术妖姬" />
105.             </Grid>
106.         </Grid>
108.         <Grid x:Name="Grid5"
109.               Grid.Column="4"
110.               Width="200"
111.               Style="{StaticResource ContainerGrid}">
112.             <Image HorizontalAlignment="Right"
113.                    VerticalAlignment="Center"
114.                    Source="5.jpg"
115.                    Stretch="UniformToFill" />
116.             <Grid Style="{StaticResource MaskGrid}">
117.                 <TextBlock Text="潮汐海灵" />
118.             </Grid>
119.         </Grid>
120.     </Grid>
121. </Window>

复制代码

C#代码：

1. using System;
2. using System.Collections.Generic;
3. using System.Linq;
4. using System.Text;
5. using System.Threading.Tasks;
6. using System.Windows;
7. using System.Windows.Controls;
8. using System.Windows.Data;
9. using System.Windows.Documents;
10. using System.Windows.Input;
11. using System.Windows.Media;
12. using System.Windows.Media.Animation;
13. using System.Windows.Media.Imaging;
14. using System.Windows.Navigation;
15. using System.Windows.Shapes;
17. namespace Caroursel
18. {
19.         /// <summary>
20.         /// MainWindow.xaml 的交互逻辑
21.         /// </summary>
22.         public partial class MainWindow : Window
23.         {
24.                 public MainWindow()
25.                 {
26.                         InitializeComponent();
27.                         SizeChanged += MainWindow_SizeChanged;
28.                 }
30.                 private void MainWindow_SizeChanged(object sender, SizeChangedEventArgs e)
31.                 {
32.                         var targetWidth = Width / 5;
33.                         DoubleAnimation da = new DoubleAnimation(targetWidth, new Duration(TimeSpan.FromSeconds(0.25)));
34.                         Grid1.BeginAnimation(WidthProperty, da);
35.                         Grid2.BeginAnimation(WidthProperty, da);
36.                         Grid3.BeginAnimation(WidthProperty, da);
37.                         Grid4.BeginAnimation(WidthProperty, da);
38.                         Grid5.BeginAnimation(WidthProperty, da);
39.                 }
41.                 private void Grid_MouseEnter(object sender, MouseEventArgs e)
42.                 {
43.                         var grid = sender as Grid;
44.                         var targetWidth = Width / 5 * 3;
45.                         DoubleAnimation da = new DoubleAnimation(targetWidth, new Duration(TimeSpan.FromSeconds(0.3)));
46.                         da.EasingFunction = new CubicEase() { EasingMode = EasingMode.EaseOut };
47.                         grid.BeginAnimation(WidthProperty, da);
49.                         var remainingWidth = Width - targetWidth;
50.                         targetWidth = remainingWidth / 4;
51.                         da = new DoubleAnimation(targetWidth, new Duration(TimeSpan.FromSeconds(0.25)));
52.                         if (grid != Grid1)
53.                         {
54.                                 Grid1.BeginAnimation(WidthProperty, da);
55.                         }
56.                         if (grid != Grid2)
57.                         {
58.                                 Grid2.BeginAnimation(WidthProperty, da);
59.                         }
60.                         if (grid != Grid3)
61.                         {
62.                                 Grid3.BeginAnimation(WidthProperty, da);
63.                         }
64.                         if (grid != Grid4)
65.                         {
66.                                 Grid4.BeginAnimation(WidthProperty, da);
67.                         }
68.                         if (grid != Grid5)
69.                         {
70.                                 Grid5.BeginAnimation(WidthProperty, da);
71.                         }
73.                 }
75.                 private void Grid_MouseLeave(object sender, MouseEventArgs e)
76.                 {
77.                         var targetWidth = Width / 5;
78.                         DoubleAnimation da = new DoubleAnimation(targetWidth, new Duration(TimeSpan.FromSeconds(0.25)));
79.                         Grid1.BeginAnimation(WidthProperty, da);
80.                         Grid2.BeginAnimation(WidthProperty, da);
81.                         Grid3.BeginAnimation(WidthProperty, da);
82.                         Grid4.BeginAnimation(WidthProperty, da);
83.                         Grid5.BeginAnimation(WidthProperty, da);
84.                 }
85.         }
86. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。