(WPF)酷狗音乐播放器

原创 2015年07月07日 14:22:11

最近看了下wpf,感觉wpf做界面实在是太方便,使用blend来设计界面简直不要太爽。通过mvvm模式来实现逻辑界面分离。我这里使用的是vs2013, .netFramework4.5.程序只是实现了很简单的功能:歌曲播放,歌词搜索,歌词显示 ,更换皮肤,textbox的水印文字。 下面请看主界面整体效果:

      其实很简陋,主要是图片的效果掩人耳目了。 下面就谈谈具体的制作过程,同时也算是自己对wpf的一个回忆总结吧。

(1) 程序最基本的一般当然是control了。 那么首先就是Button按钮了。Button 一般有3个状态, 默认,悬浮,按下。 方法有很多,我这里的做法是:

 从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 来设置。同时可以控制不同状态的切换过渡时间,这样视觉会更好些。 如下:


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


 最后就只需要调用就行了 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) 第二部分应该就是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/ 中文歌词库中搜索的, 调用http请求 。.接口如下:

http://www.cnlyric.com/search.php?k=KEY&t=s 。KEY就是要搜索的内容。搜索完后 就可以自己进行筛选。

(6) 歌词滚动 。 大概方法就是 用一个StackPanel里面放若干个textblock, textblock的个数和歌词行数一一对应。 

播放的时候用个定时器不停检测当前播放进度,再对比StackPanel里面的歌词的时间。 这里要多谢作者: 

QQ:919784826 的代码。 他写的比较全面。我只是拿了抽取了他的一部分功能来用


     程序地址(非源码)

    后续上传源代码。



WPF 个人音乐播放器

一款基于 C# WPF 编写的个人音乐播放器。

WPF 音乐播放器

自己写的WPF音乐播放器,可以播放歌词,界面如下: 播放时,显示歌词界面如下: 添加歌曲到歌曲列表可以在\bin\debug\Music文件夹下直接把歌曲拖进去,这个歌曲文件夹也可以在co...

WPF做的小型音乐播放器-升级版

上一个版本 是利用周日休息时间制作的,考虑不充分,开发时间也短,只完成了加载频道列表和播放歌曲的功能.这几天晚上在家进行了部分加工,首先是完善了部分功能,其次对部分不合理的设计进行了重构(还不知道重构...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

WPF 重写按钮变成音乐播放器按钮

在使用天天动听音乐播放器的时候,为什么别人的播放暂停按钮可以做的那么漂亮,于是想用WPF来实现下,WPF中可以重写按钮的样式,在winform中就不知道怎么搞了(可能可以来个usercontrol画个...

WPF写的音乐播放器

------- Windows Phone 7手机开发、.Net培训、期待与您交流! ------- 使用C# WPF写的哦,写看成果:     第一步:首先把要实现的功能写出来,就用PS...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

WPF技术触屏上的应用系列(三): 视频播放器的使用及视频播放、播放、暂停、可拖动播放进度效果实现

去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用。客户端是Window7操作系统,54寸大屏电脑电视一体机。要求有很炫的展示效果,要有一定的视觉冲击力,可触控操作。当然满足客户的要求也可以有...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:(WPF)酷狗音乐播放器
举报原因:
原因补充:

(最多只允许输入30个字)