AmiReel/Controls/SourceCropEditor.xaml

<?xml version="1.0" encoding="utf-8" ?>
<UserControl
    x:Class="AmiReel.Controls.SourceCropEditor"
    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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel Spacing="10" MinWidth="640">
        <TextBlock x:Name="StatusText"
                   Text="Drag a keep-region, then resize it with the handles. Zoom and brightness are for viewing only."
                   Style="{StaticResource MutedTextStyle}"
                   TextWrapping="WrapWholeWords" />
        <ProgressBar x:Name="LoadProgress"
                     IsIndeterminate="True"
                     Height="6"
                     Visibility="Collapsed"
                     AutomationProperties.Name="Loading source frame" />
        <Grid ColumnSpacing="16">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Slider x:Name="ZoomSlider"
                    Grid.Column="0"
                    Header="Zoom"
                    Minimum="1"
                    Maximum="4"
                    StepFrequency="0.25"
                    TickFrequency="0.5"
                    SnapsTo="StepValues"
                    Value="1"
                    ValueChanged="ZoomSlider_ValueChanged"
                    AutomationProperties.Name="View zoom"
                    AutomationProperties.AutomationId="CropZoomSlider" />
            <Slider x:Name="BrightnessSlider"
                    Grid.Column="1"
                    Header="View brightness"
                    Minimum="-0.7"
                    Maximum="0.7"
                    StepFrequency="0.05"
                    TickFrequency="0.35"
                    SnapsTo="StepValues"
                    Value="0"
                    ValueChanged="BrightnessSlider_ValueChanged"
                    AutomationProperties.Name="View brightness"
                    AutomationProperties.AutomationId="CropBrightnessSlider" />
        </Grid>
        <ScrollViewer HorizontalScrollBarVisibility="Auto"
                      VerticalScrollBarVisibility="Disabled"
                      HorizontalScrollMode="Auto"
                      VerticalScrollMode="Disabled"
                      AutomationProperties.Name="Crop preview frames">
            <StackPanel x:Name="FrameStrip" Orientation="Horizontal" Spacing="8" />
        </ScrollViewer>
        <Border Background="{ThemeResource PageBrush}"
                BorderBrush="{ThemeResource BorderBrush}"
                BorderThickness="1"
                CornerRadius="8">
            <ScrollViewer x:Name="CropScroller"
                          Height="420"
                          ZoomMode="Disabled"
                          HorizontalScrollBarVisibility="Auto"
                          VerticalScrollBarVisibility="Auto"
                          HorizontalScrollMode="Auto"
                          VerticalScrollMode="Auto"
                          SizeChanged="CropScroller_SizeChanged"
                          PointerWheelChanged="CropScroller_PointerWheelChanged"
                          AutomationProperties.Name="Source crop view">
                <Grid x:Name="ImageSurface"
                      HorizontalAlignment="Center"
                      VerticalAlignment="Center"
                      Background="Transparent"
                      IsTabStop="True"
                      UseSystemFocusVisuals="True"
                      PointerPressed="ImageSurface_PointerPressed"
                      PointerMoved="ImageSurface_PointerMoved"
                      PointerReleased="ImageSurface_PointerReleased"
                      PointerCaptureLost="ImageSurface_PointerCaptureLost"
                      KeyDown="ImageSurface_KeyDown"
                      AutomationProperties.Name="Source crop frame"
                      AutomationProperties.AutomationId="SourceCropHost">
                    <Image x:Name="SourceImage"
                           Stretch="Fill"
                           IsHitTestVisible="False"
                           AutomationProperties.Name="Source video frame" />
                    <Rectangle x:Name="BrightnessOverlay"
                               IsHitTestVisible="False"
                               Fill="White"
                               Opacity="0" />
                    <Canvas x:Name="OverlayCanvas" IsHitTestVisible="False">
                        <Rectangle x:Name="SelectionRect"
                                   Stroke="{ThemeResource AccentBrush}"
                                   StrokeThickness="2"
                                   Fill="#33007ACC"
                                   Visibility="Collapsed" />
                        <Rectangle x:Name="HandleNW" Width="10" Height="10" Fill="{ThemeResource AccentBrush}" Stroke="{ThemeResource PageBrush}" StrokeThickness="1" Visibility="Collapsed" />
                        <Rectangle x:Name="HandleN" Width="10" Height="10" Fill="{ThemeResource AccentBrush}" Stroke="{ThemeResource PageBrush}" StrokeThickness="1" Visibility="Collapsed" />
                        <Rectangle x:Name="HandleNE" Width="10" Height="10" Fill="{ThemeResource AccentBrush}" Stroke="{ThemeResource PageBrush}" StrokeThickness="1" Visibility="Collapsed" />
                        <Rectangle x:Name="HandleE" Width="10" Height="10" Fill="{ThemeResource AccentBrush}" Stroke="{ThemeResource PageBrush}" StrokeThickness="1" Visibility="Collapsed" />
                        <Rectangle x:Name="HandleSE" Width="10" Height="10" Fill="{ThemeResource AccentBrush}" Stroke="{ThemeResource PageBrush}" StrokeThickness="1" Visibility="Collapsed" />
                        <Rectangle x:Name="HandleS" Width="10" Height="10" Fill="{ThemeResource AccentBrush}" Stroke="{ThemeResource PageBrush}" StrokeThickness="1" Visibility="Collapsed" />
                        <Rectangle x:Name="HandleSW" Width="10" Height="10" Fill="{ThemeResource AccentBrush}" Stroke="{ThemeResource PageBrush}" StrokeThickness="1" Visibility="Collapsed" />
                        <Rectangle x:Name="HandleW" Width="10" Height="10" Fill="{ThemeResource AccentBrush}" Stroke="{ThemeResource PageBrush}" StrokeThickness="1" Visibility="Collapsed" />
                    </Canvas>
                </Grid>
            </ScrollViewer>
        </Border>
        <Grid ColumnSpacing="10">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <TextBlock x:Name="InsetsText"
                       Grid.Column="0"
                       Text="Crop L0  R0  T0  B0"
                       Style="{StaticResource MutedTextStyle}"
                       VerticalAlignment="Center" />
            <Button x:Name="ClearCropButton"
                    Grid.Column="1"
                    Content="Clear crop"
                    Click="ClearCrop_Click"
                    AutomationProperties.Name="Clear crop"
                    AutomationProperties.AutomationId="ClearSourceCropButton" />
        </Grid>
    </StackPanel>
</UserControl>