<UserControl x:Class="ControlExplorer.Controls.Imaging.ImageManipulation"
    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"
    d:DesignHeight="480" d:DesignWidth="480">

    <UserControl.Resources>
        <SolidColorBrush Color="#55FFFFFF" x:Key="MaskBrush"/>
    </UserControl.Resources>

    <Grid>        
        <Button x:Name="btnPickPicture" Content="Pick a picture" 
                Click="btnPickPicture_Click"
                VerticalAlignment="Center" HorizontalAlignment="Center" />

        <Grid Name="imageGrid" VerticalAlignment="Center" HorizontalAlignment="Center">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <Image x:Name="image" Stretch="None" Grid.RowSpan="3" Grid.ColumnSpan="3" Visibility="Collapsed"/>
            
            <Grid x:Name="topMask" Grid.ColumnSpan="2" Background="{StaticResource MaskBrush}" IsHitTestVisible="False"/>
            <Grid x:Name="bottomMask" Grid.Column="1" Grid.Row="2" Grid.ColumnSpan="2" Background="{StaticResource MaskBrush}" IsHitTestVisible="False" />
            <Grid x:Name="leftMask" Grid.RowSpan="2" Grid.Row="1" Background="{StaticResource MaskBrush}" IsHitTestVisible="False" />
            <Grid x:Name="rightMask" Grid.Column="2" Grid.RowSpan="2" Background="{StaticResource MaskBrush}" IsHitTestVisible="False" />
        </Grid>

    </Grid>

</UserControl>
