1

I need to make a view which matches the height of the device in landscape orientation but locks the aspect of the view to a 16:9 ratio. I assume I need to do this programmatically as I need to get the screen width/height.

I cannot seem to get this to work in either GridView or AbsoluteLayout.

Any help is appreciated.

EDIT: Added more code + xaml page.

EDIT: When I run it it appears to fill the entire screen. I expect it to have black bars on either side but obviously I'm doing something wrong.

        
        public MainPage()
        {
            VideoView.SizeChange += SetupLayout;
        }

        private void SetupLayout(object sender, EventArgs e)
        {
            double width = (DeviceDisplay.MainDisplayInfo.Height / 9) * 16;
            VideoView.Layout(new Rectangle(0, 0, width, DeviceDisplay.MainDisplayInfo.Height));
            CanvasView.Layout(new Rectangle(0, 0, width, DeviceDisplay.MainDisplayInfo.Height));
            LabelRoomName.Layout(new Rectangle(0, 1, 1, 40));
        }

And the XAML:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:tt="clr-namespace:TouchTracking.Forms;assembly=TouchTracking.Forms"
             x:Class="uarapp.Core.Views.CallingPage"
             xmlns:skia="clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms"
             NavigationPage.HasNavigationBar="false">

    <AbsoluteLayout>
        
        <ContentView x:Name="VideoView"
                     Margin="0"
                     />

        <skia:SKCanvasView x:Name="CanvasView"
                            PaintSurface="OnCanvasViewPaintSurface" 
                            Margin="0"
                           BackgroundColor="AliceBlue"
                           />

        <Label x:Name="LabelRoomName"
               HorizontalOptions="CenterAndExpand"
               VerticalOptions="End"
               Text="Room label" 
               FontSize="Medium"
               FontAttributes="Bold"
               TextColor="#ECD035"/>

        <Frame BackgroundColor="Black" 
               Opacity="0.8"
               VerticalOptions="FillAndExpand" 
               HorizontalOptions="FillAndExpand"
               x:Name="Spinner" 
               IsVisible="false">
            <ActivityIndicator IsRunning="True" 
                               VerticalOptions="Center" 
                               Color="White" 
                               HorizontalOptions="Center"/>
        </Frame>

        <AbsoluteLayout.Effects>
            <tt:TouchEffect Capture="True"
                            TouchAction="OnTouchEffectAction" />
        </AbsoluteLayout.Effects>

    </AbsoluteLayout>
</ContentPage>
Salbrox
  • 143
  • 1
  • 15
  • *"I cannot seem to get this to work"* - 1) what happens? 2) Please show the XAML, and the code that calls this method. Perhaps something else is overriding your layout. – ToolmakerSteve Jul 01 '21 at 12:54
  • 1
    Apologies. I have updated the post. – Salbrox Jul 01 '21 at 13:02
  • Maybe its an issue with skia canvas. Start with a very simple layout: just a BoxView of one color on a background of a different color. ` `ContentView > `. If that doesn't work, then there must be something else you must do when changing Layout dimensions. Sorry, I'm not familiar enough with the exact details, but maybe instead of in SizeChanged, do something in a Measure method. Read about Layout cycle? – ToolmakerSteve Jul 01 '21 at 16:20
  • Another thought: Instead of triggering on SizeChanged in VideoView, trigger on SizeChanged in the top-level view. Or override `ContentPage`'s Layout.LayoutChildren, to first adjust children WIdthRequests as needed. – ToolmakerSteve Jul 01 '21 at 16:25
  • Actually, `Measure` is called before `Layout`, so maybe you can override VideoView's Measure method, have it call its base method, then adjust the result to always be 16:9. – ToolmakerSteve Jul 01 '21 at 16:38

0 Answers0