Click here to Skip to main content
15,887,302 members
Search within:


Articles / Web Development / HTML
 

Gallery Server Pro - An ASP.NET Gallery for Sharing Photos, Video, Audio and Other Media

Rate me:
Please Sign up or sign in to vote.
4.86/5 (131 votes)
18 Oct 2013GPL331 min read 825.9K   539  
Gallery Server Pro is a complete, stable ASP.NET gallery for sharing photos, video, audio and other media. This article presents the overall architecture and major features.
 
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="404" Height="40">
  <Canvas.Resources>
    <Storyboard x:Name="PlayPauseButton_MouseEnter">
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PlayPauseButton" Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1"/>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Name="PlayPauseButton_MouseLeave">
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PlayPauseButton" Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0.5"/>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Name="PlayPauseButton_MouseDown">
      <DoubleAnimationUsingKeyFrames  Storyboard.TargetName="PlayPauseButton" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PlayPauseButton" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Name="PlayPauseButton_MouseUp">
      <DoubleAnimationUsingKeyFrames  Storyboard.TargetName="PlayPauseButton" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0"/>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PlayPauseButton" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0"/>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>

    <Storyboard x:Name="StopButton_MouseEnter">
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="StopButton" Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1"/>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Name="StopButton_MouseLeave">
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="StopButton" Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0.5"/>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>

    <Storyboard x:Name="StopButton_MouseDown">
      <DoubleAnimationUsingKeyFrames  Storyboard.TargetName="StopButton" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="StopButton" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Name="StopButton_MouseUp">
      <DoubleAnimationUsingKeyFrames  Storyboard.TargetName="StopButton" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0"/>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="StopButton" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0"/>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>


    <Storyboard x:Name="NextButton_MouseEnter">
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="NextButton" Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1"/>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Name="NextButton_MouseLeave">
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="NextButton" Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0.5"/>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Name="NextButton_MouseDown">
      <DoubleAnimationUsingKeyFrames  Storyboard.TargetName="NextButton" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="NextButton" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Name="NextButton_MouseUp">
      <DoubleAnimationUsingKeyFrames  Storyboard.TargetName="NextButton" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0"/>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="NextButton" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0"/>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
	
    <Storyboard x:Name="PreviousButton_MouseEnter">
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PreviousButton" Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1"/>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Name="PreviousButton_MouseLeave">
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PreviousButton" Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0.5"/>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Name="PreviousButton_MouseDown">
      <DoubleAnimationUsingKeyFrames  Storyboard.TargetName="PreviousButton" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PreviousButton" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Name="PreviousButton_MouseUp">
      <DoubleAnimationUsingKeyFrames  Storyboard.TargetName="PreviousButton" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0"/>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PreviousButton" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0"/>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>	

    <Storyboard x:Name="MuteButton_MouseEnter">
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MuteButton" Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1"/>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Name="MuteButton_MouseLeave">
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MuteButton" Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0.5"/>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Name="MuteButton_MouseDown">
      <DoubleAnimationUsingKeyFrames  Storyboard.TargetName="MuteButton" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MuteButton" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Name="MuteButton_MouseUp">
      <DoubleAnimationUsingKeyFrames  Storyboard.TargetName="MuteButton" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0"/>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MuteButton" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0"/>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>

    <Storyboard x:Name="PlaySymbol_Show">
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PlaySymbol" Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1.0"/>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Name="PlaySymbol_Hide">
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PlaySymbol" Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:0.3000000" Value="0"/>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>

    <Storyboard x:Name="PauseSymbol_Show">
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PauseSymbol" Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1.0"/>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Name="PauseSymbol_Hide">
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PauseSymbol" Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0"/>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Name="MuteOnSymbol_Show">
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MuteOnSymbol" Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1.0"/>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Name="MuteOnSymbol_Hide">
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MuteOnSymbol" Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0"/>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
  </Canvas.Resources>

  <Canvas Width="368" Height="40" Canvas.Top="0">
    <MediaElement x:Name="VideoWindow" Canvas.Left="0" Canvas.Top="0" Width="4" Height="4" Opacity="0" IsHitTestVisible="False"/>

    <Canvas RenderTransformOrigin="0.5,0.5" x:Name="PlayerControls" Width="404.5" Height="39.575">
      <Canvas x:Name="PlayerBackground" Width="368" Height="39.5746" RenderTransformOrigin="0.5,0.5" Canvas.Left="18">
      	<Canvas.RenderTransform>
      		<TransformGroup>
      			<ScaleTransform ScaleX="1.1" ScaleY="1"/>
      			<SkewTransform AngleX="0" AngleY="0"/>
      			<RotateTransform Angle="0"/>
      			<TranslateTransform X="0" Y="0"/>
      		</TransformGroup>
      	</Canvas.RenderTransform>
        <Path Width="365.723" Height="36.4104" Canvas.Left="2.277" Canvas.Top="3.164" Stretch="Fill" Fill="#A1CBCBCB" Data="F1 M 15.3241,3.16418L 531.994,3.16418C 541.153,3.16418 545.041,9.42871 545.041,17.1564L 545.041,25.5824C 545.041,33.3101 541.153,39.5746 531.994,39.5746L 15.3241,39.5746C 6.16595,39.5746 2.27748,33.3101 2.27748,25.5824L 2.27748,17.1564C 2.27748,9.42871 6.16595,3.16418 15.3241,3.16418 Z "/>
        <Path Width="368" Height="37.4104" Canvas.Left="0" Canvas.Top="0" Stretch="Fill" StrokeLineJoin="Round" Stroke="#A16F6F6F" Fill="#A18D8D8D" Data="F1 M 13.5466,0.5L 530.217,0.5C 539.375,0.5 543.263,6.76453 543.263,14.4922L 543.263,22.9182C 543.263,30.6459 539.375,36.9104 530.217,36.9104L 13.5466,36.9104C 4.38847,36.9104 0.5,30.6459 0.5,22.9182L 0.5,14.4922C 0.5,6.76453 4.38847,0.5 13.5466,0.5 Z "/>
        <Path Width="367.5" Height="30.7891" Canvas.Left="0.5" Canvas.Top="0.5" Stretch="Fill" Fill="#A18D8D8D" Data="F1 M 15.4146,3.16418C 6.2065,3.16418 2.27748,8.75836 2.27748,15.6592L 2.27748,27.0796C 2.27748,28.5566 2.61947,29.9738 3.24732,31.2891C 1.5108,29.3172 0.500008,26.9548 0.500008,24.4154L 0.500008,12.995C 0.500008,6.09421 4.42901,0.5 13.6371,0.5L 530.126,0.5C 537.364,0.5 539.988,3.95572 542.294,8.78549C 539.311,5.39877 537.724,3.16418 531.904,3.16418L 15.4146,3.16418 Z "/>
      </Canvas>
      <Canvas x:Name="PlayPauseButton" Width="45.9055" Height="22.3382" Canvas.Top="8.5" Canvas.Left="9" Opacity="0.5">
        <Canvas.RenderTransform>
          <TransformGroup>
            <ScaleTransform ScaleX="1" ScaleY="1"/>
            <SkewTransform AngleX="0" AngleY="0"/>
            <RotateTransform Angle="0"/>
            <TranslateTransform X="0" Y="0"/>
          </TransformGroup>
        </Canvas.RenderTransform>
        <Path Width="45.9055" Height="22.3382" Canvas.Left="0" Canvas.Top="0" Stretch="Fill" StrokeThickness="0.5" StrokeLineJoin="Round" Stroke="#FF9E9E9E" Fill="#67282828" Data="F1 M 2.13976,0.25L 43.7658,0.25C 44.8095,0.25 45.6555,1.0961 45.6555,2.13977L 45.6555,20.1984C 45.6555,21.2421 44.8095,22.0882 43.7658,22.0882L 2.13976,22.0882C 1.09607,22.0882 0.25,21.2421 0.25,20.1984L 0.25,2.13977C 0.25,1.0961 1.09607,0.25 2.13976,0.25 Z "/>
        <Path Width="43.5223" Height="20.5851" Canvas.Left="1.1916" Canvas.Top="0.876526" Stretch="Fill" StrokeThickness="0.5" StrokeLineJoin="Round" Stroke="#677F7F7F" Data="F1 M 3.33138,1.12653L 42.5741,1.12653C 43.6178,1.12653 44.4639,1.9726 44.4639,3.0163L 44.4639,19.3219C 44.4639,20.3656 43.6178,21.2116 42.5741,21.2116L 3.33138,21.2116C 2.28769,21.2116 1.4416,20.3656 1.4416,19.3219L 1.4416,3.0163C 1.4416,1.9726 2.28769,1.12653 3.33138,1.12653 Z ">
          <Path.Fill>
            <LinearGradientBrush StartPoint="1.45695,-0.405676" EndPoint="1.45695,0.556541">
              <GradientStop Color="#00FFFFFF" Offset="0.224609"/>
              <GradientStop Color="#67FFFFFF" Offset="0.449219"/>
              <GradientStop Color="#00FFFFFF" Offset="0.979492"/>
            </LinearGradientBrush>
          </Path.Fill>
        </Path>
        <Canvas x:Name="PauseSymbol" Opacity="0.0" Width="43.0171" Height="18.8568" Canvas.Left="1.20181" Canvas.Top="1.46829">
          <Canvas Width="10.4979" Height="8.70285" Canvas.Left="16.2497" Canvas.Top="5.55548">
            <Rectangle Width="4.66058" Height="8.61014" Canvas.Left="0" Canvas.Top="0.0927124" Stretch="Fill" StrokeThickness="0.5" StrokeLineJoin="Round" Stroke="#FF9E9E9E" Fill="#FFFFFFFF"/>
            <Rectangle Width="4.66058" Height="8.61014" Canvas.Left="5.83737" Canvas.Top="0" Stretch="Fill" StrokeThickness="0.5" StrokeLineJoin="Round" Stroke="#FF9E9E9E" Fill="#FFFFFFFF"/>
          </Canvas>
        </Canvas>
        <Canvas x:Name="PlaySymbol" Width="43.0171" Height="18.8568" Canvas.Left="1.20181" Canvas.Top="1.46829">
          <Path Width="10.1896" Height="12.9614" Canvas.Left="18.305" Canvas.Top="2.75436" Stretch="Fill" StrokeThickness="0.5" StrokeLineJoin="Round" Stroke="#FF9E9E9E" Fill="#FFFFFFFF" Data="F1 M 18.555,15.4658L 28.2446,9.04706L 18.6298,3.00436L 18.555,15.4658 Z "/>
        </Canvas>
      </Canvas>
    	<Canvas x:Name="PreviousButton" Width="25.7983" Height="22.3382" Canvas.Left="56" Canvas.Top="8.5" Opacity="0.5">
    		<Canvas.RenderTransform>
    			<TransformGroup>
    				<ScaleTransform ScaleX="1" ScaleY="1"/>
    				<SkewTransform AngleX="0" AngleY="0"/>
    				<RotateTransform Angle="0"/>
    				<TranslateTransform X="0" Y="0"/>
    			</TransformGroup>
    		</Canvas.RenderTransform>
    		<Path Width="25.7983" Height="22.3382" Canvas.Left="0" Canvas.Top="0" Stretch="Fill" StrokeThickness="0.5" StrokeLineJoin="Round" Stroke="#FF9E9E9E" Fill="#67282828" Data="F1 M 2.13977,0.25L 23.6586,0.25C 24.7022,0.25 25.5483,1.0961 25.5483,2.13977L 25.5483,20.1984C 25.5483,21.2421 24.7022,22.0882 23.6586,22.0882L 2.13977,22.0882C 1.09607,22.0882 0.25,21.2421 0.25,20.1984L 0.25,2.13977C 0.25,1.0961 1.09607,0.25 2.13977,0.25 Z "/>
    		<Path Width="23.7675" Height="20.5851" Canvas.Left="1.04919" Canvas.Top="0.876526" Stretch="Fill" StrokeThickness="0.5" StrokeLineJoin="Round" Stroke="#677F7F7F" Data="F1 M 3.18896,1.12653L 22.677,1.12653C 23.7206,1.12653 24.5667,1.9726 24.5667,3.0163L 24.5667,19.3219C 24.5667,20.3656 23.7206,21.2116 22.677,21.2116L 3.18896,21.2116C 2.14528,21.2116 1.29919,20.3656 1.29919,19.3219L 1.29919,3.0163C 1.29919,1.9726 2.14528,1.12653 3.18896,1.12653 Z ">
    			<Path.Fill>
    				<LinearGradientBrush StartPoint="0.706019,-0.405676" EndPoint="0.706019,0.556541">
    					<GradientStop Color="#00FFFFFF" Offset="0.224609"/>
    					<GradientStop Color="#67FFFFFF" Offset="0.449219"/>
    					<GradientStop Color="#00FFFFFF" Offset="0.979492"/>
    				</LinearGradientBrush>
    			</Path.Fill>
    		</Path>
    		<Path Width="10.1896" Height="12.9614" Stretch="Fill" StrokeThickness="0.5" StrokeLineJoin="Round" Stroke="#FF9E9E9E" Fill="#FFFFFFFF" Data="F1 M 18.555,15.4658L 28.2446,9.04706L 18.6298,3.00436L 18.555,15.4658 Z " Canvas.Left="5" Canvas.Top="4.5" RenderTransformOrigin="0.5,0.5">
    			<Path.RenderTransform>
    				<TransformGroup>
    					<ScaleTransform ScaleX="-1" ScaleY="1"/>
    					<SkewTransform AngleX="0" AngleY="0"/>
    					<RotateTransform Angle="0"/>
    					<TranslateTransform X="0" Y="0"/>
    				</TransformGroup>
    			</Path.RenderTransform>
    		</Path>
    		<Path Width="10.1896" Height="12.9614" Stretch="Fill" StrokeThickness="0.5" StrokeLineJoin="Round" Stroke="#FF9E9E9E" Fill="#FFFFFFFF" Data="F1 M 18.555,15.4658L 28.2446,9.04706L 18.6298,3.00436L 18.555,15.4658 Z " RenderTransformOrigin="0.5,0.5" Canvas.Left="10" Canvas.Top="4.5">
    			<Path.RenderTransform>
    				<TransformGroup>
    					<ScaleTransform ScaleX="-1" ScaleY="1"/>
    					<SkewTransform AngleX="0" AngleY="0"/>
    					<RotateTransform Angle="0"/>
    					<TranslateTransform X="0" Y="0"/>
    				</TransformGroup>
    			</Path.RenderTransform>
    		</Path>
    	</Canvas>
      <Canvas x:Name="StopButton" Width="25.7983" Height="22.3382" Canvas.Left="83.083" Canvas.Top="8.5" Opacity="0.5">
        <Canvas.RenderTransform>
          <TransformGroup>
            <ScaleTransform ScaleX="1" ScaleY="1"/>
            <SkewTransform AngleX="0" AngleY="0"/>
            <RotateTransform Angle="0"/>
            <TranslateTransform X="0" Y="0"/>
          </TransformGroup>
        </Canvas.RenderTransform>
        <Path Width="25.7983" Height="22.3382" Canvas.Left="0" Canvas.Top="0" Stretch="Fill" StrokeThickness="0.5" StrokeLineJoin="Round" Stroke="#FF9E9E9E" Fill="#67282828" Data="F1 M 2.13977,0.25L 23.6586,0.25C 24.7022,0.25 25.5483,1.0961 25.5483,2.13977L 25.5483,20.1984C 25.5483,21.2421 24.7022,22.0882 23.6586,22.0882L 2.13977,22.0882C 1.09607,22.0882 0.25,21.2421 0.25,20.1984L 0.25,2.13977C 0.25,1.0961 1.09607,0.25 2.13977,0.25 Z "/>
        <Path Width="23.7675" Height="20.5851" Canvas.Left="1.04919" Canvas.Top="0.876526" Stretch="Fill" StrokeThickness="0.5" StrokeLineJoin="Round" Stroke="#677F7F7F" Data="F1 M 3.18896,1.12653L 22.677,1.12653C 23.7206,1.12653 24.5667,1.9726 24.5667,3.0163L 24.5667,19.3219C 24.5667,20.3656 23.7206,21.2116 22.677,21.2116L 3.18896,21.2116C 2.14528,21.2116 1.29919,20.3656 1.29919,19.3219L 1.29919,3.0163C 1.29919,1.9726 2.14528,1.12653 3.18896,1.12653 Z ">
          <Path.Fill>
            <LinearGradientBrush StartPoint="0.706019,-0.405676" EndPoint="0.706019,0.556541">
              <GradientStop Color="#00FFFFFF" Offset="0.224609"/>
              <GradientStop Color="#67FFFFFF" Offset="0.449219"/>
              <GradientStop Color="#00FFFFFF" Offset="0.979492"/>
            </LinearGradientBrush>
          </Path.Fill>
        </Path>
        <Rectangle Width="8.58571" Height="8.52344" Canvas.Left="8.64009" Canvas.Top="6.90741" Stretch="Fill" StrokeThickness="0.5" StrokeLineJoin="Round" Stroke="#FF9E9E9E" Fill="#FFFFFFFF"/>
      </Canvas>
    	<Canvas x:Name="NextButton" Width="25.7983" Height="22.3382" Canvas.Left="110" Canvas.Top="8.375" Opacity="0.5">
    		<Canvas.RenderTransform>
    			<TransformGroup>
    				<ScaleTransform ScaleX="1" ScaleY="1"/>
    				<SkewTransform AngleX="0" AngleY="0"/>
    				<RotateTransform Angle="0"/>
    				<TranslateTransform X="0" Y="0"/>
    			</TransformGroup>
    		</Canvas.RenderTransform>
    		<Path Width="25.7983" Height="22.3382" Canvas.Left="0" Canvas.Top="0" Stretch="Fill" StrokeThickness="0.5" StrokeLineJoin="Round" Stroke="#FF9E9E9E" Fill="#67282828" Data="F1 M 2.13977,0.25L 23.6586,0.25C 24.7022,0.25 25.5483,1.0961 25.5483,2.13977L 25.5483,20.1984C 25.5483,21.2421 24.7022,22.0882 23.6586,22.0882L 2.13977,22.0882C 1.09607,22.0882 0.25,21.2421 0.25,20.1984L 0.25,2.13977C 0.25,1.0961 1.09607,0.25 2.13977,0.25 Z "/>
    		<Path Width="23.7675" Height="20.5851" Canvas.Left="1.04919" Canvas.Top="0.876526" Stretch="Fill" StrokeThickness="0.5" StrokeLineJoin="Round" Stroke="#677F7F7F" Data="F1 M 3.18896,1.12653L 22.677,1.12653C 23.7206,1.12653 24.5667,1.9726 24.5667,3.0163L 24.5667,19.3219C 24.5667,20.3656 23.7206,21.2116 22.677,21.2116L 3.18896,21.2116C 2.14528,21.2116 1.29919,20.3656 1.29919,19.3219L 1.29919,3.0163C 1.29919,1.9726 2.14528,1.12653 3.18896,1.12653 Z ">
    			<Path.Fill>
    				<LinearGradientBrush StartPoint="0.706019,-0.405676" EndPoint="0.706019,0.556541">
    					<GradientStop Color="#00FFFFFF" Offset="0.224609"/>
    					<GradientStop Color="#67FFFFFF" Offset="0.449219"/>
    					<GradientStop Color="#00FFFFFF" Offset="0.979492"/>
    				</LinearGradientBrush>
    			</Path.Fill>
    		</Path>
    		<Path Width="10.1896" Height="12.9614" Stretch="Fill" StrokeThickness="0.5" StrokeLineJoin="Round" Stroke="#FF9E9E9E" Fill="#FFFFFFFF" Data="F1 M 18.555,15.4658L 28.2446,9.04706L 18.6298,3.00436L 18.555,15.4658 Z " RenderTransformOrigin="0.5,0.5" Canvas.Left="11" Canvas.Top="4.5">
    			<Path.RenderTransform>
    				<TransformGroup>
    					<ScaleTransform ScaleX="1" ScaleY="1"/>
    					<SkewTransform AngleX="0" AngleY="0"/>
    					<RotateTransform Angle="0"/>
    					<TranslateTransform X="0" Y="0"/>
    				</TransformGroup>
    			</Path.RenderTransform>
    		</Path>
    		<Path Width="10.1896" Height="12.9614" Stretch="Fill" StrokeThickness="0.5" StrokeLineJoin="Round" Stroke="#FF9E9E9E" Fill="#FFFFFFFF" Data="F1 M 18.555,15.4658L 28.2446,9.04706L 18.6298,3.00436L 18.555,15.4658 Z " Canvas.Left="6" Canvas.Top="4.5"/>
    	</Canvas>
      <Canvas x:Name="Timeline" Width="172.322" Height="21.957" Canvas.Left="135.256" Canvas.Top="8.724">
        <Canvas x:Name="TimeSliderDecoration" Width="160.991" Height="10.9486" Canvas.Left="5.253" Canvas.Top="4.915">
          <Path Width="160.741" Height="10.001" Canvas.Left="0.25" Canvas.Top="0.948" Stretch="Fill" StrokeThickness="1" StrokeLineJoin="Round" Stroke="#67363535" Fill="#67282828" Data="F1 M 280.446,0.947601L 1.01801,0.947601C 0.593842,0.947601 0.25,1.29144 0.25,1.71561L 0.25,10.1806C 0.25,10.6047 0.593842,10.9486 1.01801,10.9486L 280.446,10.9486C 280.87,10.9486 281.214,10.6047 281.214,10.1806L 281.214,1.71561C 281.214,1.29144 280.87,0.947601 280.446,0.947601 Z "/>
          <Path Width="160.991" Height="10.501" Canvas.Left="0" Canvas.Top="0" Stretch="Fill" StrokeThickness="0.5" StrokeLineJoin="Round" Stroke="#FF9E9E9E" Data="F1 M 279.878,0.25L 1.58627,0.25C 0.848297,0.25 0.25,0.848267 0.25,1.58633L 0.25,8.91467C 0.25,9.65271 0.848297,10.251 1.58627,10.251L 279.878,10.251C 279.878,10.251 281.214,9.65271 281.214,8.91467L 281.214,1.58633C 281.214,0.848267 280.616,0.25 279.878,0.25 Z " x:Name="DownloadProgressSlider">
            <Path.Fill>
              <LinearGradientBrush StartPoint="0.361693,-0.233641" EndPoint="0.361693,0.729747">
                <GradientStop Color="#00FFFFFF" Offset="0.224609"/>
                <GradientStop Color="#71FFFFFF" Offset="0.449219"/>
                <GradientStop Color="#00FFFFFF" Offset="0.979492"/>
              </LinearGradientBrush>
            </Path.Fill>
          </Path>
        </Canvas>

        <Rectangle Opacity="0" Fill="#FFFFFFFF" Stroke="#FF000000" StrokeThickness="0" x:Name="TimeSlider" Width="172.322" Height="21.957"/>
        <Path x:Name="TimeThumb" Width="11.8911" Height="5.97818" Stretch="Fill" StrokeThickness="0.5" StrokeLineJoin="Round" Stroke="#FF9E9E9E" Fill="#FFFFFFFF" Data="F1 M 228.906,469.651L 223.232,464.302L 217.515,469.78L 228.906,469.651 Z " Canvas.Top="15.549"/>

      </Canvas>
      <Canvas x:Name="MuteButton" Width="26.9885" Height="23.3656" Canvas.Left="304.683" Canvas.Top="8.5" Opacity="0.5">
        <Canvas.RenderTransform>
          <TransformGroup>
            <ScaleTransform ScaleX="1" ScaleY="1"/>
            <SkewTransform AngleX="0" AngleY="0"/>
            <RotateTransform Angle="0"/>
            <TranslateTransform X="0" Y="0"/>
          </TransformGroup>
        </Canvas.RenderTransform>
        <Path Width="26.9885" Height="23.3656" Canvas.Left="0" Canvas.Top="0" Stretch="Fill" StrokeThickness="0.5" StrokeLineJoin="Round" Stroke="#FF9E9E9E" Fill="#67282828" Data="F1 M 2.13977,0.25L 24.8488,0.25C 25.8924,0.25 26.7385,1.09607 26.7385,2.13977L 26.7385,21.2258C 26.7385,22.2695 25.8924,23.1156 24.8488,23.1156L 2.13977,23.1156C 1.09607,23.1156 0.25,22.2695 0.25,21.2258L 0.25,2.13977C 0.25,1.09607 1.09607,0.25 2.13977,0.25 Z "/>
        <Path Width="24.8622" Height="21.5301" Canvas.Left="1.24356" Canvas.Top="0.917786" Stretch="Fill" StrokeThickness="0.5" StrokeLineJoin="Round" Stroke="#677F7F7F" Data="F1 M 3.38333,1.16779L 23.966,1.16779C 25.0097,1.16779 25.8558,2.01385 25.8558,3.05756L 25.8558,20.3081C 25.8558,21.3518 25.0097,22.1978 23.966,22.1978L 3.38333,22.1978C 2.33963,22.1978 1.49356,21.3518 1.49356,20.3081L 1.49356,3.05756C 1.49356,2.01385 2.33963,1.16779 3.38333,1.16779 Z ">
          <Path.Fill>
            <LinearGradientBrush StartPoint="-8.24292,-0.406665" EndPoint="-8.24292,0.556603">
              <GradientStop Color="#00FFFFFF" Offset="0.224609"/>
              <GradientStop Color="#67FFFFFF" Offset="0.449219"/>
              <GradientStop Color="#00FFFFFF" Offset="0.979492"/>
            </LinearGradientBrush>
          </Path.Fill>
        </Path>
        <Path Width="7.0647" Height="11.5131" Stretch="Fill" StrokeThickness="0.5" StrokeLineJoin="Round" Stroke="#FF9E9E9E" Fill="#FFFFFFFF" Data="F1 M 6.56018,0.60498C 6.70068,0.60498 6.8147,0.713928 6.8147,0.848358L 6.8147,11.3747C 6.8147,11.5091 6.70068,11.6181 6.56018,11.6181L 5.11133,11.6181C 4.97076,11.6181 4.85681,11.5091 4.85681,11.3747L 4.85681,11.056L 2.40826,7.98373L 0.74408,7.98373C 0.471191,7.98373 0.25,7.77222 0.25,7.51129L 0.25,4.8219C 0.25,4.56094 0.471191,4.34943 0.74408,4.34943L 2.25427,4.34943L 4.85681,1.16382L 4.85681,0.848358C 4.85681,0.713928 4.97076,0.60498 5.11133,0.60498L 6.56018,0.60498 Z " Canvas.Left="6.134" Canvas.Top="5.646"/>
        <Canvas x:Name="MuteOffSymbol" Width="6.77" Height="12.0032" Canvas.Left="14.051" Canvas.Top="5.478" Opacity="1">
          <Path Width="6.05124" Height="12.0033" Canvas.Left="0.401" Stretch="Fill" StrokeThickness="0.781219" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Stroke="#FFFFFFFF" Data="F1 M 9.40125,0.390594C 10.8362,0.390594 14.6713,1.57581 14.6713,6.41217C 14.6713,10.4524 11.2296,11.6126 9.50879,11.6126"/>
          <Path Width="3.65958" Height="7.13828" Canvas.Left="0.037" Canvas.Top="2.444" Stretch="Fill" StrokeThickness="0.781219" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Stroke="#FFFFFFFF" Data="F1 M 9.0368,2.83426C 9.70258,2.83426 11.9152,3.50568 11.9152,6.24536C 11.9152,8.53409 9.88513,9.19131 9.08673,9.19131"/>
        </Canvas>
        <Path x:Name="MuteOnSymbol" Width="21.3639" Height="21.8112" Canvas.Left="2.99272" Canvas.Top="0.777176" Stretch="Fill" StrokeThickness="0.781219" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Stroke="#FFFFFFFF" Data="F1 M 23.966,1.16779L 3.38333,22.1978" Opacity="0"/>
      </Canvas>
      <Canvas x:Name="Volume" Width="70.306" Height="32.53" Canvas.Left="332.5" Canvas.Top="4.5">
        <Canvas x:Name="VolumeSliderDecoration" Width="61.751" Height="12.2809" Canvas.Left="3.313" Canvas.Top="5.794">
          <Path Width="59.3893" Height="10.8861" Canvas.Left="1.74359" Canvas.Top="1.08633" Stretch="Fill" StrokeThickness="1" StrokeLineJoin="Round" Stroke="#67363535" Fill="#67282828" Data="F1 M 61.1329,1.08633L 61.1329,11.6174C 61.1329,12.0908 1.74359,12.0908 1.74359,11.6174L 61.1329,1.08633 Z "/>
          <Path Width="59.6938" Height="10.8778" Canvas.Left="1.74359" Canvas.Top="0.332064" Stretch="Fill" Data="F1 M 61.1329,0.343689C 61.5015,0.687347 61.5746,10.4551 61.1329,10.8747C 60.6912,11.2943 1.74359,11.3481 1.74359,10.8747C 21.54,7.36438 60.7643,0 61.1329,0.343689 Z ">
            <Path.Fill>
              <LinearGradientBrush StartPoint="0.91967,-0.298064" EndPoint="0.91967,0.599939">
                <GradientStop Color="#00FFFFFF" Offset="0.224609"/>
                <GradientStop Color="#67FFFFFF" Offset="0.449219"/>
                <GradientStop Color="#00FFFFFF" Offset="0.979492"/>
              </LinearGradientBrush>
            </Path.Fill>
          </Path>
          <Path Width="60.0529" Height="11.2149" Canvas.Left="1.49359" Canvas.Top="0.836304" Stretch="Fill" StrokeThickness="0.5" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Stroke="#67FFFFFF" Data="F1 M 61.1329,1.0863C 61.1329,1.0863 61.501,11.2039 61.1329,11.6174C 60.7649,12.0309 3.23718,11.6174 1.74359,11.6174"/>
        </Canvas>
        <Rectangle Opacity="0" Fill="#FFFFFFFF" Stroke="#FF9E9E9E" StrokeLineJoin="Round" StrokeThickness="0" x:Name="VolumeSlider" Width="70.306" Height="24.53"/>
        <Path x:Name="VolumeThumb" Width="11.8911" Height="5.97818" Stretch="Fill" StrokeThickness="0.5" StrokeLineJoin="Round" Stroke="#FF9E9E9E" Fill="#FFFFFFFF" Data="F1 M 600.38,469.651L 594.706,464.302L 588.989,469.78L 600.38,469.651 Z " Canvas.Left="-0.779" Canvas.Top="17.487"/>
      </Canvas>
    </Canvas>
  </Canvas>
</Canvas>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The GNU General Public License (GPLv3)


Written By
Roger Martin
Software Developer (Senior) Tech Info Systems
United States United States
I have nearly 20 years of industry experience in software development, architecture, and Microsoft Office products. My company Tech Info Systems provides custom software development services for corporations, governments, and other organizations. Tech Info Systems is a registered member of the Microsoft Partner Program and I am a Microsoft Certified Professional Developer (MCPD).

I am the creator and lead developer of Gallery Server Pro, a free, open source ASP.NET gallery for sharing photos, video, audio, documents, and other files over the web. It has been developed over several years and has involved thousands of hours. The end result is a robust, configurable, and professional grade gallery that can be integrated into your web site, whether you are a large corporation, small business, professional photographer, or a local church.

Comments and Discussions

Permalink
Advertise
Privacy
Cookies
Terms of Use
Layout: fixed | fluid

Posted 28 Oct 2007

Article Copyright 2007 by Roger Martin
Everything else Copyright © CodeProject, 1999-2024

Web02 2.8:2024-04-02:1