WP8中自定义Lrc歌词同步显示控件（二）

　　在上一篇文章 WP8中自定义Lrc歌词同步显示控件（一）介绍了我在WP中实现自定义Lrc歌词显示控件的思路,在这一篇文章中主要来介绍具体的Lrc歌词同步显示控件的具体实现。

      首先，回顾一下上一篇中所提及的大体思路：在控件的布局中用3个TextBlock来显示当前正在播放的那句歌词，以及它的前面部分歌词和后面部门歌词，在布局的外层用一个ScrollViewer来控制滚动，使用户能够通过滑动控件来查看整体歌词，控件随播放进度来调整ScrollViewer的竖直滚动偏移量，使正在播放的那句歌词适中居中显示。

      在具体实现前，我们来定义下歌词相关的一些数据结构，因为的我们的控件依赖它来工作。我们把每一句歌词成为一个歌词片段，数据结构为LrcFragment,它包含了该句歌词的开始时间，结束时间，歌词内容等（在这里时间单位为毫秒），定义如下：

    public class LrcFragment
    {
        public long StartTime { get; set; }  //开始时间
        public long EndTime { get; set; }  //结束时间
        public long Duration { get; private set; } //持续时间
        public string LrcText { get; set; } //歌词内容

        public LrcFragment(string text, long start, long duration)
        {
            StartTime = start;
            Duration = duration;
            LrcText = text;
        }

        public LrcFragment(string text, long start)
        {
            StartTime = start;
            Duration = 0;
            LrcText = text;
        }
    }

那么一首歌的歌词就是由许多歌词片段构成的一个集合，我们把整首歌歌词的数据结构定义为Lyric,它包含了一个歌词片段集合属性，以及歌词解析相关的方法。定义如下：

    public class Lyric
    {
        public List<LrcFragment> Fragments { get; private set; }

        public Lyric(string lrcText)
        {
            Fragments = new List<LrcFragment>();
            ParseLyricText(lrcText);
        }

        //解析整首歌词内容
        public void ParseLyricText(string lrcText)
        {
            StringReader reader = new StringReader(lrcText);
            string line = null;
           //一行一行的解析
            while ((line = reader.ReadLine()) != null)
            {
                ParseLine(line.Trim());
            }

            //对fragments按开始时间进行排序
            Fragments.Sort(new LrcFragmentComparer());
            //对Fragments集合中的每个Fragment计算结束时间
            ComputeEndTime();

        }

        // 根据播放进度来获得当前进度下所应播放的歌词片段index
        // progress为播放进度，成功返回true
        public bool GetFragmentIndex(long progress, out int index)
        {
            ..............
            ..............
        }
        
        ..............
        ..............
    }

　　现在我们根据上文提到的思路来具体实现Lrc歌词同步显示控件。因为是自定义的控件，我们使它继承自System.Windows.Controls.Control

 public class LrcDisplayControl : Control

在项目中添加Themes文件夹，并在其中添加名为Generic.xaml的文件，我们在其中定义LrcDisplayControl的外观布局：

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:controls="clr-namespace:ControlsLib.Controls"
    >
    <!-- LrcDisplayControl-->
    <Style TargetType="controls:LrcDisplayControl">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="controls:LrcDisplayControl">
                    <ScrollViewer x:Name="RootScrollViewer" 
　　　　　　　　　　　　　　　　　　　　 Background="{TemplateBinding Background}" >
                        <Grid x:Name="RootGrid" >
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <TextBlock x:Name="TopRowText" Grid.Row="0"
　　　　　　　　　　　　　　　　　　　　　　　 TextWrapping="Wrap" VerticalAlignment="Bottom"
　　　　　　　　　　　　　　　　　　　　　　　 FontSize="{TemplateBinding FontSize}"
　　　　　　　　　　　　　　　　　　　　　　   TextAlignment="Center" 
　　　　　　　　　　　　　　　　　　　　　　　　Foreground="{TemplateBinding Foreground}" 
　　　　　　　　　　　　　　　　　　　　　　   FontFamily="{TemplateBinding FontFamily}" 
　　　　　　　　　　　　　　　　　　　　　　　　LineHeight="{TemplateBinding LineHeight}"/>
                            <TextBlock x:Name="MidRowText" Grid.Row="1"  TextWrapping="Wrap"
　　　　　　　　　　　　　　　　　　　　　　  FontSize="{TemplateBinding FontSize}" 
　　　　　　　　　　　　　　　　　　　　　　　Foreground="{TemplateBinding EmphasisBrush}"
                                       TextAlignment="Center"
　　　　　　　　　　　　　　　　　　　　　　  FontFamily="{TemplateBinding FontFamily}" 
　　　　　　　　　　　　　　　　　　　　　　　LineHeight="{TemplateBinding LineHeight}"/>
                            <TextBlock x:Name="BottomRowText" Grid.Row="2"  TextWrapping="Wrap"  
