kniip/src/Kniip/Recording/ScreencastWindow.xaml

<Window x:Class="Kniip.Recording.ScreencastWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="kniip screencast" Width="980" Height="720" MinWidth="680" MinHeight="500"
        WindowStartupLocation="CenterScreen" Background="{DynamicResource WindowBrush}" Foreground="{DynamicResource InkBrush}"
        FontFamily="Segoe UI" FontSize="13" Icon="pack://application:,,,/AppIcon.ico">
    <Window.Resources>
        <Style x:Key="Handle" TargetType="Border">
            <Setter Property="Width" Value="12" />
            <Setter Property="Background" Value="{DynamicResource AccentBrush}" />
            <Setter Property="Cursor" Value="SizeWE" />
        </Style>
        <Style x:Key="Grip" TargetType="Rectangle">
            <Setter Property="Width" Value="2" />
            <Setter Property="Height" Value="14" />
            <Setter Property="Fill" Value="White" />
            <Setter Property="RadiusX" Value="1" />
            <Setter Property="RadiusY" Value="1" />
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="VerticalAlignment" Value="Center" />
        </Style>
    </Window.Resources>

    <Grid Margin="16">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <Border Background="#1E1E1E" CornerRadius="6" ClipToBounds="True" MouseLeftButtonDown="Video_MouseLeftButtonDown">
            <Grid>
                <MediaElement x:Name="Player" LoadedBehavior="Manual" UnloadedBehavior="Manual" ScrubbingEnabled="True"
                              Stretch="Uniform" MediaOpened="Player_MediaOpened" MediaEnded="Player_MediaEnded"
                              MediaFailed="Player_MediaFailed" />
                <TextBlock x:Name="PlayerMessage" Text="Opname laden..." Foreground="#CCCCCC" HorizontalAlignment="Center"
                           VerticalAlignment="Center" TextWrapping="Wrap" TextAlignment="Center" Margin="20" />
            </Grid>
        </Border>

        <Grid x:Name="TrimArea" Grid.Row="1" Height="44" Margin="0,12,0,0" Background="Transparent" Cursor="Hand"
              MouseLeftButtonDown="TrimArea_MouseLeftButtonDown" MouseMove="TrimArea_MouseMove"
              MouseLeftButtonUp="TrimArea_MouseLeftButtonUp" SizeChanged="TrimArea_SizeChanged">
            <Canvas x:Name="TrimCanvas">
                <Border x:Name="TrackBorder" Background="{DynamicResource TrackBrush}" CornerRadius="5" Height="44" />
                <Border x:Name="SelectionBorder" Background="#330067C0" BorderBrush="{DynamicResource AccentBrush}"
                        BorderThickness="0,2" Height="44" />
                <Rectangle x:Name="Playhead" Width="2" Height="52" Fill="{DynamicResource InkBrush}" Canvas.Top="-4" />
                <Border x:Name="StartHandle" Style="{StaticResource Handle}" CornerRadius="5,0,0,5" Height="44"
                        ToolTip="Begin van de selectie">
                    <Rectangle Style="{StaticResource Grip}" />
                </Border>
                <Border x:Name="EndHandle" Style="{StaticResource Handle}" CornerRadius="0,5,5,0" Height="44"
                        ToolTip="Einde van de selectie">
                    <Rectangle Style="{StaticResource Grip}" />
                </Border>
            </Canvas>
        </Grid>

        <DockPanel Grid.Row="2" Margin="0,8,0,0" LastChildFill="False">
            <Button x:Name="PlayButton" DockPanel.Dock="Left" Style="{StaticResource FlatButton}" Click="Play_Click"
                    ToolTip="Afspelen (spatiebalk)">
                <TextBlock x:Name="PlayIcon" Text="&#xE768;" Style="{StaticResource IconText}" />
            </Button>
            <TextBlock x:Name="PositionText" DockPanel.Dock="Left" VerticalAlignment="Center" Margin="6,0,0,0"
                       Foreground="{DynamicResource InkBrush}" Text="0:00.0 / 0:00.0" />

            <Button DockPanel.Dock="Right" Style="{StaticResource FlatButton}" Click="SetEnd_Click"
                    ToolTip="Einde van de selectie op de huidige positie zetten">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Einde hier" VerticalAlignment="Center" />
                    <TextBlock Text="&#xE76C;" Style="{StaticResource IconText}" FontSize="12" Margin="6,1,0,0" />
                </StackPanel>
            </Button>
            <Button DockPanel.Dock="Right" Style="{StaticResource FlatButton}" Click="SetStart_Click"
                    ToolTip="Begin van de selectie op de huidige positie zetten">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="&#xE76B;" Style="{StaticResource IconText}" FontSize="12" Margin="0,1,6,0" />
                    <TextBlock Text="Begin hier" VerticalAlignment="Center" />
                </StackPanel>
            </Button>
            <TextBlock x:Name="SelectionText" DockPanel.Dock="Right" VerticalAlignment="Center" Margin="0,0,10,0"
                       Foreground="{DynamicResource SubtleTextBrush}" />
        </DockPanel>

        <Border Grid.Row="3" Margin="0,12,0,0" Background="{DynamicResource CardBrush}" BorderBrush="{DynamicResource CardBorderBrush}" BorderThickness="1"
                CornerRadius="6" Padding="14,10">
            <DockPanel LastChildFill="True">
                <StackPanel DockPanel.Dock="Right" Orientation="Horizontal" VerticalAlignment="Center">
                    <StackPanel x:Name="BusyPanel" Orientation="Horizontal" Visibility="Collapsed" Margin="0,0,8,0">
                        <ProgressBar x:Name="Progress" Width="140" Height="6" Minimum="0" Maximum="100" VerticalAlignment="Center" />
                        <Button Style="{StaticResource FlatButton}" Content="Annuleren" Click="CancelExport_Click" Margin="6,0,0,0" />
                    </StackPanel>
                    <Button x:Name="CopyButton" Style="{StaticResource SecondaryButton}" Click="Copy_Click"
                            ToolTip="Als bestand naar het klembord kopiëren (plakken in Verkenner, Teams, Outlook, ...)">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="&#xE8C8;" Style="{StaticResource IconText}" FontSize="14" Margin="0,0,6,0" />
                            <TextBlock Text="Kopiëren" VerticalAlignment="Center" />
                        </StackPanel>
                    </Button>
                    <Button x:Name="UploadButton" Style="{StaticResource SecondaryButton}" Click="Upload_Click" Visibility="Collapsed"
                            ToolTip="Uploaden naar Zipline en de link naar het klembord kopiëren">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="&#xE898;" Style="{StaticResource IconText}" FontSize="14" Margin="0,0,6,0" />
                            <TextBlock Text="Uploaden" VerticalAlignment="Center" />
                        </StackPanel>
                    </Button>
                    <Button x:Name="SaveButton" Style="{StaticResource AccentButton}" Click="Save_Click" IsDefault="True"
                            ToolTip="Shift+klik = altijd vragen waar je opslaat">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="&#xE74E;" Style="{StaticResource IconText}" FontSize="14" Margin="0,0,6,0" />
                            <TextBlock x:Name="SaveText" Text="Opslaan als MP4..." VerticalAlignment="Center" />
                        </StackPanel>
                    </Button>
                </StackPanel>

                <StackPanel VerticalAlignment="Center">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="Formaat" Style="{StaticResource PropLabel}" />
                        <ToggleButton x:Name="Mp4Toggle" Style="{StaticResource MiniToggle}" Content="MP4" MinWidth="54"
                                      Click="Format_Click" ToolTip="Video met geluid; klein bestand, beste kwaliteit" />
                        <ToggleButton x:Name="GifToggle" Style="{StaticResource MiniToggle}" Content="GIF" MinWidth="54"
                                      Click="Format_Click" ToolTip="Bewegend plaatje zonder geluid; speelt overal af (ook in e-mail en wiki's)" />

                        <StackPanel x:Name="GifOptions" Orientation="Horizontal" Margin="14,0,0,0">
                            <TextBlock Text="Beelden/s" Style="{StaticResource PropLabel}" />
                            <ComboBox x:Name="FpsCombo" Style="{StaticResource PropCombo}" MinWidth="60" />
                            <TextBlock Text="Breedte" Style="{StaticResource PropLabel}" Margin="12,0,6,0" />
                            <ComboBox x:Name="WidthCombo" Style="{StaticResource PropCombo}" MinWidth="100" />
                        </StackPanel>
                    </StackPanel>
                    <TextBlock x:Name="InfoText" Style="{StaticResource PropLabel}" Margin="0,6,0,0" TextWrapping="Wrap" />
                    <TextBlock x:Name="SavedText" Margin="0,4,0,0" Visibility="Collapsed" FontSize="12" TextWrapping="Wrap">
                        <Run x:Name="SavedRun" Foreground="{DynamicResource InkBrush}" />
                        <Hyperlink Click="OpenFolder_Click"><Run x:Name="OpenRun" Text="Map openen" /></Hyperlink>
                    </TextBlock>
                </StackPanel>
            </DockPanel>
        </Border>
    </Grid>
</Window>