locked
How to make a CaptureElement fill the whole screen in a Universal app

    Question

  • Hi,

    I'm making a universal app and I've created a shared MainPage.xaml:

    <Page
        x:Class="MyApp.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:MyApp"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <Grid Name="MainGrid" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <CaptureElement Name="CameraPreview" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stretch="UniformToFill"/>
        </Grid>
    </Page>
    

    When I run the app, the orientation of the camera preview was rotated 90 degrees to the left, so I fixed the orientation with the SetPreviewRotation method. However, now the camera preview doesn't fill the whole screen in vertical.

    How can I make the CaptureElement fill the whole screen?

    Thanks!

    Wednesday, August 13, 2014 2:00 AM

Answers

  • Hi Jeff,

    The project is a blank project for Universal apps that simply contains the XAML above in the MainPage.xaml.

    I just realized that the reason why this is happening is because I'm testing on a Lumia 630 and the Navigation Bar is taking a little bit of vertical space that forces the camera element to resize itself. Since the only way of not losing the aspect ratio is to reduce the width, black space appears on both sides of the CaptureElement.

    I confirmed this by simply launching the inbox Camera app: when holding the phone in portrait mode, I see the same black space on both sides of the camera preview, so this is due to the navigation bar.

    Is there a way to hide the Navigation Bar from code behind?

    • Marked as answer by irodrisa Thursday, August 14, 2014 9:05 PM
    Wednesday, August 13, 2014 11:05 PM

All replies

  • Hi IR

    Can you post a simple project showing how to reproduce the problem up on OneDrive?


    Jeff Sanders (MSFT)

    @jsandersrocks - Windows Store Developer Solutions @WSDevSol
    Getting Started With Windows Azure Mobile Services development? Click here
    Getting Started With Windows Phone or Store app development? Click here
    My Team Blog: Windows Store & Phone Developer Solutions
    My Blog: Http Client Protocol Issues (and other fun stuff I support)

    Wednesday, August 13, 2014 12:56 PM
    Moderator
  • Hi Jeff,

    The project is a blank project for Universal apps that simply contains the XAML above in the MainPage.xaml.

    I just realized that the reason why this is happening is because I'm testing on a Lumia 630 and the Navigation Bar is taking a little bit of vertical space that forces the camera element to resize itself. Since the only way of not losing the aspect ratio is to reduce the width, black space appears on both sides of the CaptureElement.

    I confirmed this by simply launching the inbox Camera app: when holding the phone in portrait mode, I see the same black space on both sides of the camera preview, so this is due to the navigation bar.

    Is there a way to hide the Navigation Bar from code behind?

    • Marked as answer by irodrisa Thursday, August 14, 2014 9:05 PM
    Wednesday, August 13, 2014 11:05 PM
  • There is no navigation bar in your code so I am not sure what you are talking about.  If you can post a repro and instructions to OneDrive someone may be able to look at this for you.

    Jeff Sanders (MSFT)

    @jsandersrocks - Windows Store Developer Solutions @WSDevSol
    Getting Started With Windows Azure Mobile Services development? Click here
    Getting Started With Windows Phone or Store app development? Click here
    My Team Blog: Windows Store & Phone Developer Solutions
    My Blog: Http Client Protocol Issues (and other fun stuff I support)

    Thursday, August 14, 2014 6:27 PM
    Moderator
  • Jeff, the Navigation Bar is the bar that contains the Back, Windows and Search software buttons on the Lumia 630 (an any other Windows Phone without hardware buttons). It's just not part of the code.

    I'd like to post the whole project (or even a picture showing the Navigation Bar) so that you can see the code above in context but for some reason I get the message "Body text cannot contain images or links until we are able to verify your account" every time I try to post the link to my OneDrive zip file.

    Anyway, thanks for your help.

    Thursday, August 14, 2014 9:04 PM