WPF 模仿QQ音乐首页歌单效果

qq音乐桌面版做的效果感觉很不错，今天就模仿一下它首页歌单的效果，从简单做起。。。

看一下效果：

，其实也很简单，就是布局和动画，触发器。。。还用到了ItemsControl

下面就看看代码：

MainWindow的xaml代码：

<Window x:Class="WPFDemos.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:WPFDemos"mc:Ignorable="d"x:Name="widnow"WindowStartupLocation="CenterScreen"Title="title" Height="570" Width="1000"><Window.Resources><RectangleGeometry x:Key="clip" Rect="0 0 165 165" RadiusX="10" RadiusY="10"/><Style TargetType="ItemsControl" x:Key="style1"><Setter Property="FontFamily" Value="微软雅黑"/><Setter Property="FontSize" Value="13"/><Setter Property="ItemTemplate"><Setter.Value><DataTemplate DataType="Item"><StackPanel Margin="10"><Border x:Name="border" CornerRadius="10" ClipToBounds="True" Background="Transparent" Width="165" Height="165" Clip="{StaticResource clip}"><Grid><Image Source="{Binding ImgPath}" Stretch="UniformToFill"/><Border x:Name="play" Background="#77000000" Visibility="Collapsed"><Viewbox Width="50" Height="50" x:Name="viewbox"><Path x:Name="playIcon" Fill="White" Data="M512 5.12C231.936 5.12 5.12 231.936 5.12 512s226.816 506.88 506.88 506.88 506.88-226.816 506.88-506.88-226.816-506.88-506.88-506.88z m214.528 524.288L445.44 755.2c-14.336 11.776-35.84 1.536-35.84-16.896V285.696c0-18.432 21.504-28.672 35.84-16.896l281.088 226.304c10.752 8.704 10.752 25.088 0 34.304z"/></Viewbox></Border><Border x:Name="countTip" Background="#1F1018" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="10" CornerRadius="11" Padding="7 3"><StackPanel Orientation="Horizontal" VerticalAlignment="Center"><Viewbox Width="16" Height="16"><Path Fill="White" Data="M899.729695 470.846718c0.775666-9.406231 1.726318-18.811438 1.726318-28.41926 0-207.385281-174.362166-375.516536-389.456013-375.516536-215.08873 0-389.456013 168.130232-389.456013 375.516536 0 9.643638 0.945535 19.013029 1.726318 28.41926-34.059724 19.031449-57.360406 55.004755-57.360406 96.789417l0 166.902264c0 61.440327 49.821709 111.255897 111.274316 111.255897 0 0 111.375623 0.183172 111.274316 0 59.120492-2.62171 111.268176-51.466162 111.268176-111.255897L400.726707 567.637158c0-61.458747-49.815569-111.292736-111.268176-111.292736 0 0-104.131639 0-111.274316 0 0-194.441481 149.45387-333.822948 333.816808-333.822948s334.99975 138.190339 333.816808 333.822948c-0.022513 4.730745-111.268176 0-111.268176 0-61.457724 0-111.274316 49.833989-111.274316 111.292736l0 166.902264c0 59.789735 52.147684 108.634186 111.274316 111.255897-0.102331 0.183172 55.634088 0 55.634088 0l0 83.47825c0 15.328104 12.456706 27.813462 27.817556 27.813462 15.365966 0 27.817556-12.486382 27.817556-27.813462l0-83.47825c61.457724 0 111.274316-49.815569 111.274316-111.255897L957.093171 567.637158C957.090101 525.851473 933.789419 489.87919 899.729695 470.846718z"/></Viewbox><TextBlock Margin="2 0" Text="{Binding Count,StringFormat={}{0}万}" Foreground="White" FontSize="12" VerticalAlignment="Center"/></StackPanel></Border></Grid></Border><TextBlock x:Name="title" Text="{Binding Title}" Margin="0 10"/></StackPanel><DataTemplate.Triggers><EventTrigger RoutedEvent="MouseEnter" SourceName="border"><BeginStoryboard ><Storyboard><ThicknessAnimation Duration="0:0:0.1" To="0 -8 0 8" Storyboard.TargetProperty="Margin" Storyboard.TargetName="border"/></Storyboard></BeginStoryboard></EventTrigger><EventTrigger RoutedEvent="MouseLeave" SourceName="border"><BeginStoryboard ><Storyboard><ThicknessAnimation Duration="0:0:0.1" To="0 0 0 0" Storyboard.TargetProperty="Margin" Storyboard.TargetName="border"/></Storyboard></BeginStoryboard></EventTrigger><Trigger Property="IsMouseOver" Value="True" SourceName="border"><Setter Property="Visibility" Value="Visible" TargetName="play"/><Setter Property="Visibility" Value="Collapsed" TargetName="countTip"/></Trigger><Trigger Property="IsMouseOver" Value="True" SourceName="viewbox"><Setter Property="Fill" Value="#1ECE9C" TargetName="playIcon"/></Trigger><Trigger Property="IsMouseOver" Value="True" SourceName="title"><Setter Property="Foreground" Value="#1ECE9C" TargetName="title"/></Trigger></DataTemplate.Triggers></DataTemplate></Setter.Value></Setter>
</Style></Window.Resources><StackPanel Margin="10 30"><TextBlock Text=" 你的歌单保藏库" FontSize="23" FontFamily="微软雅黑 "/><ItemsControl ItemsSource="{Binding Items,ElementName=widnow}" Style="{StaticResource style1}"><ItemsControl.ItemsPanel><ItemsPanelTemplate><WrapPanel Orientation="Horizontal"></WrapPanel></ItemsPanelTemplate></ItemsControl.ItemsPanel></ItemsControl></StackPanel>
</Window>

