Setting CaptureElement width to fill parent area at Windows Phone 8.1

Question

Following this post: How can I bind source MediaCapture to CaptureElement using Caliburn.Micro? I tried to build my own photo capture Windows Phone 8.1 WinRT app. But even if I set horizontal and vertical content aligment of ContentControl to stretch, my CaptureElement is very small (about 100px/80px).

Here is my xaml

<Grid Margin="0,20,0,0">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <ContentControl Content="{Binding CaptureElement}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,20" Grid.Row="0"
                                        HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"
                                        Visibility="{Binding IsInCaptureMode, Converter={StaticResource BoolToVisibilityConverter}}"/>


        <Button Grid.Row="1" Content="Take" Command="{Binding TakePhotoCommand}"
                                Visibility="{Binding IsInCaptureMode, Converter={StaticResource BoolToVisibilityConverter}}"/>
</Grid>

And here is my ViewModel

public MediaCapture MediaCapture
        {
            get
            {
                return this.mediaCapture;
            }

            set
            {
                this.mediaCapture = value;
                this.RaisePropertyChanged(() => this.MediaCapture);
            }
        }

        public CaptureElement CaptureElement
        {
            get
            {
                return this.captureElement;
            }

            set
            {
                this.captureElement = value;
                this.RaisePropertyChanged(() => this.CaptureElement);
            }
        }

private async void ConfigureMediaCapture()
        {
            this.MediaCapture = new MediaCapture();
            await this.MediaCapture.InitializeAsync();
            this.MediaCapture.SetPreviewRotation(VideoRotation.Clockwise90Degrees);
            this.CaptureElement.Source = MediaCapture;
            this.IsInCaptureMode = false;
        }

When I try change properties of CaptureElement like below, the high of CaptureElement is like my device's screen, so it's ok, but the width is still about 80~100 pixels.

this.CaptureElement = new CaptureElement
       {
          HorizontalAlignment = HorizontalAlignment.Stretch,
          VerticalAlignment = VerticalAlignment.Stretch,
          Stretch = Stretch.Fill,
       };

When I set a button or other control to ContentControl everything it's ok. Button has width and hight of all screen, but CaptureElement hasn't. Can anyone tell me what is wrong here, or maybe what else I must set, to change width of CaptureElement.

Answer 1

I think one of the issues is that you're using SetPreviewRotation in your ConfigureMediaCapture method. If I recall correctly, it will not set the new aspect ratio of the preview, but instead will letterbox the new preview inside the aspect ratio of the non-rotated one.

If you want to do rotation, thy this:

// Rotation metadata to apply to the preview stream (MF_MT_VIDEO_ROTATION)
Guid RotationKey = new Guid("C380465D-2271-428C-9B83-ECEA3B4A85C1");
var props = this.MediaCapture.VideoDeviceController.GetMediaStreamProperties(MediaStreamType.VideoPreview);
props.Properties.Add(RotationKey, rotationDegrees);
await this.MediaCapture.SetEncodingPropertiesAsync(MediaStreamType.VideoPreview, props, null);   

Reference: http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh868174.aspx

I took the code from the Microsoft github page with Universal Windows Platform samples for Windows 10, although a lot of the code still applies to Windows/Phone 8.x.

Full sample: http://aka.ms/2015buildgetpreviewframesample

Answer 2

Sorry maniek099 but your app has a fullscreen camera preview or not ? I try do the same but my camera preview is not fullscreen, it is smaller than screen height.

Thanks Alessio