<!--
	Copyright (c) Microsoft. All rights reserved.
-->

<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	IsTabStop="False" TabNavigation="Cycle">
  <UserControl.Resources>
    <ResourceDictionary Source="/xaml/onenote/CaptureUIStyles.xaml"/>
  </UserControl.Resources>
  <Grid x:Name="CaptureUIRoot">
    <Grid Background="{StaticResource CaptureUIBackgroundBrush}">
      <Grid.Resources>
        <Storyboard x:Name="PictureTakenStoryboard">
          <DoubleAnimation x:Name="PictureTakenDoubleAnimation" From="0" To="0" BeginTime="0:0:1" Storyboard.TargetName="PreviewImageInnerTranslate" Storyboard.TargetProperty="X" Duration="0:0:0.4">
            <DoubleAnimation.EasingFunction>
              <PowerEase EasingMode="EaseIn"/>
            </DoubleAnimation.EasingFunction>
          </DoubleAnimation>
        </Storyboard>
        <Storyboard x:Name="ModeChangedStoryboard">
          <DoubleAnimation x:Name="ModeChangedDoubleAnimation" From="1.0" To="0" Storyboard.TargetName="ModeSelectedText" Storyboard.TargetProperty="Opacity" Duration="0:0:2.0" >
            <DoubleAnimation.EasingFunction>
              <PowerEase EasingMode="EaseIn"/>
            </DoubleAnimation.EasingFunction>
          </DoubleAnimation>
        </Storyboard>
      </Grid.Resources>
      <ContentControl x:Name="ContentFocusRoot" TabIndex="0"></ContentControl>
      <FlipView x:Name="PhotoCaptureFlipView" Visibility="Collapsed" IsTabStop="False" AutomationProperties.AutomationId="PhotoCaptureFlipView" AutomationProperties.Name="{CustomResource :appstring:0x263864DCL}">
        <FlipViewItem>
          <Grid x:Name="CameraView">
            <Grid x:Name="CameraPreviewRoot" Background="{StaticResource CaptureUIBackgroundBrush}" Tapped="CameraPreviewRoot_Tapped">
              <CaptureElement x:Name="CameraPreview" RenderTransformOrigin="0.5,0.5" Stretch="UniformToFill">
                <CaptureElement.RenderTransform>
                  <TransformGroup>
                    <RotateTransform x:Name="CameraPreviewRotateTransform"/>
                    <ScaleTransform x:Name="CameraPreviewScaleTransform"/>
                  </TransformGroup>
                </CaptureElement.RenderTransform>
              </CaptureElement>
              <TextBlock x:Name="ModeSelectedText" FontFamily="Segoe UI Light" FontWeight="Light" VerticalAlignment="Bottom" Grid.Row="0" HorizontalAlignment="Stretch" TextTrimming="WordEllipsis" FontSize="48" Foreground="{StaticResource CaptureUIBackButtonForegroundThemeBrush}" Opacity="0.0" Margin="140, 0, 0, 123" IsHitTestVisible="False"></TextBlock>
            </Grid>
            <Grid x:Name="CameraWingButtons">
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="120"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
                <ColumnDefinition Width="120"></ColumnDefinition>
              </Grid.ColumnDefinitions>
              <StackPanel Orientation="Vertical" Grid.Column="2" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="0, 0, 40, 288">
                <Button x:Name="TakePictureButton" Style="{StaticResource WingButtonStyle}" Content="&#xE114;" FontSize="20" TabIndex="5" AutomationProperties.AutomationId="TakePictureAppBarButton" AutomationProperties.Name="{CustomResource :appstring:0x5ACBF974L}"  Margin="0,0,0,40"></Button>
                <Button x:Name="ShowOptionsButton" Style="{StaticResource WingButtonStyle}" Content="&#xE115;" FontSize="25" TabIndex="5" AutomationProperties.AutomationId="ShowOptionsButton" AutomationProperties.Name="{CustomResource :appstring:0x14DDB9BCL}"></Button>
              </StackPanel>
              <StackPanel Orientation="Vertical" Grid.Column="0" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="39, 0, 0, 369">
                <Grid x:Name="CaptureShowModesButtonGrid">
                  <Button x:Name="CaptureShowModesButton" Style="{StaticResource WingButtonStyle}" Content="M" FontSize="23" TabIndex="2" AutomationProperties.AutomationId="CaptureShowModesButton" AutomationProperties.Name="{CustomResource :appstring:0xEBD279ACL}"></Button>
                  <Button x:Name="CaptureWhiteboardModeSelectedButton" Style="{StaticResource WhiteboardWingButtonStyle}" FontSize="25" TabIndex="2" AutomationProperties.AutomationId="WhiteboardModeSelectedButton" AutomationProperties.Name="{CustomResource :appstring:0xEBD279ACL}"></Button>
                </Grid>
              </StackPanel>
            </Grid>
            <!-- Error screen when something goes wrong -->
            <Grid x:Name="ErrorRoot" Visibility="Collapsed">
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="120"/>
                <ColumnDefinition Width="*"/>
              </Grid.ColumnDefinitions>
              <Grid Grid.Column="1">
                <Grid.RowDefinitions>
                  <RowDefinition Height="140"/>
                  <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <!-- Title -->
                <TextBlock Text="{CustomResource :appstring:0x76E92A1BL}" Style="{StaticResource PageHeaderTextStyle}"/>
                <!-- Error text -->
                <TextBlock x:Name="ErrorDescription" Grid.Row="1" Text="" Style="{StaticResource BasicTextStyle}"/>
              </Grid>
            </Grid>
          </Grid>
        </FlipViewItem>
      </FlipView>
      <FlipView x:Name="PhotoViewFlipView" Visibility="Collapsed" AutomationProperties.AutomationId="PhotoViewFlipView" AutomationProperties.Name="{CustomResource :appstring:0x1D0568B9L}"/>
      <Grid x:Name="ImageWingOptions" Visibility="Collapsed">
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="120"></ColumnDefinition>
          <ColumnDefinition Width="*"></ColumnDefinition>
          <ColumnDefinition Width="120"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <StackPanel Orientation="Vertical" Grid.Column="0" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="41, 0, 0, 286">
          <Button x:Name="CropButton" Style="{StaticResource WingButtonStyle}" Content="&#xE123;" FontSize="25" TabIndex="2" AutomationProperties.AutomationId="CropAppBarButton" AutomationProperties.Name="{CustomResource :appstring:0x809AD427L}" Margin="0, 0, 0, 40"></Button>
          <Button x:Name="PreviewShowModesButton" Style="{StaticResource WingButtonStyle}" Content="M" FontSize="25" TabIndex="2" AutomationProperties.AutomationId="PreviewShowModesButton" AutomationProperties.Name="{CustomResource :appstring:0xEBD279ACL}" Margin="0, 0, 0, 40"></Button>
          <Button x:Name="PreviewWhiteboardModeSelectedButton" Style="{StaticResource WhiteboardWingButtonStyle}" FontSize="25" TabIndex="2" AutomationProperties.AutomationId="PreviewWhiteboardModeSelectedButton" AutomationProperties.Name="{CustomResource :appstring:0xEBD279ACL}" Margin="0, 0, 0, 40"></Button>
          <Button x:Name="DeleteButton" Style="{StaticResource WingButtonStyle}" Content="&#xE107;" FontSize="25" TabIndex="3" AutomationProperties.AutomationId="DeletePictureButton" AutomationProperties.Name="{CustomResource :appstring:0x8D7872CBL}"></Button>
        </StackPanel>
        <StackPanel Orientation="Vertical" Grid.Column="2" VerticalAlignment="Center">
          <Button x:Name="ReturnToCameraButton" Style="{StaticResource WingButtonStyle}" Content="" FontSize="25" TabIndex="4" Visibility="Collapsed"></Button>
        </StackPanel>
      </Grid>
      <Grid>
        <Grid.RowDefinitions>
          <RowDefinition Height="*"/>
          <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid Grid.Row="0">
          <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
          </Grid.RowDefinitions>
          <Button x:Name="BackButton" Click="BackButton_Click" Style="{StaticResource BackButtonStyle}" TabIndex="1" RenderTransformOrigin="0.5,0" Visibility="Collapsed">
            <Button.RenderTransform>
              <CompositeTransform></CompositeTransform>
            </Button.RenderTransform>
          </Button>
          <!-- If content needs to fit nicely between the header and the app bar, it should
               go here with Grid.Row="1" -->
        </Grid>
        <!-- If content needs to fit nicely above the app bar, but without a header, then,
             it should go here with Grid.Row="0" -->
        <Border x:Name="CroppingView" Visibility="Collapsed" Margin="30, 30, 30, 0" Grid.Row="0">
          <!-- Cropping UI will always need to be LeftToRight since the image is always leftToRight. -->
          <Grid x:Name="CroppingViewRoot" Background="Transparent" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed" FlowDirection="LeftToRight">
            <Grid.RenderTransform>
              <CompositeTransform/>
            </Grid.RenderTransform>
            <Image x:Name="ImageTaken" SizeChanged="ImageTaken_SizeChanged"
                   Stretch="Uniform" ManipulationDelta="ImageTaken_ManipulationDelta"
                   ManipulationMode="TranslateX,TranslateY,Scale,TranslateInertia,ScaleInertia" RenderTransformOrigin="0.5,0.5">
              <Image.RenderTransform>
                <CompositeTransform/>
              </Image.RenderTransform>
            </Image>
            <Polygon x:Name="ViewPolygon" IsHitTestVisible="False" Opacity="0.5" Fill="{StaticResource CaptureUIBackgroundBrush}">
              <Polygon.RenderTransform>
                <CompositeTransform/>
              </Polygon.RenderTransform>
              <!-- The following Point postions are set at runtime -->
              <Polygon.Points>
                <Point></Point>
                <Point></Point>
                <Point></Point>
                <Point></Point>
                <Point></Point>
                <Point></Point>
                <Point></Point>
                <Point></Point>
                <Point></Point>
                <Point></Point>
              </Polygon.Points>
            </Polygon>
            <Polygon x:Name="ViewPolygonInner" IsHitTestVisible="False" Opacity="1.0" Fill="Transparent" Stroke="{StaticResource ApplicationPageBackgroundThemeBrush}" StrokeThickness="2" >
              <Polygon.RenderTransform>
                <CompositeTransform/>
              </Polygon.RenderTransform>
              <Polygon.Points>
                <Point></Point>
                <Point></Point>
                <Point></Point>
                <Point></Point>
              </Polygon.Points>
            </Polygon>
            <Line x:Name="TopBorder" Stroke="Transparent" StrokeThickness="30"/>
            <Line x:Name="RightBorder" Stroke="Transparent" StrokeThickness="30"/>
            <Line x:Name="BottomBorder" Stroke="Transparent" StrokeThickness="30"/>
            <Line x:Name="LeftBorder" Stroke="Transparent" StrokeThickness="30"/>
            <ContentControl x:Name="TopLeftCorner" Style="{StaticResource CroppingCorner}" RenderTransformOrigin="0.5,0.5" IsTabStop="False" TabIndex="12">
              <ContentControl.RenderTransform>
                <CompositeTransform/>
              </ContentControl.RenderTransform>
              <ContentControl.ContentTemplate>
                <DataTemplate>
                  <Grid>
                    <!-- We still want our ellipse shape, so make out button transparent. Also set hit test to false since we already handle that with pointer events -->
                    <Button AutomationProperties.Name="{CustomResource :appstring:0x2BC5C1ACL}" VerticalAlignment="Center" HorizontalAlignment="Center" IsHitTestVisible="False" Height="50" Width="50" Foreground="Transparent" BorderBrush="Transparent" Background="Transparent">
                    </Button>
                    <Ellipse Height="100" Width="100" IsTapEnabled="False" Fill="Transparent" Stroke="Transparent">
                    </Ellipse>
                    <Ellipse Height="50" Width="50" IsTapEnabled="False" Fill="Transparent" Stroke="{StaticResource ApplicationForegroundThemeBrush}" StrokeThickness="2">
                    </Ellipse>
                    <Ellipse Height="46" Width="46" IsTapEnabled="False" Fill="{StaticResource ApplicationPageBackgroundThemeBrush}" Stroke="{StaticResource ApplicationPageBackgroundThemeBrush}" Opacity="0.5" StrokeThickness="2">
                    </Ellipse>
                  </Grid>
                </DataTemplate>
              </ContentControl.ContentTemplate>
            </ContentControl>
            <ContentControl x:Name="TopRightCorner" Style="{StaticResource CroppingCorner}" RenderTransformOrigin="0.5,0.5" IsTabStop="False" TabIndex="13">
              <ContentControl.RenderTransform>
                <CompositeTransform/>
              </ContentControl.RenderTransform>
              <ContentControl.ContentTemplate>
                <DataTemplate>
                  <Grid>
                    <!-- We still want our ellipse shape, so make out button transparent. Also set hit test to false since we already handle that with pointer events -->
                    <Button AutomationProperties.Name="{CustomResource :appstring:0xE3808364L}" VerticalAlignment="Center" HorizontalAlignment="Center" IsHitTestVisible="False" Height="50" Width="50" Foreground="Transparent" BorderBrush="Transparent" Background="Transparent">
                    </Button>
                    <Ellipse Height="100" Width="100" IsTapEnabled="False" Fill="Transparent" Stroke="Transparent">
                    </Ellipse>
                    <Ellipse Height="50" Width="50" IsTapEnabled="False" Fill="Transparent" Stroke="{StaticResource ApplicationForegroundThemeBrush}" StrokeThickness="2">
                    </Ellipse>
                    <Ellipse Height="46" Width="46" IsTapEnabled="False" Fill="{StaticResource ApplicationPageBackgroundThemeBrush}" Stroke="{StaticResource ApplicationPageBackgroundThemeBrush}" Opacity="0.5" StrokeThickness="2">
                    </Ellipse>
                  </Grid>
                </DataTemplate>
              </ContentControl.ContentTemplate>
            </ContentControl>
            <ContentControl x:Name="BottomRightCorner" Style="{StaticResource CroppingCorner}" RenderTransformOrigin="0.5,0.5" IsTabStop="False" TabIndex="15">
              <ContentControl.RenderTransform>
                <CompositeTransform/>
              </ContentControl.RenderTransform>
              <ContentControl.ContentTemplate>
                <DataTemplate>
                  <Grid>
                    <!-- We still want our ellipse shape, so make out button transparent. Also set hit test to false since we already handle that with pointer events -->
                    <Button AutomationProperties.Name="{CustomResource :appstring:0x38F20F6FL}" VerticalAlignment="Center" HorizontalAlignment="Center" IsHitTestVisible="False" Height="50" Width="50" Foreground="Transparent" BorderBrush="Transparent" Background="Transparent">
                    </Button>
                    <Ellipse Height="100" Width="100" IsTapEnabled="False" Fill="Transparent" Stroke="Transparent">
                    </Ellipse>
                    <Ellipse Height="50" Width="50" IsTapEnabled="False" Fill="Transparent" Stroke="{StaticResource ApplicationForegroundThemeBrush}" StrokeThickness="2">
                    </Ellipse>
                    <Ellipse Height="46" Width="46" IsTapEnabled="False" Fill="{StaticResource ApplicationPageBackgroundThemeBrush}" Stroke="{StaticResource ApplicationPageBackgroundThemeBrush}" Opacity="0.5" StrokeThickness="2">
                    </Ellipse>
                  </Grid>
                </DataTemplate>
              </ContentControl.ContentTemplate>
            </ContentControl>
            <ContentControl x:Name="BottomLeftCorner" Style="{StaticResource CroppingCorner}" RenderTransformOrigin="0.5,0.5" IsTabStop="False" TabIndex="14">
              <ContentControl.RenderTransform>
                <CompositeTransform/>
              </ContentControl.RenderTransform>
              <ContentControl.ContentTemplate>
                <DataTemplate>
                  <Grid>
                    <!-- We still want our ellipse shape, so make out button transparent. Also set hit test to false since we already handle that with pointer events -->
                    <Button AutomationProperties.Name="{CustomResource :appstring:0x2606047EL}" VerticalAlignment="Center" HorizontalAlignment="Center" IsHitTestVisible="False" Height="50" Width="50" Foreground="Transparent" BorderBrush="Transparent" Background="Transparent">
                    </Button>
                    <Ellipse Height="100" Width="100" IsTapEnabled="False" Fill="Transparent" Stroke="Transparent">
                    </Ellipse>
                    <Ellipse Height="50" Width="50" IsTapEnabled="False" Fill="Transparent" Stroke="{StaticResource ApplicationForegroundThemeBrush}" StrokeThickness="2">
                    </Ellipse>
                    <Ellipse Height="46" Width="46" IsTapEnabled="False" Fill="{StaticResource ApplicationPageBackgroundThemeBrush}" Stroke="{StaticResource ApplicationPageBackgroundThemeBrush}" Opacity="0.5" StrokeThickness="2">
                    </Ellipse>
                  </Grid>
                </DataTemplate>
              </ContentControl.ContentTemplate>
            </ContentControl>
          </Grid>
        </Border>
        <!-- This is to create the black border which prevents cropping points from rendering when out of area -->
        <Grid x:Name="CroppingBorderRoot" Visibility="Collapsed">
          <Rectangle Fill="{StaticResource CaptureUIBackgroundBrush}" Height="30" VerticalAlignment="Top"></Rectangle>
          <Rectangle Fill="{StaticResource CaptureUIBackgroundBrush}" Width="30" HorizontalAlignment="Left"></Rectangle>
          <Rectangle Fill="{StaticResource CaptureUIBackgroundBrush}" Width="30" HorizontalAlignment="Right"></Rectangle>
        </Grid>
        <Grid x:Name="AppBar" Background="Transparent" Grid.Row="1" VerticalAlignment="Bottom" MinHeight="103">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
          </Grid.ColumnDefinitions>
          <Rectangle x:Name="AppBarTranslucentBackgroundFill" Fill="{StaticResource CaptureUIAppBarBrush}" Opacity="0.7" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.ColumnSpan="3"></Rectangle>
          <Rectangle x:Name="AppBarBackgroundFill" Fill="{StaticResource CaptureUIAppBarBrush}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Visibility="Collapsed" Grid.ColumnSpan="3"></Rectangle>
          <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Grid.Column="0">
            <Button x:Name="AddImageButton" Style="{StaticResource AddImageAppBarButtonStyle}" Visibility="Collapsed" Opacity="1.0" Margin="15, 0, 0, 0"/>
          </StackPanel>
          <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Grid.Column="2" Margin="0,0,-5,0">
            <Button x:Name="UseButton" Click="UseButton_Click" Style="{StaticResource InsertAllAppBarButtonStyle}" TabIndex="9" IsEnabled="False" Opacity="1.0"/>
            <Button x:Name="OkButton" Click="OkButton_Click" Style="{StaticResource OkAppBarButtonStyle}" Visibility="Collapsed" TabIndex="16" Opacity="1.0"/>
            <Button x:Name="CancelButton" Click="CancelButton_Click" Style="{StaticResource CancelAppBarButtonStyle}" TabIndex="17" Opacity="1.0" Margin="0, 0, 20, 0" Visibility="Collapsed"/>
            <Button x:Name="CancelCaptureUIButton" Click="CancelCaptureUIButton_Click" Style="{StaticResource CancelAppBarButtonStyle}" TabIndex="17" Opacity="1.0" Margin="0, 0, 20, 0"/>
          </StackPanel>
          <ListView x:Name="ImagePreviewList" Grid.Column="1"
             Height="88"
             Padding="10"
             VerticalAlignment="Center"
             ScrollViewer.HorizontalScrollBarVisibility="Auto"
             ScrollViewer.VerticalScrollBarVisibility="Disabled"
             ScrollViewer.HorizontalScrollMode="Enabled"
             ScrollViewer.VerticalScrollMode="Disabled"
             ScrollViewer.ZoomMode="Disabled"
             SelectionMode="Single"
             ItemContainerStyle="{StaticResource ImagePreviewItemPresenterTemplate}"
             AutomationProperties.AutomationId="ImagePreviewList" 
             AutomationProperties.Name="IDS_PHOTOCAP_DISPLAY_THUMBNAIL_PREVIEW">
            <ListView.ItemsPanel>
              <ItemsPanelTemplate>
                <StackPanel
                    Orientation="Horizontal" />
              </ItemsPanelTemplate>
            </ListView.ItemsPanel>
          </ListView>
        </Grid>
      </Grid>
      <Grid x:Name="PreviewEdgeRoot" FlowDirection="LeftToRight">
        <Grid.RenderTransform>
          <TransformGroup>
            <TranslateTransform x:Name="PreviewImageInnerTranslate" X="0" Y="0"/>
          </TransformGroup>
        </Grid.RenderTransform>
        <Rectangle x:Name="ImageBackGroundForAnimation" Fill="{StaticResource CaptureUIAppBarBrush}" Opacity="1.0" Visibility="Collapsed" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></Rectangle>
        <Image x:Name="ImageForAnimation" Visibility="Collapsed"></Image>
        <Polygon x:Name="CapturePreviewPolygon" IsHitTestVisible="False" Opacity="0.5" Fill="{StaticResource CaptureUIBackgroundBrush}">
          <Polygon.RenderTransform>
            <CompositeTransform/>
          </Polygon.RenderTransform>
          <!-- The following Point postions are set at runtime -->
          <Polygon.Points>
            <Point></Point>
            <Point></Point>
            <Point></Point>
            <Point></Point>
            <Point></Point>
            <Point></Point>
            <Point></Point>
            <Point></Point>
            <Point></Point>
            <Point></Point>
          </Polygon.Points>
        </Polygon>
        <Polygon x:Name="CapturePreviewPolygonInner" IsHitTestVisible="False" Opacity="1.0" Fill="Transparent" Stroke="{StaticResource ApplicationPageBackgroundThemeBrush}" StrokeThickness="2">
          <Polygon.RenderTransform>
            <CompositeTransform/>
          </Polygon.RenderTransform>
          <!-- The following Point postions are set at runtime -->
          <Polygon.Points>
            <Point></Point>
            <Point></Point>
            <Point></Point>
            <Point></Point>
          </Polygon.Points>
        </Polygon>
        <Grid x:Name="CapturePreviewEdgeDetectionProgress" Visibility="Collapsed">
          <Grid.Resources>
            <Storyboard x:Name="EdgeDectionStoryboard">
              <DoubleAnimation x:Name="EdgeDectionStoryboardDoubleAnimation" From="0" To="1" BeginTime="0:0:0.5" Storyboard.TargetName="CapturePreviewEdgeDetectionTextAndRing" Storyboard.TargetProperty="Opacity" Duration="0:0:0.1">
              </DoubleAnimation>
            </Storyboard>
          </Grid.Resources>
          <Rectangle Fill="{StaticResource CaptureUIAppBarBrush}" Opacity="0.5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></Rectangle>
          <StackPanel x:Name="CapturePreviewEdgeDetectionTextAndRing" HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="0.0">
            <ProgressRing x:Name="CapturePreviewEdgeDetectionProgressRing" Height="64" Width="64" Foreground="{StaticResource CaptureUIBackButtonForegroundThemeBrush}" IsActive="False" />
            <TextBlock Text="{CustomResource :appstring:0xD284C8BDL}" Style="{StaticResource BasicTextStyle}" IsHitTestVisible="False"/>
          </StackPanel>
        </Grid>
      </Grid>
      <FlyoutPresenter Height="100" Width="150" Visibility="Collapsed">
        <Flyout x:Name="CameraOptionFlyout">
          <Flyout.Content>
            <Grid>
              <StackPanel>
                <TextBlock Foreground="{StaticResource CaptureUIBackgroundBrush}" Text="{CustomResource :appstring:0x76315427L}" Style="{StaticResource SettingsTitleText}"></TextBlock>
                <TextBlock Foreground="{StaticResource CaptureUICameraOptionsResolutionLabelThemeBrush}" Margin="0, 20, 0, 0" Text="{CustomResource :appstring:0xC7C2138EL}"></TextBlock>
                <ComboBox AutomationProperties.AutomationId="CameraResolutionsComboBox" AutomationProperties.Name="{CustomResource :appstring:0x1EBA5646L}" x:Name="CameraResolutionsComboBox" Width="280" Padding="8" Margin="0, 3, 0, 0" HorizontalAlignment="Left" BorderBrush="{StaticResource CaptureUICameraOptionsResolutionLabelThemeBrush}"></ComboBox>
                <Button x:Name="CameraMoreButton" VerticalAlignment="Bottom" HorizontalAlignment="Left" Foreground="{StaticResource HyperlinkForegroundThemeBrush}" Margin="0, 40, 20, 20" Content="{CustomResource :appstring:0x55FEF02DL}" Style="{StaticResource HyperLinkButton}"></Button>
              </StackPanel>
            </Grid>
          </Flyout.Content>
        </Flyout>
      </FlyoutPresenter>
      <FlyoutPresenter Height="100" Width="150" Visibility="Collapsed">
        <Flyout x:Name="DeleteFlyout" Placement="Right">
          <Flyout.Content>
            <StackPanel MinHeight="100" MinWidth="280" VerticalAlignment="Center" HorizontalAlignment="Center">
              <TextBlock AutomationProperties.AutomationId="DeleteFlyoutTextBlock" Style="{StaticResource ButtonTextStyle}" Text="{CustomResource :appstring:0x28E1722FL}" Margin="0, 20, 0, 10"></TextBlock>
              <Button AutomationProperties.AutomationId="DeleteFlyoutButton" Height="40" MinWidth="90" x:Name="DeleteFlyoutOKButton" Margin="2, 2, 0, 0" Content="{CustomResource :appstring:0xB635442FL}" HorizontalAlignment="Right"></Button>
            </StackPanel>
          </Flyout.Content>
        </Flyout>
      </FlyoutPresenter>
      <FlyoutPresenter Height="100" Width="150" Visibility="Collapsed">
        <Flyout x:Name="CancelConfirmationFlyout">
          <Flyout.Content>
            <StackPanel MinHeight="120" MinWidth="280" VerticalAlignment="Center" HorizontalAlignment="Center">
              <TextBlock AutomationProperties.AutomationId="CancelConfirmationFlyoutTextBlock" Style="{StaticResource ButtonTextStyle}" Text="{CustomResource :appstring:0x362FF671L}" Margin="0, 20, 0, 10" TextWrapping="Wrap" Width="280"></TextBlock>
              <Button AutomationProperties.AutomationId="CancelConfirmationFlyoutButton" Height="40" MinWidth="90" x:Name="CancelConfirmationFlyoutButton" Margin="2, 2, 0, 0" Content="{CustomResource :appstring:0x9756CF62L}" HorizontalAlignment="Right"></Button>
            </StackPanel>
          </Flyout.Content>
        </Flyout>
      </FlyoutPresenter>
      <FlyoutPresenter Height="100" Width="150" Visibility="Collapsed">
        <Flyout x:Name="OptionsFlyout" FlyoutPresenterStyle="{StaticResource FlyoutStyle}" Placement="Left">
          <Flyout.Content>
            <Grid>
              <StackPanel MinWidth="200">
                  <ToggleButton x:Name="ChangeFlashButton" Click="ChangeFlashButton_Click" Style="{StaticResource ChangeFlashToggleButtonStyle}" Padding="0" Background="{StaticResource FlyoutBackgroundBrush}" AutomationProperties.AutomationId="ChangeFlashAppBarButton" AutomationProperties.Name="{CustomResource :appstring:0xB62171F1L}" HorizontalAlignment="Stretch" HorizontalContentAlignment="Left"/>
                  <Button x:Name="ChangeCameraButton" Click="ChangeCameraButton_Click" Margin="0" Padding="0" Background="{StaticResource FlyoutBackgroundBrush}" AutomationProperties.AutomationId="ChangeCameraAppBarButton" AutomationProperties.Name="{CustomResource :appstring:0xFFE1A6A2L}" HorizontalAlignment="Stretch" HorizontalContentAlignment="Left">
                      <StackPanel Orientation="Horizontal">
                          <Grid Width="36" Height="34" Margin="5,5,-5,5" HorizontalAlignment="Center">
                              <ContentControl x:Name="ChangeCameraContent" Content="&#xE124;" FontFamily="Segoe UI Symbol" HorizontalAlignment="Center" Margin="15,-1,0,0" VerticalAlignment="Center" IsTabStop="False" />
                          </Grid>
                          <TextBlock FontSize="14.66" Text="{CustomResource :appstring:0xFFE1A6A2L}" Style="{StaticResource ButtonTextStyle}" VerticalAlignment="Center" HorizontalAlignment="Left" />
                      </StackPanel>
                  </Button>
                  <Button x:Name="CameraOptionButton" Click="CameraOptionButton_Click" Margin="0" Padding="0" Background="{StaticResource FlyoutBackgroundBrush}" AutomationProperties.AutomationId="CameraOptionAppBarButton" AutomationProperties.Name="{CustomResource :appstring:0x76315427L}" HorizontalAlignment="Stretch" HorizontalContentAlignment="Left">
                      <StackPanel  Orientation="Horizontal">
                          <Grid Width="36" Height="34" Margin="5,5,-5,5" HorizontalAlignment="Center">
                              <ContentControl x:Name="CameraOptionContent" Content="&#xE133;" FontFamily="Segoe UI Symbol" HorizontalAlignment="Center" Margin="15,-1,0,0" VerticalAlignment="Center" IsTabStop="False" />
                          </Grid>
                          <TextBlock FontSize="14.66" Text="{CustomResource :appstring:0x10C6606EL}" Style="{StaticResource ButtonTextStyle}" VerticalAlignment="Center" HorizontalAlignment="Left" />
                      </StackPanel>
                  </Button>
              </StackPanel>
            </Grid>
          </Flyout.Content>
        </Flyout>
      </FlyoutPresenter>
      <FlyoutPresenter Height="100" Width="150" Visibility="Collapsed">
        <Flyout x:Name="ModeChangeFlyout" FlyoutPresenterStyle="{StaticResource FlyoutStyle}" Placement="Right">
          <Flyout.Content>
            <StackPanel MinWidth="200" >
              <ToggleButton x:Name="StandardCameraButton" Style="{StaticResource ModeToggleButtonStyle}" TabIndex="2" AutomationProperties.AutomationId="StandardCameraAppBarButton" AutomationProperties.Name="{CustomResource :appstring:0xB2C719C4L}" Padding="0" Margin="0">
                  <StackPanel  Orientation="Horizontal" >
                      <Grid Width="36" Height="34" Margin="5,5,-5,5" HorizontalAlignment="Left" FlowDirection="LeftToRight">
                          <ContentControl x:Name="StandardContent" Content="&#xE187;" FontFamily="Segoe UI Symbol" HorizontalAlignment="Center" FontSize="24" Margin="0,2,-2,-11" VerticalAlignment="Center" Height="48" Width="29" IsTabStop="False" />
                      </Grid>
                      <TextBlock Text="{CustomResource :appstring:0x30EC3EAEL}" Style="{StaticResource ButtonTextStyle}" VerticalAlignment="Center" HorizontalAlignment="Left" />
                  </StackPanel>
              </ToggleButton>
              <ToggleButton x:Name="DocumentCameraButton" Style="{StaticResource ModeToggleButtonStyle}" TabIndex="3" AutomationProperties.AutomationId="DocumentCameraAppBarButton" AutomationProperties.Name="{CustomResource :appstring:0xF2090DD2L}" Padding="0" Margin="0">
                  <StackPanel Orientation="Horizontal">
                      <Grid Width="36" Height="34" Margin="5,5,-5,5" HorizontalAlignment="Left" FlowDirection="LeftToRight">
                          <ContentControl x:Name="DocumentContent" Content="&#xE160;" FontFamily="Segoe UI Symbol" HorizontalAlignment="Center" FontSize="24" Margin="0,2,-2,-11" VerticalAlignment="Center" Height="48" Width="29" IsTabStop="False" />
                      </Grid>
                      <TextBlock Text="{CustomResource :appstring:0x8D1287C9L}" Style="{StaticResource ButtonTextStyle}" VerticalAlignment="Center" HorizontalAlignment="Left" />
                  </StackPanel>
              </ToggleButton>
              <ToggleButton x:Name="WhiteBoardCameraButton" Style="{StaticResource ModeToggleButtonStyle}" TabIndex="4" AutomationProperties.AutomationId="WhiteBoardCameraAppBarButton" AutomationProperties.Name="{CustomResource :appstring:0x2A11EC3CL}" Padding="0">
                  <StackPanel  Orientation="Horizontal"  >
                    <StackPanel VerticalAlignment="Top">
                      <Grid Width="36" Height="34" Margin="5,5,-5,5" HorizontalAlignment="Left" FlowDirection="LeftToRight">
                          <ContentControl x:Name="WhiteboardContent" Content="&#x25AD;" HorizontalAlignment="Center" FontSize="24" Margin="3,-6,-2,-11" VerticalAlignment="Center" Height="48" Width="29" IsTabStop="False" />
                          <ContentControl x:Name="WhiteboardContent2" Content="⚺" HorizontalAlignment="Center" Margin="-5,33,7,-17" Height="19" Width="29" FontSize="24" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" IsTabStop="False" >
                              <ContentControl.RenderTransform>
                                  <CompositeTransform TranslateY="-10" Rotation="180"/>
                              </ContentControl.RenderTransform>
                          </ContentControl>
                      </Grid>
                    </StackPanel>
                    <TextBlock Text="{CustomResource :appstring:0xC3259709L}" Style="{StaticResource ButtonTextStyle}" VerticalAlignment="Center" HorizontalAlignment="Left" />
                </StackPanel>
              </ToggleButton>
            </StackPanel>
          </Flyout.Content>
        </Flyout>
      </FlyoutPresenter>
    </Grid>
  </Grid>
</UserControl>
