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; }
}
}
完啦，这次为了方便，代码全都放在这两个文件里了。。
效果图：
【文中素材图片来源于网络，侵删】
