Custom camera view UWP C#

Question

How can I make custom camera view, like Messenger app has, for example? With possibility of making photos and using flash?

I have trying to use UWP samples, but I couldn't find a
suitable solution.

Answer 1

For the layout part, you can for example code like this:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <CaptureElement Name="PreviewControl" Stretch="Uniform" />
    <StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Bottom"
                Orientation="Vertical" Background="Transparent" Padding="10,10">
        <TextBlock Text="Hold for Video, tap for photo" FontSize="15" Foreground="White"
                   HorizontalAlignment="Center" />
        <Grid Margin="0,5,0,0" Background="#7FD3D3D3" Padding="10,10">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <TextBlock Text="Cancel" FontSize="15" Foreground="White" Margin="10,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Left" />
            <Border Height="50" Width="50" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Center"
                    CornerRadius="25" BorderBrush="White" BorderThickness="2" Tapped="Border_Tapped" Holding="Border_Holding">
                <Ellipse Width="40" Height="40" Fill="White" />
            </Border>
            <SymbolIcon Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,10,0" Symbol="Camera" Foreground="White"
                        Tapped="SymbolIcon_Tapped" />
        </Grid>
    </StackPanel>
</Grid>

With possibility of making photos and using flash?

For taking photos and videos part, you can refer to the official Basic camera app sample , integrate the code into your sample then in the Tapped and Holding events of Border :

private async void Border_Tapped(object sender, TappedRoutedEventArgs e)
{
    await TakePhotoAsync();
}

private async void Border_Holding(object sender, HoldingRoutedEventArgs e)
{
    await StartRecordingAsync();
}

To enable the flash of camera, you can set:

_mediaCapture.VideoDeviceController.FlashControl.Enabled = true; 

I don't know what is the camera symbol for, so I assume that you want to enable/disable the flash for example like this:

private void SymbolIcon_Tapped(object sender, TappedRoutedEventArgs e)
{
    _mediaCapture.VideoDeviceController.FlashControl.Enabled = !_mediaCapture.VideoDeviceController.FlashControl.Enabled;
}

And I think you may also need to customize the layout when the control is tapped, or when video is being recorded and rotation of the layout, and so on...