WPF+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; }}
}

视图

定义用户控件：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:AduButtonIconx: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>

后台代码：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;}}
}

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>

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>

运行效果

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

WPF+AduSkin实现图片轮播相关推荐

网站项目必备——12款白富美型 jQuery 图片轮播插件
转自:http://www.cnblogs.com/lhb25/archive/2013/01/06/jquery-image-carousel-effect.html 图片轮播是网站中的常用功能,用 ...
DEDECMS后台上传banner图控制图片轮播
将图片轮播做到后台控制,无论是dedecms还是其他的程序都是一样的重要,方便客户自己调试,不然动不动就拿FTP开刷,一个是操作不方便,增加了使用上的难度,另外也有一定的风险,很可能由于操作生疏,误操 ...
android首页图片轮播效果,Android_Android自动播放Banner图片轮播效果，先看一下效果图支持本地图 - phpStudy...
Android自动播放Banner图片轮播效果先看一下效果图支持本地图片以及网络图片or本地网络混合. 使用方式: android:id="@+id/banner" andro ...
淘宝装修：第一日 —— 图片轮播
先添加一个自定义内容区,进入源码编辑,如下图所示: 添加源码如下: <TABLE border=0 cellSpacing=0 cellPadding=0 width=773 height=22 ...
电子商店——图片轮播
电子商店的图片轮播功能,有以下特点 1. 高性能 2. 美观大方 3. 兼容IE 6.IE 8+和Firefox 3+等浏览器 4. 总体积要小(除图片外)3k 5. js简单易懂(40行) 首先让我 ...
html5圆形图片轮播,jQuery超酷响应式圆形图片轮播图特效
mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件.该轮播图特效可以将图片以圆形图片显示,然后使图片无限循环形成轮播图或旋转木马特效.该轮播图插件的特点有: 使用简单在同一个 ...
网页制作使用CSS样式制作轮播教程,静态网页设计与开发 1.案例——CSS3制作图片轮播图（4）使用纯CSS3代码实现简单的图片轮播——分步骤实现.docx...
使用纯CSS3代码实现简单的图片轮播设计思路: 以5张图片为例: 1.基本布局: 通过设置每张图片的尺寸和父容器的尺寸,从而将5张图片横向并排放入一个div容器(#photos)内.所有图片设置统一 ...
简单html图片轮播_web前端入门到实战：简单的图片轮播
效果: 功能: 1.左右箭头切换 2.状态控制点切换 3.鼠标悬念 4.自动轮播 HTML: <div class="zh-carousel"><div clas ...
jQuery可悬停控制图片轮播
2019独角兽企业重金招聘Python工程师标准>>> 图片轮播相信很多人你也见过,各大网站上基本上都有,那么究竟是怎么实现的呢?不废话,直接上代码: <div id=&quo ...