<UserControl
    x:Class="StockPortfolio.MyPhoto"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ImageSamplesLib2013"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">
	<UserControl.Resources>
		<SolidColorBrush Color="#66FFFFFF" x:Key="MaskBrush" />
        <Style TargetType="TextBlock">
            <Setter Property="Foreground" Value="#FF5D5D5D"/>
        </Style>
	</UserControl.Resources>
    <Grid >
        <Grid Margin="20" >
            <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <StackPanel>
            <TextBlock Text="Name" FontSize="22"/>
                <TextBlock x:Name="Name"  FontSize="18" FontFamily="Segoe WP" FontWeight="Light" Margin="0 -5 0 10"/>
        </StackPanel>
        <StackPanel Grid.Row="1">
                <TextBlock Text="Email" FontSize="22"/>
                <TextBlock x:Name="Email"  FontSize="18"  FontFamily="Segoe WP" FontWeight="Light" Margin="0 -5 0 10"/>
        </StackPanel>
        <StackPanel Grid.Row="2">
                <TextBlock Text="Phone" FontSize="22"/>
                <TextBlock x:Name="Phone"  FontSize="18" FontFamily="Segoe WP" FontWeight="Light" Margin="0 -5 0 10"/>
        </StackPanel>
        <Grid Grid.Row="3" VerticalAlignment="Top">
            <Grid>
                <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition Height="Auto" />                    
                </Grid.RowDefinitions>
                    <StackPanel  Grid.Row="1" Margin="0 20">
                        <StackPanel Orientation="Horizontal">
                        <Button Content="Load your own image" Click="LoadImage" Margin="0 0 10 0" Width="180" HorizontalAlignment="Left" />
                        <Button Content="Export selection" Click="ExportImage" Grid.Column="1" Width="140" />
                        </StackPanel>
                        <TextBlock VerticalAlignment="Center" Text="* You can upload,crop and save your photo here." FontSize="12"/>
                    </StackPanel>
                <Grid Name="imageGrid" HorizontalAlignment="Center" VerticalAlignment="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 Stretch="None" Name="image" Grid.RowSpan="3" Grid.ColumnSpan="3" />
                    <Grid Name="topMask" Grid.ColumnSpan="2" Background="{StaticResource MaskBrush}" />
                    <Grid Name="bottomMask" Grid.Column="1" Grid.Row="2" Grid.ColumnSpan="2" Background="{StaticResource MaskBrush}" />
                    <Grid Name="leftMask" Grid.RowSpan="2" Grid.Row="1" Background="{StaticResource MaskBrush}" />
                    <Grid Name="rightMask" Grid.Column="2" Grid.RowSpan="2" Background="{StaticResource MaskBrush}" />
                </Grid>
            </Grid>
        </Grid>
    </Grid>
    </Grid>

</UserControl>
