最近看了下wpf，感覺wpf做界面實在是太方便，使用blend來設(shè)計界面簡直不要太爽。通過mvvm模式來實現(xiàn)邏輯界面分離。我這里使用的是vs2013, .netFramework4.5.程序只是實現(xiàn)了很簡單的功能：歌曲播放，歌詞搜索，歌詞顯示 ，更換皮膚，textbox的水印文字。 下面請看主界面整體效果：

? ? ? 其實很簡陋，主要是圖片的效果掩人耳目了。 下面就談?wù)劸唧w的制作過程，同時也算是自己對wpf的一個回憶總結(jié)吧。

(1） 程序最基本的一般當(dāng)然是control了。 那么首先就是Button按鈕了。Button 一般有3個狀態(tài)， 默認(rèn)，懸浮，按下。 方法有很多，我這里的做法是：

①?從Button派生一個類 ?ImageButton。?

public class ImageButton : Button{public ImageSource NorImage{get { return (ImageSource)GetValue(NorImageProperty); }set { SetValue(NorImageProperty, value); }}// Using a DependencyProperty as the backing store for NorImage. This enables animation, styling, binding, etc...public static readonly DependencyProperty NorImageProperty =DependencyProperty.Register("NorImage", typeof(ImageSource), typeof(ImageButton));public ImageSource HorImage{get { return (ImageSource)GetValue(HorImageProperty); }set { SetValue(HorImageProperty, value); }}// Using a DependencyProperty as the backing store for HorImage. This enables animation, styling, binding, etc...public static readonly DependencyProperty HorImageProperty =DependencyProperty.Register("HorImage", typeof(ImageSource), typeof(ImageButton));public ImageSource DownImage{get { return (ImageSource)GetValue(DownImageProperty); }set { SetValue(DownImageProperty, value); }}// Using a DependencyProperty as the backing store for DownImage. This enables animation, styling, binding, etc...public static readonly DependencyProperty DownImageProperty =DependencyProperty.Register("DownImage", typeof(ImageSource), typeof(ImageButton));}

②? 然后定義Button的樣式， 定義好了樣式。所有按鈕只需使用這個樣式即可。 方法有很多 我這里是這樣定義的：

<span style="white-space:pre"> </span><pre name="code" class="html"><Style x:Key="ButtonStyle1" TargetType="{x:Type local:ImageButton}"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type local:ImageButton}"><Grid><Image HorizontalAlignment="Left" x:Name="Nor" VerticalAlignment="Top" Source="{TemplateBinding NorImage}" Stretch="Fill"/><Image HorizontalAlignment="Left" x:Name="Hor" VerticalAlignment="Top" Source="{TemplateBinding HorImage}" Opacity="0" Stretch="Fill"/><Image HorizontalAlignment="Left" x:Name="Selected" VerticalAlignment="Top" Source="{TemplateBinding DownImage}" Opacity="0" Stretch="Fill"/></Grid><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter TargetName="Nor" Property="Opacity" Value="0" /><Setter TargetName="Hor" Property="Opacity" Value="100" /><Setter TargetName="Selected" Property="Opacity" Value="0" /></Trigger><Trigger Property="IsPressed" Value="True"><Setter TargetName="Nor" Property="Opacity" Value="0" /><Setter TargetName="Hor" Property="Opacity" Value="0" /><Setter TargetName="Selected" Property="Opacity" Value="100" /></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style> 如果.netFramework4.5還可以是用visual state 來設(shè)置。同時可以控制不同狀態(tài)的切換過渡時間，這樣視覺會更好些。 如下：

<span style="white-space:pre"></span><pre name="code" class="html"><Style x:Key="ImageButtonStyle" TargetType="{x:Type local:ImageButton}"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type local:ImageButton}"><Grid><VisualStateManager.VisualStateGroups><VisualStateGroup x:Name="CommonStates"><VisualStateGroup.Transitions><VisualTransition GeneratedDuration="0:0:0.2"/></VisualStateGroup.Transitions><VisualState x:Name="Normal"><Storyboard><DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Hor"><EasingDoubleKeyFrame KeyTime="0" Value="0"/></DoubleAnimationUsingKeyFrames><DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Down"><EasingDoubleKeyFrame KeyTime="0" Value="0"/></DoubleAnimationUsingKeyFrames></Storyboard></VisualState><VisualState x:Name="MouseOver"><Storyboard><DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Nor"><EasingDoubleKeyFrame KeyTime="0" Value="0"/></DoubleAnimationUsingKeyFrames><DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Down"><EasingDoubleKeyFrame KeyTime="0" Value="0"/></DoubleAnimationUsingKeyFrames></Storyboard></VisualState><VisualState x:Name="Pressed"><Storyboard><DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Nor"><EasingDoubleKeyFrame KeyTime="0" Value="0"/></DoubleAnimationUsingKeyFrames><DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Hor"><EasingDoubleKeyFrame KeyTime="0" Value="0"/></DoubleAnimationUsingKeyFrames></Storyboard></VisualState><VisualState x:Name="Disabled"/></VisualStateGroup></VisualStateManager.VisualStateGroups><Image x:Name="Nor" Source="{TemplateBinding NorImage}" /><Image x:Name="Hor" Source="{TemplateBinding HorImage}" /><Image x:Name="Down" Source="{TemplateBinding DownImage}" /></Grid></ControlTemplate></Setter.Value></Setter></Style>
③ 最后就只需要調(diào)用就行了 eg：

