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

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

效果图：

【文中素材图片来源于网络，侵删】

号外：

为了方便WPF爱好者交流经验，我建了个群，有兴趣的可以加一下哦，

加不上的小伙伴，可以加我微信，我拉你进群~