　　　　　　　　　　　　　　　　　　　　　　　　FontSize="{TemplateBinding FontSize}"
　　　　　　　　　　　　　　　　　　　　　　　  VerticalAlignment="Top"
　　　　　　　　　　　　　　　　　　　　　　　　TextAlignment="Center"
　　　　　　　　　　　　　　　　　　　　　　　　 Foreground="{TemplateBinding Foreground}" 
　　　　　　　　　　　　　　　　　　　　　　　　FontFamily="{TemplateBinding FontFamily}"
                                        LineHeight="{TemplateBinding LineHeight}"
                                       
                                       />
                        </Grid>
                    </ScrollViewer>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>

 在LrcDisplayControl中重写OnApplyTemplate方法，并查找，实例化相关子控件

        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();

            RootScrollViewer = GetTemplateChild("RootScrollViewer") as ScrollViewer;
            RootGrid = GetTemplateChild("RootGrid") as Grid;
            TopTextBlock = GetTemplateChild("TopRowText") as TextBlock;
            MidTextBlock = GetTemplateChild("MidRowText") as TextBlock;
            BottomTextBlock = GetTemplateChild("BottomRowText") as TextBlock;
        }

为控件定义依赖性属性LrcText ,使用户能够将歌曲的整个Lrc歌词绑定到控件

        public string LrcText
        {
            get { return (string)GetValue(LrcTextProperty); }
            set { SetValue(LrcTextProperty, value); }
        }

        public static readonly DependencyProperty LrcTextProperty =
            DependencyProperty.Register("LrcText", typeof(string), typeof(LrcDisplayControl), new PropertyMetadata(new PropertyChangedCallback(OnLrcTextPropertyChanged)));

        private static void OnLrcTextPropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs args)
        {
            LrcDisplayControl lrcControl = sender as LrcDisplayControl;
            if (lrcControl != null)
            {
                lrcControl.UpdateLrcText();
            }
        }

从上面可以看出，当LrcText属性变化时，我们调用了控件的UpdateLrcText方法，因为歌词已经改变了，所以需要对控件进行更新，比如重新解析歌词，初始化各TextBlock的Text属性值等

        private void UpdateLrcText()
        {
            if (LrcText == null)
            {
                //歌词为空，则清空相关数据，歌词TextBlock.Text也清空
                Lrc = null;
                if (TopTextBlock != null)
                {
                    TopTextBlock.Text = MidTextBlock.Text = BottomTextBlock.Text = null;
                }
                return;
            }

           //歌词变化了，则重新解析歌词
            Lrc = new Lyric(LrcText);
            //并把让BottomTextBlock显示第一句歌词，TopTextBlock,MidTextBlock显示空
            if (TopTextBlock != null)
            {
                TopTextBlock.Text = MidTextBlock.Text = null;

                if (Lrc.Fragments != null)
                {
                    BottomTextBlock.Text = ComposeLrcFraments(0);
                }
                else
                {
                    BottomTextBlock.Text = null;
                }
            }
        }

 为了让控件能随播放进度调整显示状态，我们在定义一个进度依赖项属性，使外界能将播放进度绑定到该属性;

        public long Progress
        {
            get { return (long)GetValue(ProgressProperty); }
            set { SetValue(ProgressProperty, value); }
        }

        public static readonly DependencyProperty ProgressProperty =
            DependencyProperty.Register("Progress", typeof(long), typeof(LrcDisplayControl), new PropertyMetadata(new PropertyChangedCallback(OnProgressPropertyChanged)));

        private static void OnProgressPropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs args)
        {
            LrcDisplayControl lrcControl = sender as LrcDisplayControl;
            if (lrcControl != null)
            {
　　　　　　　　　 //进度变化了，调用控件相应方法，通知其更新
                lrcControl.OnProgressChanged();
            }
        }

当播放进度变化时，调整控件使其显示正确的歌词

        
       //播放进度变化时调用，调整控件
        private void OnProgressChanged()
        {
            if (Lrc == null || Lrc.Fragments.Count == 0)
            {
                return;
            }

            int curFragIndex;
           //查找当前播放进度下应显示的歌词片段index,如果和当前显示的index不同，则更新
            if (Lrc.GetFragmentIndex(Progress, out curFragIndex) && curFragIndex != CurFramentIndex)
            {

                TopTextBlock.Text = ComposeLrcFraments(0, curFragIndex - 1);
                MidTextBlock.Text = Lrc.Fragments[curFragIndex].LrcText;
                BottomTextBlock.Text = ComposeLrcFraments(curFragIndex + 1);

                CurFramentIndex = curFragIndex;
                UpdateVerticalScroll();
            }
        }

至此控件功能上已经完成，为了控件更具可定制性，再定义一些依赖性属性，比如高亮的颜色，歌词行高度等

        /// <summary>
        /// 歌词高亮Brush
        /// </summary>
        public Brush EmphasisBrush
        {
            get { return (Brush)GetValue(EmphasisBrushProperty); }
            set { SetValue(EmphasisBrushProperty, value); }
        }

        public static readonly DependencyProperty EmphasisBrushProperty =
            DependencyProperty.Register("EmphasisBrush", typeof(Brush), typeof(LrcDisplayControl), null);
        

        /// <summary>
        /// 歌词行高度
        /// </summary>
        public double LineHeight
        {
            get { return (double)GetValue(LineHeightProperty); }
            set { SetValue(LineHeightProperty, value); }
        }

        public static readonly DependencyProperty LineHeightProperty =
            DependencyProperty.Register("LineHeight", typeof(double), typeof(LrcDisplayControl), null);

最后在我们的布局中就可以直接使用这个控件了

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" >
               
                <controls:LrcDisplayControl Grid.Row="1"
                                            Name="LrcControl" 
                                            FontSize="24"
                                            EmphasisBrush="Yellow"
                                            Progress="{Binding Progress}"
                                            LrcText="{Binding Lrc}"
                                            />      
        </Grid>