Issue
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>
Solution
Absolute Layout has 2 great advantages:
As it name implies, the position/size of the element is absolute
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
Answered By - Juan Sturla
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.