用WPF搭建自己的万能播放器（C#）前篇

唉。。。先吐槽一下，公司做自己的播放器 ，目的是解决快播升级带来的“合法性”（如果你不懂。。。那。。。那当我没说）。因为公司内部本身就没有相关的技术人员，所以只能是自己边摸索边开发。

实现的是一款基于BT协议的P2P 播放器。内核是用vlc来实现。结果辛辛苦苦做了半天结果发现用wpf不能满足公司一些需求。TMD，我又不得不吐槽了。事先不制定开发需求文档，就只晓得给压力 T.T ，为难我们码农。所以搁浅，专用winform去开发，主要2个原因：1，界面美观时发现渲染视频的时候会有问题，这个问题等会会讲。2，（主要原因）如果wpf这个程序开发完成是不能内嵌到网页的。因为后续还要要开发IE ActiveX 插件。然后总监就说：那就不用wpf了，转用winform。 我只能呵呵！呵呵呵呵！

wpf我一窍不通，之前完全没接触过。做出这个效果已是我最大能力了。（专业人员请用看小白的态度）

ok，这里说下第一个问题，在渲染视频的时候会发现只有声音，没有画面，在我找了2天问题之后发现是因为界面用了AllowsTransparency="True" WindowStyle="None" 这段属性的修改。如果修改一下AllowsTransparency="False" WindowStyle="XXX"(除了不是None之外的都可以)。则就变成这样了。

 仔细看，会多了个边框。只有这样，画面才能出来。 这里可能只有自己重绘这个界面元素。希望有人能指教一下。

这里我会将这个界面的项目打包上传，点击这里下载。（有点大，含有vlc的dll文件）因为去掉了WindowStyle，鼠标在边框进行缩放效果和最大化处理以及多显示器上的兼容都要自己来实现。项目都会有，我其他文章也有对这些技术点进行部分的讲解，这个就自己去看啦。连接就不打了。

<!--音量滚珠-->
    <Style TargetType="Thumb" >
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Thumb">
                    <Grid>
                        <vsm:VisualStateManager.VisualStateGroups>
                            <vsm:VisualStateGroup x:Name="CommonStates">
                                <vsm:VisualStateGroup.Transitions>
                                    <vsm:VisualTransition GeneratedDuration="0:0:0.1" To="MouseOver"/>
                                    <vsm:VisualTransition GeneratedDuration="0:0:0.1" To="Pressed"/>
                                </vsm:VisualStateGroup.Transitions>
                                <vsm:VisualState x:Name="Normal"/>
                                <vsm:VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="Down" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" BeginTime="00:00:00" Duration="00:00:00.0010000">
                                            <SplineColorKeyFrame KeyTime="00:00:00" Value="#004486B6"/>
                                        </ColorAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Down" Storyboard.TargetProperty="(UIElement.Opacity)" BeginTime="00:00:00" Duration="00:00:00.0010000">
                                            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Down" Storyboard.TargetProperty="(UIElement.Opacity)" BeginTime="00:00:00" Duration="00:00:00.0010000">
                                            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Disabled" Storyboard.TargetProperty="(UIElement.Opacity)" BeginTime="00:00:00" Duration="00:00:00.0010000">
                                            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                        </vsm:VisualStateManager.VisualStateGroups>
                        <Ellipse x:Name="Down" Grid.Column="0" Width="15" Height="15" StrokeThickness="0.5" Opacity="0.1" Fill="#FF4486B6" Margin="0,0,0,0">
                            <Ellipse.Stroke>
                                <LinearGradientBrush EndPoint="0.507,-1.856" StartPoint="0.507,1.515">
                                    <GradientStop Color="#FF4E5F70" Offset="0"/>
                                    <GradientStop Color="#FFF6F7FA" Offset="1"/>
                                </LinearGradientBrush>
                            </Ellipse.Stroke>
                        </Ellipse>
                        <!--音量的滚珠-->
                        <Ellipse x:Name="VolBackground" Grid.Column="0" Width="12" Height="12" StrokeLineJoin="Round" StrokeThickness="1.6" Opacity="0.9" Stroke="#00232425">
                            <Ellipse.Fill>
                                <LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
                                    <GradientStop Color="#66B3FF" Offset="0.3"/>
                                    <GradientStop Color="#FF6AC2F3" Offset="1"/>
                                </LinearGradientBrush>
                            </Ellipse.Fill>
                        </Ellipse>
                        <Path x:Name="WhiteBubble" Grid.Column="0" Width="6" Height="2" Stretch="Fill" StrokeLineJoin="Round" StrokeThickness="1.8" Data="M4.2160064,2.8920099 C4.2160064,1.7874404 5.1114369,1.7153466 6.2160064,1.7153466 L22.679308,1.7153466 C23.783877,1.7153466 24.679308,1.7874404 24.679308,2.8920099 24.679308,2.8920099 4.2160064,2.8920099 4.2160064,2.8920099 z" Margin="0,0,0,7.5" VerticalAlignment="Stretch" Opacity="0.5">
                            <Path.Stroke>
                                <!--滚珠亮点色-->
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="#FFFFFFFF" Offset="0.5"/>
                                    <GradientStop Color="#FFCDCDCD" Offset="1"/>
                                </LinearGradientBrush>
                            </Path.Stroke>
                        </Path>
                        <Ellipse x:Name="DisabledOverlay" Width="11" Height="10.5" StrokeLineJoin="Round" StrokeThickness="0.5" Opacity="0" Stroke="#B2FFFFFF" Margin="1.5,233.25,1.5,233.25" Fill="#B2FFFFFF"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsFocused" Value="True"/>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Cursor" TargetName="VolBackground" Value="Hand"></Setter>
                            <Setter Property="Stroke" TargetName="VolBackground" >
                                <Setter.Value>
                                    <LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
                                        <GradientStop Color="#2894FF" Offset="0.3"/>
                                        <GradientStop Color="#66B3FF" Offset="1"/>
                                    </LinearGradientBrush>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="Stroke" TargetName="WhiteBubble">
                                <Setter.Value>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FCFCFC" Offset="0.6"/>
                                        <GradientStop Color="#FFECEC" Offset="1"/>
                                    </LinearGradientBrush>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False"/>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

这个是要利用到WPFToolkit.dll的引用才可以。像这些界面控件的美化一般是用Blend工具来做的。我都是代码Copy一些，然后修改一些。 ^.^ 亲，代码要会抄哦。当然了，前提你得懂。这样也是一种学习
好了，今天就到这里。各位五一快乐！