WPF+AduSkin实现图片轮播

作者：Gausst松鼠会 | 2024-05-05 06:27:02

踩

aduskin

新建WPF项目

项目结构如下：

在这里插入图片描述

安装AduSkin

选中项目右键，在管理NuGet程序包中安装AduSkin v1.1.1.9

在这里插入图片描述

模型

Carousel.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace WpfApp_Carousel.Model
{
    public class Carousel
    {
        public string name { get; set; }
        public string imgpath { get; set; }
        public string info { get; set; }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

视图

定义用户控件：Carousel.xaml，引入AduSkin命名空间：

xmlns:Metro="clr-namespace:AduSkin.Controls.Metro;assembly=AduSkin"

<UserControl x:Class="WpfApp_Carousel.View.Carousel"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WpfApp_Carousel.View"
             xmlns:Metro="clr-namespace:AduSkin.Controls.Metro;assembly=AduSkin"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <Metro:Carousel x:Name="Carousels" AutoPlay="True" AutoPlaySpeed="1000" Height="350" Width="700" VerticalAlignment="Center" HorizontalAlignment="Center">
            <Metro:Carousel.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Image x:Name="cover" RenderTransformOrigin="0.5,0.5" Source="{Binding imgpath}" Stretch="UniformToFill" >
                            <Image.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform ScaleX="1" ScaleY="1" />
                                </TransformGroup>
                            </Image.RenderTransform>
                        </Image>
                        <Metro:AduButtonIcon
                                        x:Name="PlayBtn"
                                        Background="Transparent"
                                        Margin="10,50" Width="60"
                                        HorizontalAlignment="Right" VerticalAlignment="Bottom"
                                        Command="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ItemsControl}, Path=DataContext.PlayRecommendClick}"
                                        CommandParameter="{Binding}"
                                        Foreground="#fff"
                                        Icon="{StaticResource Icon_Desgin}"
                                        IconHeight="16"
                                        IconWidth="25"
                                        Visibility="Hidden" />
                        <StackPanel  HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,0,0,50">
                            <TextBlock Text="{Binding name}" Padding="6,0" Foreground="#FFF" FontSize="20" FontWeight="Bold" HorizontalAlignment="Center"  MaxWidth="300" TextTrimming="CharacterEllipsis"/>
                            <TextBlock Text="{Binding info}" Padding="6,2" Foreground="#FFF" FontSize="14" HorizontalAlignment="Center"  MaxWidth="300" TextTrimming="CharacterEllipsis"/>
                        </StackPanel>
                    </Grid>
                    <DataTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="PlayBtn" Property="Visibility" Value="Visible" />
                        </Trigger>
                        <!-- 鼠标进入事件 -->
                        <EventTrigger RoutedEvent="UIElement.MouseEnter">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="cover" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" From="1" To="1.1" Duration="0:0:0.3" AutoReverse="False" />
                                    <DoubleAnimation Storyboard.TargetName="cover" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" From="1" To="1.1" Duration="0:0:0.3" AutoReverse="False" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <!-- 鼠标离开事件 -->
                        <EventTrigger RoutedEvent="UIElement.MouseLeave">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="cover" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" To="1" Duration="0:0:0.3" AutoReverse="False" />
                                    <DoubleAnimation Storyboard.TargetName="cover" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" To="1" Duration="0:0:0.3" AutoReverse="False" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </DataTemplate.Triggers>
                </DataTemplate>
            </Metro:Carousel.ItemTemplate>
        </Metro:Carousel>
    </Grid>
</UserControl>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

后台代码：Carousel.xaml.cs

using System.Collections.ObjectModel;
using System.Windows.Controls;

namespace WpfApp_Carousel.View
{
    /// <summary>
    /// Carousel.xaml 的交互逻辑
    /// </summary>
    public partial class Carousel : UserControl
    {
        public Carousel()
        {
            InitializeComponent();

            // 轮播图
            ObservableCollection<Model.Carousel> list = new ObservableCollection<Model.Carousel>();
            list.Add(new Model.Carousel() { imgpath = "../img/c1.jpg", name = "大自然", info = "测试" });
            list.Add(new Model.Carousel() { imgpath = "../img/c2.jpg", name = "大自然", info = "测试" });
            list.Add(new Model.Carousel() { imgpath = "../img/c3.jpg", name = "大自然", info = "测试" });
            list.Add(new Model.Carousel() { imgpath = "../img/c4.jpg", name = "大自然", info = "测试" });
            list.Add(new Model.Carousel() { imgpath = "../img/c5.jpg", name = "大自然", info = "测试" });
            this.Carousels.ItemsSource = list;
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

App.xaml

<Application x:Class="WpfApp_Carousel.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:WpfApp_Carousel"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <Geometry x:Key="Icon_Desgin">M61.141068 400.532698L3.815672 725.688936l61.197513 74.337875 83.560965-473.80941H-0.067734zM79.169555 298.333642h74.315297l-61.208801-74.315297zM359.011862 660.653173l-13.095206 74.337875 53.566168 65.024474 13.095207-74.326586zM455.171319 484.138819v0.011289H287.959077l59.3687 72.068792L107.64034 716.398113 92.908233 800.015522l347.508401-232.259293 1.648189-9.302112h0.011289l13.106496-74.304009h-0.011289zM494.490806 261.181638H187.904926l-13.095207 74.315297 61.208802 74.315298 19.676677-111.478591h157.921418l-26.201702 148.641884h74.315297l32.771884-185.793888h-0.011289z M617.224501 400.543987l-57.359263 325.156238 61.23138 74.326586 83.527098-473.80941H556.00441zM635.23041 298.344931h74.315297L648.325616 224.018345zM982.783966 224.018345h-74.326586l-32.749306 185.805177H717.7415l30.626979 37.163293H869.137893l-62.224809 353.039996 87.410504-74.326586 49.140891-278.71341h74.315298l6.558892-37.163293h-74.326586z</Geometry>
        </ResourceDictionary>
    </Application.Resources>
</Application>
1
2
3
4
5
6
7
8
9
10
11

MainWindow.xaml

引入用户控件命名空间：xmlns:c="clr-namespace:WpfApp_Carousel.View"

<Window x:Class="WpfApp_Carousel.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp_Carousel"
        xmlns:Metro="clr-namespace:AduSkin.Controls.Metro;assembly=AduSkin"
        xmlns:c="clr-namespace:WpfApp_Carousel.View"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <c:Carousel/>
    </Grid>
</Window>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

运行效果

在这里插入图片描述

其实能实现这个功能，很大程度上归功于AduSkin控件库的作者，里面还有其它封装好的控件，希望大家在Github搜索AduSkin并多多支持。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/537626