Bellwether/VideoPlayer/VideoPlayer.xaml

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:VideoPlayer"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    d:DesignHeight="300"
    d:DesignWidth="300"
    ClipToBounds="True"
    mc:Ignorable="d"
    x:Class="VideoPlayer.VideoPlayer">
    <UserControl.Resources>
        <Style x:Key="SliderRepeatButton" TargetType="RepeatButton">
            <Setter Property="SnapsToDevicePixels" Value="False" />
            <Setter Property="OverridesDefaultStyle" Value="true" />
            <Setter Property="IsTabStop" Value="false" />
            <Setter Property="Focusable" Value="false" />
            <Setter Property="Delay" Value="1" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="RepeatButton">
                        <Border Background="Transparent" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="SliderRepeatButton1" TargetType="RepeatButton">
            <Setter Property="SnapsToDevicePixels" Value="False" />
            <Setter Property="OverridesDefaultStyle" Value="true" />
            <Setter Property="Delay" Value="1" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="RepeatButton">
                        <Border
                            Height="10"
                            Margin="2,0,2,0"
                            Background="White"
                            BorderThickness="0"
                            CornerRadius="4"
                            SnapsToDevicePixels="False" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="SliderRepeatButton2" TargetType="RepeatButton">
            <Setter Property="SnapsToDevicePixels" Value="False" />
            <Setter Property="OverridesDefaultStyle" Value="true" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="RepeatButton">
                        <Grid>
                            <Border
                                Background="White"
                                BorderThickness="0"
                                CornerRadius="5"
                                SnapsToDevicePixels="False" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="SliderThumb" TargetType="Thumb">
            <Setter Property="SnapsToDevicePixels" Value="False" />
            <Setter Property="OverridesDefaultStyle" Value="true" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Thumb">
                        <Canvas>
                            <Rectangle
                                Canvas.Left="-25"
                                Canvas.Top="-14"
                                Width="50"
                                Height="50"
                                Fill="Transparent" />
                        </Canvas>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="SliderVerticalThumb" TargetType="Thumb">
            <Setter Property="SnapsToDevicePixels" Value="False" />
            <Setter Property="OverridesDefaultStyle" Value="true" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Thumb">
                        <Rectangle
                            Width="40"
                            Height="13"
                            Margin="-3,-5,-3,-5"
                            Fill="White" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <ControlTemplate x:Key="Slider" TargetType="Slider">
            <Grid Background="Transparent">
                <Border
                    x:Name="TrackBackground"
                    Height="10"
                    Margin="2,0,2,0"
                    VerticalAlignment="Center"
                    Background="White"
                    BorderThickness="0"
                    CornerRadius="4"
                    Opacity="0.5" />
                <Track x:Name="PART_Track">
                    <Track.DecreaseRepeatButton>
                        <RepeatButton Command="Slider.DecreaseLarge" Style="{StaticResource SliderRepeatButton1}" />
                    </Track.DecreaseRepeatButton>
                    <Track.Thumb>
                        <Thumb HorizontalAlignment="Center" Style="{StaticResource SliderThumb}" />
                    </Track.Thumb>
                    <Track.IncreaseRepeatButton>
                        <RepeatButton Command="Slider.IncreaseLarge" Style="{StaticResource SliderRepeatButton}" />
                    </Track.IncreaseRepeatButton>
                </Track>
            </Grid>
        </ControlTemplate>

        <ControlTemplate x:Key="Slider2" TargetType="Slider">
            <Grid Margin="0,5,0,5">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="1*" />
                </Grid.ColumnDefinitions>
                <Border
                    x:Name="TrackBackground"
                    Grid.Column="1"
                    Background="White"
                    BorderThickness="0"
                    CornerRadius="5"
                    Opacity="0.5" />
                <Track x:Name="PART_Track" Grid.Column="1">
                    <Track.DecreaseRepeatButton>
                        <RepeatButton Command="Slider.DecreaseLarge" Style="{StaticResource SliderRepeatButton2}" />
                    </Track.DecreaseRepeatButton>
                    <Track.Thumb>
                        <Thumb Style="{StaticResource SliderVerticalThumb}" />
                    </Track.Thumb>
                    <Track.IncreaseRepeatButton>
                        <RepeatButton Command="Slider.IncreaseLarge" Style="{StaticResource SliderRepeatButton}" />
                    </Track.IncreaseRepeatButton>
                </Track>
            </Grid>
        </ControlTemplate>

        <Style x:Key="Horizontal_Slider" TargetType="Slider">
            <Setter Property="Focusable" Value="False" />
            <Setter Property="SnapsToDevicePixels" Value="False" />
            <Setter Property="OverridesDefaultStyle" Value="true" />
            <Style.Triggers>
                <Trigger Property="Orientation" Value="Horizontal">
                    <Setter Property="MinHeight" Value="50" />
                    <Setter Property="MinWidth" Value="104" />
                    <Setter Property="Template" Value="{StaticResource Slider}" />
                </Trigger>
            </Style.Triggers>
        </Style>

        <Style x:Key="Vertical_Slider" TargetType="Slider">
            <Setter Property="Focusable" Value="False" />
            <Setter Property="SnapsToDevicePixels" Value="False" />
            <Setter Property="OverridesDefaultStyle" Value="true" />
            <Style.Triggers>
                <Trigger Property="Orientation" Value="Vertical">
                    <Setter Property="Template" Value="{StaticResource Slider2}" />
                </Trigger>
            </Style.Triggers>
        </Style>

        <Storyboard x:Key="sbShowVolSlider" Storyboard.TargetName="uxVolumeGrid">
            <ThicknessAnimation
                Storyboard.TargetProperty="Margin"
                To="0,0,0,0"
                Duration="0:0:0.2" />
        </Storyboard>

        <Storyboard x:Key="sbHideVolSlider" Storyboard.TargetName="uxVolumeGrid">
            <ThicknessAnimation
                Storyboard.TargetProperty="Margin"
                To="0,165,0,0"
                Duration="0:0:0.2" />
        </Storyboard>
    </UserControl.Resources>

    <Grid
        Background="Black"
        IsManipulationEnabled="True"
        PreviewTouchUp="Grid_PreviewTouchUp"
        TouchDown="ResetTimer"
        TouchMove="ResetTimer"
        TouchUp="Global_TouchUp">
        <Canvas
            x:Name="uxVideoPanel"
            Grid.Column="0"
            TouchDown="uxVideoPanel_TouchDown" />
        <Grid
            x:Name="uxControlPanel"
            Height="30"
            Margin="0,0,0,50"
            VerticalAlignment="Bottom"
            Visibility="Collapsed">
            <Grid.RenderTransform>
                <ScaleTransform CenterY="30" ScaleY="1" />
            </Grid.RenderTransform>
            <Grid.Background>
                <SolidColorBrush Opacity="0.7" Color="Black" />
            </Grid.Background>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="15" />
                <ColumnDefinition Width="30" />
                <ColumnDefinition Width="15" />
                <ColumnDefinition Width="30" />
                <ColumnDefinition Width="15" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="15" />
                <ColumnDefinition Width="30" />
                <ColumnDefinition Width="15" />
            </Grid.ColumnDefinitions>
            <Image
                Grid.Column="1"
                RenderOptions.BitmapScalingMode="HighQuality"
                Source="/VideoPlayer;component/VideoPlayerImage/pause.png"
                Stretch="Fill"
                TouchDown="pause_TouchDown" />
            <Image
                Grid.Column="3"
                RenderOptions.BitmapScalingMode="HighQuality"
                Source="/VideoPlayer;component/VideoPlayerImage/stop.png"
                Stretch="Fill"
                TouchDown="stop_TouchDown" />
            <Grid
                Grid.Column="5"
                TouchDown="uxProgressSlider_TouchDown"
                TouchMove="uxProgressSlider_TouchMove"
                TouchUp="uxProgressSlider_TouchUp">
                <Slider
                    x:Name="uxProgressSlider"
                    VerticalAlignment="Center"
                    Style="{StaticResource Horizontal_Slider}"
                    TouchDown="uxProgressSlider_TouchDown"
                    TouchMove="uxProgressSlider_TouchMove"
                    ValueChanged="uxProgressSlider_ValueChanged"
                    Value="5" />
            </Grid>
            <Grid
                x:Name="uxVolumeBase"
                Grid.Column="7"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                SnapsToDevicePixels="False">
                <Image
                    x:Name="uxSound"
                    Grid.Column="3"
                    RenderOptions.BitmapScalingMode="HighQuality"
                    Source="/VideoPlayer;component/VideoPlayerImage/sound.png"
                    Stretch="Fill"
                    TouchDown="uxSound_TouchDown" />
                <Image
                    x:Name="uxNoSound"
                    Grid.Column="3"
                    RenderOptions.BitmapScalingMode="HighQuality"
                    Source="/VideoPlayer;component/VideoPlayerImage/no-sound.png"
                    Stretch="Fill"
                    TouchDown="uxSound_TouchDown"
                    Visibility="Collapsed" />
                <Canvas Margin="0,-150,0,0">
                    <Grid
                        x:Name="uxVolumeGrid"
                        Width="{Binding ElementName=uxVolumeBase, Path=ActualWidth}"
                        Height="150"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Top"
                        TouchDown="uxVolumeGrid_TouchDown"
                        TouchMove="uxVolumeGrid_TouchMove"
                        Visibility="Collapsed">
                        <Slider
                            x:Name="uxVolumeSlider"
                            Orientation="Vertical"
                            Style="{StaticResource Vertical_Slider}"
                            TouchDown="uxVolumeSlider_TouchDown"
                            TouchMove="uxVolumeSlider_TouchMove"
                            ValueChanged="uxVolumeSlider_ValueChanged"
                            Value="5" />
                        <Grid.Background>
                            <SolidColorBrush Opacity="0.7" Color="Black" />
                        </Grid.Background>
                    </Grid>
                    <Canvas.Clip>
                        <RectangleGeometry Rect="0,0,50,150" />
                    </Canvas.Clip>
                </Canvas>
            </Grid>
        </Grid>
        <Grid
            x:Name="uxCoverImageParent"
            Grid.Row="0"
            Visibility="Visible">
            <Image
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Source="/VideoPlayer;component/VideoPlayerImage/play.png"
                Stretch="UniformToFill" />
        </Grid>
        <Grid
            x:Name="uxPlayButtonParent"
            Grid.Row="0"
            IsManipulationEnabled="True"
            Visibility="Visible">
            <Grid.Background>
                <SolidColorBrush Opacity="0.3" Color="Black" />
            </Grid.Background>
            <Image
                x:Name="uxPlayButton"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                RenderOptions.BitmapScalingMode="HighQuality"
                Source="/VideoPlayer;component/VideoPlayerImage/play.png"
                Stretch="None"
                TouchUp="uxPlayButton_TouchUp">
                <Image.RenderTransform>
                    <ScaleTransform CenterX="49" CenterY="49" />
                </Image.RenderTransform>
            </Image>
        </Grid>
    </Grid>
</UserControl>