<local:ImageButton Style="{DynamicResource ButtonStyle1}" NorImage="pause_normal.png" HorImage="pause_hot.png" DownImage="pause_down.png" HorizontalAlignment="Left" Height="56" Margin="57,59,0,0" VerticalAlignment="Top" Width="61" />

（2） 第二部分應(yīng)該就是RadionButton.。這里的做法和Button一樣。 RadionButton的控制如下：

(3) textbox的水印效果

? ? ? ?

<Style x:Key="TextBoxStyle" TargetType="{x:Type TextBox}"><Style.Triggers><Trigger Property="IsFocused" Value="True"><Setter Property="Background" Value="#5FCBCBCB" /></Trigger><MultiTrigger><MultiTrigger.Conditions><Condition Property="IsFocused" Value="False"/><Condition Property="Text" Value=""/></MultiTrigger.Conditions><MultiTrigger.Setters><Setter Property="Background"><Setter.Value><VisualBrush Opacity="0.4" Stretch="None"><VisualBrush.Visual><TextBlock FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center" Text="輸入歌曲名 即可搜索歌詞" /></VisualBrush.Visual></VisualBrush></Setter.Value></Setter></MultiTrigger.Setters></MultiTrigger></Style.Triggers></Style> （4） 換膚的話 其實就是換了一張背景圖片。

（5） 歌詞搜索。 歌詞是從http://www.cnlyric.com/ 中文歌詞庫中搜索的， 調(diào)用http請求 。.接口如下：

http://www.cnlyric.com/search.php?k=KEY&t=s 。KEY就是要搜索的內(nèi)容。搜索完后 就可以自己進行篩選。

（6） 歌詞滾動 。 大概方法就是 用一個StackPanel里面放若干個textblock, textblock的個數(shù)和歌詞行數(shù)一一對應(yīng)。?

播放的時候用個定時器不停檢測當(dāng)前播放進度，再對比StackPanel里面的歌詞的時間。 這里要多謝作者:?

QQ:919784826 的代碼。?他寫的比較全面。我只是拿了抽取了他的一部分功能來用。

? ? ?程序地址（非源碼）

? ? 后續(xù)上傳源代碼。

總結(jié)

以上是生活随笔為你收集整理的(WPF)酷狗音乐播放器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。