wpf 音乐盒制作（本地音乐实现）

最新推荐文章于 2022-02-24 00:01:56 发布

原创

最新推荐文章于 2022-02-24 00:01:56 发布 · 1.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#wpf 音乐盒小制作 #本地音乐实现

博主分享了自己使用WPF制作音乐盒的过程，已实现本地音乐播放，包括主要功能的代码实现，但歌词滚动和歌手头像加载尚未完成。文章提供了已实现功能的效果图，并邀请读者在优快云博主博客上获取源码或交流学习经验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在网上看见很多人用wpf制作的音乐盒各式各样，有些已经和酷狗，酷我等的界面类似，至于功能如何无法得知，一时心里痒痒的就自己试着边学边做了起来，确实收获不少，除了歌词滚动没有写完，和歌手头像加载没有完成，现在已经实现了本地音乐的所有功能，其他的慢慢抽时间编写，现在将实现的功能写上共需要学习的伙伴查看，需要下载源码或者讲解请去优快云本人的博客上面查看下载，地址会连接到音乐盒的工具中的关于作者中。废话不多说，先上效果图，当然我不是美工出身，界面的色彩搭配什么不是很好：

要问桌面的美女是谁，这个真不知道，觉得背景单调，就网上随便贴了一张，哪位美女慷慨可以发张照片过来换掉，免得人家告我进犯肖像权。
该音乐盒用.net 框架，framework 4.0要运行需先安装 framework 4.0。wpf的优点这里就不多说了，它的界面优美是winform无法比拟的，并将界面和后台代码实现分开，有利于开发。
分解界面搭建：
大家平时看到各种优美的界面，其实wpf本身自己的窗体并不是这样的优美，跟winform类似，但是我们可以进行各种设置去修改。

<Window x:Class="MyMusic.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="我的音乐盒" Height="650" Width="825" WindowStyle="None" AllowsTransparency="True" Background="Transparent" >
后面的三个属性很重要，如果将窗体设成无边框，将背景透明，这时候的窗体是无法移动的，那么我们就要想办法去解决，怎么办
<Grid>

<Border.Background>

<LinearGradientBrush.GradientStops>

</LinearGradientBrush.GradientStops>

</LinearGradientBrush>

</Border.Background>

</Border>
在grid中加上Border，可以渲染自己喜欢的背景色，这就是wpf的美处，它可以自由的渐变色，然后将border的鼠标事件绑定，肯定是鼠标左键点击移动，平常人们的习惯。绑定的事件很简单，就是检测到鼠标左键按下时移动执行DragMove()事件。
后台代码

/// <summary>

/// 监听鼠标，实现窗口移动，因为透明的窗体不能移动

/// </summary>

/// <param name="sender"></param>

/// <param name="e"></param>

private void Border_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

this.DragMove();

}
在此还可以设置窗体的四个角的圆滑度，第二个属性CornerRadius="1"就是设置角度，我设置的是1，越大角度越圆滑。
做到此处基本的窗体已经完成，可以实现一个简单的有自己背景的不同形状的窗体，并相应鼠标移动事件。
然后就是布局了，一般需要将grid分割这样好布局我的分割：
<Grid>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

然后就是控件选择一般会先选择Canvas，可以自由放置的容器，我这里选择了canvas,
然后的布局就不多讲，比较简单，直接贴代码：

</ComboBox>

<Slider Canvas.Left="233" Canvas.Top="89" Height="27" Name="slider1" Width="75" Orientation="Horizontal" HorizontalContentAlignment="Center" VerticalContentAlignment="Top" Va