I'm trying to make a rectangular in XAML Xamarin Forms, how can I set Height and Width to be as big as the phone screen ? HeightRequest and widthRequest seems don't work I want to make a thick transparent border around the camera frame so I want to make rectangular as big as the screen, how can i set these to fit all sizes of screens ?

<StackLayout>
    <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
        <xct:CameraView x:Name="cameraView"  CameraOptions="Back" CaptureMode="Photo" OnAvailable="CameraView_OnAvailable">
            <xct:CameraView.Behaviors >
                <xct:EventToCommandBehavior Command="{Binding PhotoCapturedCommand}" EventName="MediaCaptured" />
            </xct:CameraView.Behaviors>
        </xct:CameraView>
        <Rectangle  HeightRequest="1*" Fill="Transparent" Stroke="Blue" Opacity="0.7" StrokeThickness="150"/>

    </Grid>

</StackLayout>

CodePudding user response：

Absolute Layout has 2 great advantages:

1. As it name implies, the position/size of the element is absolute

2. You can "Stack" elements making layers

For this example, the CameraView will occupy 100% of the screen, and the "Mask" will be 50%. These value are going to be proportional of the screen size (this is only an example). Make sure to check for every screen that the image do not distort

<AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
    <xct:CameraView x:Name="cameraView"  CameraOptions="Back" CaptureMode="Photo" OnAvailable="CameraView_OnAvailable" AbsoluteLayout.LayoutBounds="0.5,0.5,1,1" AbsoluteLayout.LayoutFlags="All">
        <xct:CameraView.Behaviors >
            <xct:EventToCommandBehavior Command="{Binding PhotoCapturedCommand}" EventName="MediaCaptured" />
        </xct:CameraView.Behaviors>
    </xct:CameraView>
    <Frame BackgroundColor="Transparent" BorderColor="White" AbsoluteLayout.LayoutBounds="0.5,0.5,0.5,0.5" AbsoluteLayout.LayoutFlags="All"/>
</AbsoluteLayout>

You can put this code inside any other component if you want