关闭

(WPF)酷狗音乐播放器

标签: wpf界面音乐
3479人阅读 评论(6) 收藏 举报
分类:

最近看了下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 的代码。 他写的比较全面。我只是拿了抽取了他的一部分功能来用


     程序地址(非源码)

    后续上传源代码。



3
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:7696次
    • 积分:143
    • 等级:
    • 排名:千里之外
    • 原创:6篇
    • 转载:0篇
    • 译文:0篇
    • 评论:14条
    文章分类
    最新评论