MainPage.xaml

<!--
//*********************************************************
//
// Copyright (c) Microsoft. All rights reserved.
// This code is licensed under the MIT License (MIT).
// THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF
// ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY
// IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR
// PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.
//
//*********************************************************
-->

<Page
    x:Class="CameraFaceDetection.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CameraFaceDetection"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
        <SolidColorBrush x:Key="TranslucentBlackBrush" Color="Black" Opacity="0.3"/>
    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.Resources>
            <Style TargetType="Button">
                <Setter Property="Margin" Value="10,40"/>
                <Setter Property="MinWidth" Value="80"/>
                <Setter Property="MinHeight" Value="80"/>
                <Setter Property="Foreground" Value="White"/>
                <Setter Property="Background" Value="{StaticResource TranslucentBlackBrush}"/>
                <Setter Property="BorderBrush" Value="White"/>
                <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
            </Style>
            <Style TargetType="Viewbox">
                <Setter Property="MaxHeight" Value="40"/>
                <Setter Property="MaxWidth" Value="40"/>
            </Style>
        </Grid.Resources>

        <!--Camera preview-->
        <CaptureElement Name="PreviewControl" Stretch="Uniform"/>
        
        <Canvas>
            <!--Canvas that will host the face detection bounding boxes, will share the same bounds as the preview within the CaptureElement-->
            <!--It's contained inside of another canvas to allow for adjusting its size and position after applying a RenderTransform -->
            <!--For more details, see SetFacesCanvasRotation-->
            <Canvas Name="FacesCanvas" RenderTransformOrigin="0.5,0.5"/>
        </Canvas>

        <TextBlock x:Name="infoshowText" Margin="20,30,20,0" FontSize="20" Foreground="White" Text="欢迎光临"  VerticalAlignment="Top" HorizontalAlignment="Center"></TextBlock>
        <MediaElement x:Name="media" AutoPlay="False" />
        <!-- Capture + Record buttons -->
        <StackPanel HorizontalAlignment="Right" VerticalAlignment="Center">
            <Button Name="PhotoButton" Tapped="PhotoButton_Tapped" IsEnabled="False" Visibility="Collapsed">
                <Viewbox>
                    <SymbolIcon Symbol="Camera"/>
                </Viewbox>
            </Button>

            <Button Name="VideoButton" Tapped="VideoButton_Tapped" IsEnabled="False" Visibility="Collapsed">
                <Grid>
                    <Ellipse x:Name="StartRecordingIcon" Fill="Red" Width="20" Height="20"/>
                    <Rectangle x:Name="StopRecordingIcon" Fill="White" Width="20" Height="20" Visibility="Collapsed"/>
                </Grid>
            </Button>
        </StackPanel>

        <!--Button to enable / disable face detection-->
        <Button Name="FaceDetectionButton" Tapped="FaceDetectionButton_Tapped" IsEnabled="False">
            <Viewbox>
                <Grid>
                    <SymbolIcon Name="FaceDetectionDisabledIcon" Symbol="Contact" Visibility="Visible"/>
                    <SymbolIcon Name="FaceDetectionEnabledIcon" Symbol="Contact2" Visibility="Collapsed"/>
                </Grid>
            </Viewbox>
        </Button>
    </Grid>
</Page>