Bootstrap

WPF下的视频录制界面设计

               

在去年12月份,我曾经写过三篇文章讨论C#下视频录制、播放界面的设计。这三篇文章是:
利用C#画视频录制及播放的界面(一)
利用C#画视频录制及播放的界面(二)
利用C#画视频录制及播放的界面(三) 

今天,我又来写写WPF下视频录制及播放界面的制作。
先看效果图片:
Video视频录制 
或许你认为此界面不够爽,有点“闷”,没关系,只是随便用一个“普通的颜色”制作的,最后,我们可以利用WPF的资源特性,随时更换“皮肤”,变成你想要的效果。(比如下面XAML代码中的加粗部分,这些颜色在本项目中有一定通用性,因此,可以使用资源特性,以便通过C#程序随时去修改它们)

由于时间关系,先贴出代码,有空再做详解:
XAML代码:
<Window
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 x:Class="Video.Window1"
 x:Name="Window"
 Title="Window1"
 Width="640" Height="480">
<Canvas Width="612.312500" Height="394.870117">
  <Path Data="F1 M 611.410156,382.030273 C 611.410156,388.381836 606.260742,393.528320 599.910156,393.528320 L 12.004883,393.528320 C 5.654297,393.528320 0.505859,388.381836 0.505859,382.030273 L 0.505859,11.628418 C 0.505859,5.277832 5.654297,0.128906 12.004883,0.128906 L 599.910156,0.128906 C 606.260742,0.128906 611.410156,5.277832 611.410156,11.628418 L 611.410156,382.030273 Z">
    <Path.Fill>
      <LinearGradientBrush MappingMode="Absolute" StartPoint="308.025391,592.768555" EndPoint="308.025391,199.368652">
        <LinearGradientBrush.Transform>
          <MatrixTransform Matrix="1.000000,0.000000,-0.000000,-1.000000,-2.067383,592.897461" />
        </LinearGradientBrush.Transform>
       <GradientStop Offset="0.000000" Color="#ffffffff"/>
       <GradientStop Offset="0.674157" Color="#FF5B6E97"/>
       <GradientStop Offset="1.000000" Color="#ffeaf7fa"/>
      </LinearGradientBrush>
    </Path.Fill>
  </Path>


  <Path Data="F1 M 11.499023,394.741211 L 599.405273,394.741211 C 605.757813,394.741211 610.904297,389.592773 610.904297,383.241211 L 610.904297,353.635742 L 0.000000,353.635742 L 0.000000,383.241211 C 0.000000,389.592773 5.149414,394.741211 11.499023,394.741211 Z">
    <Path.Fill>
      <LinearGradientBrush MappingMode="Absolute" StartPoint="428.479492,722.620117" EndPoint="428.479492,763.725586">
        <LinearGradientBrush.GradientStops>
          <GradientStop Offset="0.000000" Color="#ffe8f0f1"/>
          <GradientStop Offset="0.449438" Color="#FF5B6E97"/>
          <GradientStop Offset="1.000000" Color="#ff8a9ac8"/>
        </LinearGradientBrush.GradientStops>
        <LinearGradientBrush.Transform>
          <MatrixTransform Matrix="-1.000000,0.000000,0.000000,1.000000,733.932617,-368.984375" />
        </LinearGradientBrush.Transform>
      </LinearGradientBrush>
    </Path.Fill>
  </Path>


  <Path Data="F1 M 0.505859,354.592773 L 0.505859,382.030273 C 0.505859,388.381836 5.654297,393.528320 12.004883,393.528320 L 599.910156,393.528320 C 606.260742,393.528320 611.410156,388.381836 611.410156,382.030273 L 611.410156,354.592773 L 0.505859,354.592773 Z"/>


  <Path Data="F1 M 600.390625,0.128906 L 12.484863,0.128906 C 6.133301,0.128906 0.985352,5.277832 0.985352,11.628418 L 0.985352,41.234375 L 611.890625,41.234375 L 611.890625,11.628418 C 611.890625,5.277832 606.740234,0.128906 600.390625,0.128906 Z">
    <Path.Fill>
      <LinearGradientBrush MappingMode="Absolute" StartPoint="308.504883,592.768555" EndPoint="308.504883,551.663086">
        <LinearGradientBrush.GradientStops>
          <GradientStop Offset="0.000000" Color="#ffe8f0f1"/>
          <GradientStop Offset="0.477528" Color="#FF5B6E97"/>
          <GradientStop Offset="1.000000" Color="#ff8a9ac8"/>
        </LinearGradientBrush.GradientStops>
        <LinearGradientBrush.Transform>
          <MatrixTransform Matrix="1.000000,0.000000,-0.000000,-1.000000,-2.067383,592.897461" />
        </LinearGradientBrush.Transform>
      </LinearGradientBrush>
    </Path.Fill>
  </Path>


  <Path Data="F1 M 147.120117,18.936035 C 143.179688,3.177246 135.497559,2.410645 131.902344,0.000000 L 12.484863,0.000000 C 6.133301,0.000000 0.985352,5.147949 0.985352,11.499512 L 0.985352,41.104492 L 161.560059,41.104492 C 156.811035,38.945801 150.170410,31.130859 147.120117,18.936035 Z">
    <Path.Fill>
      <LinearGradientBrush MappingMode="Absolute" StartPoint="83.340332,551.792969" EndPoint="83.340332,592.897461">
        <LinearGradientBrush.GradientStops>
          <GradientStop Offset="0.000000" Color="#ffe8f0f1"/>
          <GradientStop Offset="0.511236" Color="#FF5B6E97"/>
          <GradientStop Offset="1.000000" Color="#ff8a9ac8"/>
        </LinearGradientBrush.GradientStops>
        <LinearGradientBrush.Transform>
          <MatrixTransform Matrix="1.000000,0.000000,-0.000000,-1.000000,-2.067383,592.897461" />
        </LinearGradientBrush.Transform>
      </LinearGradientBrush>
    </Path.Fill>
  </Path>


  <Path Data="F1 M 474.832031,375.932617 C 478.772461,391.692383 486.455078,392.459961 490.050781,394.870117 L 599.405273,394.870117 C 605.757813,394.870117 610.904297,389.721680 610.904297,383.370117 L 610.904297,353.764648 L 460.392578,353.764648 C 465.140625,355.924805 471.782227,363.737305 474.832031,375.932617 Z">
    <Path.Fill>
      <LinearGradientBrush MappingMode="Absolute" StartPoint="198.284180,763.854492" EndPoint="198.284180,722.749512">
        <LinearGradientBrush.GradientStops>
          <GradientStop Offset="0.000000" Color="#ffe8f0f1"/>
          <GradientStop Offset="0.353932" Color="#ff7484a8"/>
          <GradientStop Offset="0.550562" Color="#FF5B6E97"/>
          <GradientStop Offset="1.000000" Color="#ff8a9ac8"/>
        </LinearGradientBrush.GradientStops>
        <LinearGradientBrush.Transform>
          <MatrixTransform Matrix="-1.000000,0.000000,0.000000,1.000000,733.932617,-368.984375" />
        </LinearGradientBrush.Transform>
      </LinearGradientBrush>
    </Path.Fill>
  </Path>


  <Path StrokeThickness="0.250000" Stroke="#ff000000" StrokeMiterLimit="1.000000" Data="F1 M 0.070313,353.495117 L 611.708008,353.495117"/>


  <Path StrokeThickness="0.250000" Stroke="#ff000000" StrokeMiterLimit="1.000000" Data="F1 M 0.675781,41.404785 L 612.312500,41.404785"/>


  <Path Data="F1 M 452.662109,382.735352 L 457.355469,370.325195 L 355.427734,382.657227 L 452.662109,382.735352 Z">
    <Path.Fill>
      <LinearGradientBrush MappingMode="Absolute" StartPoint="408.458984,222.572266" EndPoint="408.458984,210.162109">
        <LinearGradientBrush.GradientStops>
          <GradientStop Offset="0.000000" Color="#ffffffff"/>
          <GradientStop Offset="0.674157" Color="#ff98a1cc"/>
          <GradientStop Offset="1.000000" Color="#ffeaf7fa"/>
        </LinearGradientBrush.GradientStops>
        <LinearGradientBrush.Transform>
          <MatrixTransform Matrix="1.000000,0.000000,-0.000000,-1.000000,-2.067383,592.897461" />
        </LinearGradientBrush.Transform>
      </LinearGradientBrush>
    </Path.Fill>
  </Path>


  <Path StrokeThickness="1.000000" Stroke="#ff000000" StrokeMiterLimit="1.000000" Data="F1 M 611.467773,382.438477 C 611.467773,388.790039 606.318359,393.938477 599.966797,393.938477 L 12.063477,393.938477 C 5.712891,393.938477 0.563965,388.790039 0.563965,382.438477 L 0.563965,12.038086 C 0.563965,5.686523 5.712891,0.538574 12.063477,0.538574 L 599.966797,0.538574 C 606.318359,0.538574 611.467773,5.686523 611.467773,12.038086 L 611.467773,382.438477 Z"/>


  <Path StrokeThickness="0.500000" Stroke="#ffffffff" StrokeMiterLimit="1.000000" Data="F1 M 203.047852,35.409668 L 175.679199,35.409668 L 175.679199,8.041504 L 203.047852,8.041504 L 203.047852,35.409668 Z">
    <Path.Fill>
      <LinearGradientBrush MappingMode="Absolute" StartPoint="177.747070,557.487305" EndPoint="205.115479,584.855713">
        <LinearGradientBrush.GradientStops>
          <GradientStop Offset="0.000000" Color="#ffe8f0f1"/>
          <GradientStop Offset="0.449438" Color="#ff516287"/>
          <GradientStop Offset="1.000000" Color="#ff8a9ac8"/>
        </LinearGradientBrush.GradientStops>
        <LinearGradientBrush.Transform>
          <MatrixTransform Matrix="1.000000,0.000000,-0.000000,-1.000000,-2.067383,592.897461" />
        </LinearGradientBrush.Transform>
      </LinearGradientBrush>
    </Path.Fill>
  </Path>


  <Path StrokeThickness="0.500000" Stroke="#ffffffff" StrokeMiterLimit="1.000000" Data="F1 M 292.887695,35.050293 L 272.695313,35.050293 L 272.695313,14.926270 L 292.887695,14.926270 L 292.887695,35.050293 Z">
    <Path.Fill>
      <LinearGradientBrush MappingMode="Absolute" StartPoint="274.762695,567.909180" EndPoint="294.955078,567.909180">
        <LinearGradientBrush.GradientStops>
          <GradientStop Offset="0.000000" Color="#ffe8f0f1"/>
          <GradientStop Offset="0.449438" Color="#FF5B6E97"/>
          <GradientStop Offset="1.000000" Color="#ff8a9ac8"/>
        </LinearGradientBrush.GradientStops>
        <LinearGradientBrush.Transform>
          <MatrixTransform Matrix="1.000000,0.000000,-0.000000,-1.000000,-2.067383,592.897461" />
        </LinearGradientBrush.Transform>
      </LinearGradientBrush>
    </Path.Fill>
  </Path>


  <Path StrokeThickness="0.500000" Stroke="#ffffffff" StrokeMiterLimit="1.000000" Data="F1 M 316.658203,35.050293 L 296.465332,35.050293 L 296.465332,14.926270 L 316.658203,14.926270 L 316.658203,35.050293 Z">
    <Path.Fill>
      <LinearGradientBrush MappingMode="Absolute" StartPoint="297.236328,559.631348" EndPoint="320.022308,576.186340">
        <LinearGradientBrush.GradientStops>
          <GradientStop Offset="0.000000" Color="#ffe8f0f1"/>
          <GradientStop Offset="0.449438" Color="#FF5B6E97"/>
          <GradientStop Offset="1.000000" Color="#ff8a9ac8"/>
        </LinearGradientBrush.GradientStops>
        <LinearGradientBrush.Transform>
          <MatrixTransform Matrix="1.000000,0.000000,-0.000000,-1.000000,-2.067383,592.897461" />
        </LinearGradientBrush.Transform>
      </LinearGradientBrush>
    </Path.Fill>
  </Path>


  <Path StrokeThickness="0.500000" Stroke="#ffffffff" StrokeMiterLimit="1.000000" Data="F1 M 340.428711,35.050293 L 320.235352,35.050293 L 320.235352,14.926270 L 340.428711,14.926270 L 340.428711,35.050293 Z">
    <Path.Fill>
      <LinearGradientBrush MappingMode="Absolute" StartPoint="328.478516,555.840820" EndPoint="336.321014,579.977600">
        <LinearGradientBrush.GradientStops>
          <GradientStop Offset="0.000000" Color="#ffe8f0f1"/>
          <GradientStop Offset="0.449438" Color="#FF5B6E97"/>
          <GradientStop Offset="1.000000" Color="#ff8a9ac8"/>
        </LinearGradientBrush.GradientStops>
        <LinearGradientBrush.Transform>
          <MatrixTransform Matrix="1.000000,0.000000,-0.000000,-1.000000,-2.067383,592.897461" />
        </LinearGradientBrush.Transform>
      </LinearGradientBrush>
    </Path.Fill>
  </Path>


  <Path StrokeThickness="0.500000" Stroke="#ffffffff" StrokeMiterLimit="1.000000" Data="F1 M 364.199219,35.050293 L 344.005859,35.050293 L 344.005859,14.926270 L 364.199219,14.926270 L 364.199219,35.050293 Z">
    <Path.Fill>
      <LinearGradientBrush MappingMode="Absolute" StartPoint="360.091797,555.839844" EndPoint="352.248993,579.977539">
        <LinearGradientBrush.GradientStops>
          <GradientStop Offset="0.000000" Color="#ffe8f0f1"/>
          <GradientStop Offset="0.449438" Color="#FF5B6E97"/>
          <GradientStop Offset="1.000000" Color="#ff8a9ac8"/>
        </LinearGradientBrush.GradientStops>
        <LinearGradientBrush.Transform>
          <MatrixTransform Matrix="1.000000,0.000000,-0.000000,-1.000000,-2.067383,592.897461" />
        </LinearGradientBrush.Transform>
      </LinearGradientBrush>
    </Path.Fill>
  </Path>


  <Path StrokeThickness="0.500000" Stroke="#ffffffff" StrokeMiterLimit="1.000000" Data="F1 M 387.969727,35.050293 L 367.775391,35.050293 L 367.775391,14.926270 L 387.969727,14.926270 L 387.969727,35.050293 Z" Canvas.Top="-0.667">
    <Path.Fill>
      <LinearGradientBrush MappingMode="Absolute" StartPoint="391.333984,559.631348" EndPoint="368.547211,576.186890">
        <LinearGradientBrush.GradientStops>
          <GradientStop Offset="0.000000" Color="#ffe8f0f1"/>
          <GradientStop Offset="0.449438" Color="#FF5B6E97"/>
          <GradientStop Offset="1.000000" Color="#ff8a9ac8"/>
        </LinearGradientBrush.GradientStops>
        <LinearGradientBrush.Transform>
          <MatrixTransform Matrix="1.000000,0.000000,-0.000000,-1.000000,-2.067383,592.897461" />
        </LinearGradientBrush.Transform>
      </LinearGradientBrush>
    </Path.Fill>
  </Path>


  <Path StrokeThickness="0.500000" Stroke="#ffffffff" StrokeMiterLimit="1.000000" Data="F1 M 411.740234,35.050293 L 391.545898,35.050293 L 391.545898,14.926270 L 411.740234,14.926270 L 411.740234,35.050293 Z">
    <Path.Fill>
      <LinearGradientBrush MappingMode="Absolute" StartPoint="413.807617,567.909180" EndPoint="393.613281,567.909180">
        <LinearGradientBrush.GradientStops>
          <GradientStop Offset="0.000000" Color="#ffe8f0f1"/>
          <GradientStop Offset="0.449438" Color="#FF5B6E97"/>
          <GradientStop Offset="1.000000" Color="#ff8a9ac8"/>
        </LinearGradientBrush.GradientStops>
        <LinearGradientBrush.Transform>
          <MatrixTransform Matrix="1.000000,0.000000,-0.000000,-1.000000,-2.067383,592.897461" />
        </LinearGradientBrush.Transform>
      </LinearGradientBrush>
    </Path.Fill>
  </Path>


  <Path StrokeThickness="0.500000" Stroke="#ffffffff" StrokeMiterLimit="1.000000" Data="F1 M 263.190430,35.409668 L 235.821777,35.409668 L 235.821777,8.041504 L 263.190430,8.041504 L 263.190430,35.409668 Z">
    <Path.Fill>
      <LinearGradientBrush MappingMode="Absolute" StartPoint="265.258301,584.855469" EndPo

;