打开vs之前我想得先了解下歌词的布局，鉴于我们的目的是仿照网易云音乐，所以歌词布局也借用它的好了。
打开网易云音乐的下载目录并没有找到歌词文件，可能是在线获取的，原来想放弃换QQ音乐之类的，但是不测地通过搜索引擎找到了网易云音乐获取歌词的api接口，真是喜出望外。
歌词接口地点
http://music.163.com/api/song/media?id=歌曲ID
填写歌曲的id即可获取到json格局的数据，如下：
{"songStatus":0,"lyricVersion":10,"lyric":"[by:Esida]\n[ti:起风了]\n[ar:买辣椒也用劵]\n[al:起风了]\n[by:九九Lrc歌词网～]\n\n\n[00:04.00]原曲: ヤキモチ\n\n\n\n[00:20.00]后期: 圣雨轻纱\n\n[00:24.00]海报：不 咸\n\n\n\n[00:28.64]这一路上走走停停 顺着少年漂流的陈迹\n\n[00:35.11]迈出车站的前一刻 竟有些踌躇\n\n[00:41.08]不禁笑这近乡情怯 仍无可制止\n\n[00:46.49]而长野的天 依旧这么暖 风吹起了畴前\n\n[00:52.02]畴前初识这世间 万般流连 看着天边似在眼前\n\n[00:59.50]也宁愿冲锋陷阵去走它一遍\n\n[01:04.52]如今走过这世间 万般流连 翻过岁月差别侧脸\n\n[01:11.75]措不及防冲入你的笑颜\n\n[01:17.37]我曾难自拔于世界之大 也沉湎于此中梦话 不得真假 不做挣扎 不惧笑话\n\n[01:30.39]我曾将芳华翻涌成她 也曾指尖弹出盛夏 心之所动 且就随缘去吧\n\n[01:42.40]逆着光行走 任风吹雨打\n\n[01:49.89]-M-\n\n[01:59.14]短短的路走走停停 也有了几分的距离\n\n[02:05.20]不知抚摸的是故事 还是段表情\n\n[02:11.22]也许等候的不过是 与时间为敌\n\n[02:16.94]再次看到你 微凉晨光里 笑的很甜蜜\n\n[02:22.29]畴前初识这世间 万般流连 看着天边似在眼前\n\n[02:29.58]也宁愿冲锋陷阵去走它一遍\n\n[02:34.42]如今走过这世间 万般流连 翻过岁月差别侧脸\n\n[02:41.87]措不及防冲入你的笑颜\n\n[02:47.23]我曾难自拔于世界之大 也沉湎于此中梦话 不得真假 不做挣扎 不惧笑话\n\n[03:00.13]我曾将芳华翻涌成她 也曾指尖弹出盛夏 心之所动 且就随缘去吧\n\n[03:15.51]-=-\n\n[03:38.30]晚风吹起你鬓间的鹤发 抚平回忆留下的疤 你的眼中 明暗交杂 一笑生花\n\n[03:50.53]暮色遮住你蹒跚的步骤 走进床头藏起的画 画中的你 低着头措辞\n\n[04:03.05]我仍感伤于世界之大 也沉浸于儿时情话 不剩真假 不做挣扎 无谓笑话\n\n[04:15.34]我终将芳华还给了她 连同指尖弹出的盛夏 心之所动 就随风去了\n\n[04:27.63]以爱之名 你还愿意吗\n\n[04:35.36]-E-","code":200}
我们需要用到的数据只有lyric部分。
可以看到歌词的布局很简单，[歌曲时间]歌词部分，然后用\n作为换行符。
看完歌词布局思路已经有了，首先将时间和歌词提取出来，然后播放歌曲，判断歌曲播放的进度，然后跟歌词对应的时间作交互即可。这里我们要做的控件效果如网易云音乐（以下简称网音）的效果差不久不多即可，先看下网音的效果动图：
播放到指定歌词时字体颜色酿成白色，并且跟着歌词的位置进行滚动视图使焦点相对付定位在中间的位置。
ok要做的效果和思路我们都有了，开始写代码，新建项目，新建一个用户控件定名为：LrcView，前台代码改削为：
<UserControl x:Class="网易云音乐歌词显示控件.Controls.LrcView" 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" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300"> <Grid> <ScrollViewer Name="c_scrollviewer"> <StackPanel Name="c_lrc_items"> </StackPanel> </ScrollViewer> </Grid> </UserControl>
应该很好理解，用一个scrollviewer包住stackpanel，把歌词（textblock）添加到stackpanel里。（*只要不设置固定高度stackpanel会跟着包罗的内容高度的增大而增大，这时候套个scrollviewer就可以滚动stackpanel了。
转到控件后台代码，为了便利改削歌词颜色等操纵，我们成立一个歌词模型类：