MainWindow的后台代码：

using System.Collections.Generic;
using System.ComponentModel;
using System.Windows;namespace WPFDemos
{public partial class MainWindow : Window, INotifyPropertyChanged{public MainWindow(){InitializeComponent();DataContext = this;Items = new List<object>(){new Item{ ImgPath=@"D:\bizhi\清纯\6-9.jpg",Title="音乐时节 | 秋分",Count=138.6},new Item{ ImgPath=@"D:\bizhi\清纯\9-7.jpg",Title="中文小清新 | 恋爱告白的甜蜜",Count=9.5},new Item{ ImgPath=@"D:\bizhi\清纯\9-8.jpg",Title="学习工作阅读 | 柔和静心の轻",Count=1641.7},new Item{ ImgPath=@"D:\bizhi\清纯\2-5.jpg",Title="[韩语快歌]提神醒脑必备",Count=1257.4},new Item{ ImgPath=@"D:\bizhi\清纯\3-1.jpg",Title="古风：韶华白首，不过浮生一阙",Count=123.4},new Item{ ImgPath=@"D:\bizhi\清纯\23-9.jpg",Title="学习工作阅读 | 柔和静心の轻",Count=191.4},new Item{ ImgPath=@"D:\bizhi\清纯\28-6.jpg",Title="学习工作阅读 | 柔和静心の轻",Count=676.5},new Item{ ImgPath=@"D:\bizhi\清纯\28-1.jpg",Title="[韩语快歌]提神醒脑必备",Count=676.5},new Item{ ImgPath=@"D:\bizhi\清纯\32-4.jpg",Title="学习工作阅读 | 柔和静心の轻",Count=676.5},new Item{ ImgPath=@"D:\bizhi\清纯\34-8.jpg",Title="古风：韶华白首，不过浮生一阙",Count=676.5},};}public event PropertyChangedEventHandler PropertyChanged;private List<object> _items;public List<object> Items{get { return _items; }set{_items = value;PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Items)));}}}public class Item{public string ImgPath { get; set; }public string Title { get; set; }public double Count { get; set; }}
}

完啦，这次为了方便，代码全都放在这两个文件里了。。

效果图：