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

 最近在网上看见很多人用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 CornerRadius="1"  PreviewMouseLeftButtonDown="Border_PreviewMouseLeftButtonDown">

            <Border.Background>

                <LinearGradientBrush>

                    <LinearGradientBrush.GradientStops>

                        <GradientStop Offset="0.0" Color="LightBlue"></GradientStop>

                        <GradientStop Offset="0.4" Color="LightCoral"></GradientStop>

                        <GradientStop Offset="0.6" Color="AliceBlue"></GradientStop>

                        <GradientStop Offset="1.0" Color="LightBlue"></GradientStop>

                    </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>

                <ColumnDefinition MinWidth="100"  Width="315"></ColumnDefinition>

                <ColumnDefinition Width="388*" />

                <ColumnDefinition Width="100*" />

            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>

                <RowDefinition Height="28"></RowDefinition>

                <RowDefinition Height="92" />

                <RowDefinition></RowDefinition>

            </Grid.RowDefinitions>

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

            <Canvas Grid.RowSpan="2">

                <TextBlock Canvas.Left="85" Canvas.Top="9" Height="23" Name="txt_title" Text="My Music" Width="155" TextAlignment="Center" />

                <Label Canvas.Left="0" Canvas.Top="0" Content="音乐盒" Height="28" Name="label1" Width="46" />

                <ProgressBar Canvas.Left="11" Canvas.Top="33" Height="5" Name="progressBar1" Width="294" Foreground="Blue" Background="White" />

                <Label Canvas.Left="11" Canvas.Top="37" Content="" Height="28" Name="min" FontSize="9" />

                <Label Canvas.Left="265" Canvas.Top="37" Content="" Height="28" Name="max" FontSize="9" />

                <Label Canvas.Left="3" Canvas.Top="56" Content="播放模式" Height="23" Name="label4" Width="53" FontSize="10" />

                <ComboBox Canvas.Left="51" Canvas.Top="58" Height="20" Name="comboBox1" Width="64" Background="Transparent" FontSize="9" SelectedIndex="0" SelectionChanged="comboBox1_SelectionChanged">

                    <ComboBoxItem Content="列表循环" FontSize="10" />

                    <ComboBoxItem Content="单曲循环" FontSize="10" />

                    <ComboBoxItem Content="随机播放" FontSize="10" />

                </ComboBox>

                <Button Focusable="False" Name="before" HorizontalAlignment="Left" Margin="39,9,0,7" Style="{StaticResource RadioButton}"  Content="上一首"  BorderThickness="0"  Canvas.Left="-1" Canvas.Top="78" Height="27" Width="47" Click="btn_prev_Click" />

                <Button BorderThickness="0" Canvas.Left="142" Canvas.Top="87" Content="下一首" Focusable="False" Height="27" Name="next" Style="{StaticResource RadioButton}" Width="47" Click="btn_next_Click" />

                <Button Canvas.Left="98" Canvas.Top="85" Content="开始" Height="32" Name="startbtn" Width="35" Style="{StaticResource RadioButton}" Click="btn_start_Click" />

               

                <Image Canvas.Left="195" Canvas.Top="85" Height="29" Name="image1" Stretch="Fill" Width="30" Source="/MyMusic;component/Images/audio4.ico" />

                <MediaElement Name="myplayer" Volume="0.3" Grid.Column="2" Grid.Row="2" Height="290" HorizontalAlignment="Left" Margin="36,149,0,0"  VerticalAlignment="Top" Width="58" LoadedBehavior="Manual" MediaEnded="myplayer_MediaEnded" />

                <TextBlock Canvas.Left="255" Canvas.Top="71" Height="23" Name="textBlock1" Text="{Binding ElementName=slider1, Path=value}" Width="32"  />

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