UWP Window resizing is wonky

Question

I have a Xamarin Forms app that runs on iOS, Android and UWP. On UWP, if I resize the window using the resize regions on the right or bottom of the window (so it only resizes horizontally or vertically) then everything is fine.

However, if I resize from the lower-right corner (so it simultaneously resizes in width and height) then it seems like the contents don't get notified of a change in height. My contents correctly lay themselves out in width, but not in height.

Is this a known bug or do I have something set up incorrectly?

Answer 1

There is no code that resizes the window. I am relying on the automatic layout that happens in Xamarin Forms. This really feels like a bug where the system is not correctly reporting the new size to the layout code in the case where both width and height are changing. Below is the xaml for the page in question. To be clear, this does re-layout correctly if just the width or height changes. Just not when bot are changing by dragging from the lower right of the window.

<?xml version="1.0" encoding="utf-8"?>

<local:OTContentPage
    x:Class="OurGalaxyX.OurGalaxyPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:control="clr-namespace:Plugin.Segmented.Control;assembly=Plugin.Segmented"
    xmlns:tintedimage="clr-namespace:Plugin.CrossPlatformTintedImage.Abstractions;assembly=Plugin.CrossPlatformTintedImage.Abstractions"
    xmlns:d="http://xamarin.com/schemas/2014/forms/design"
    xmlns:local="clr-namespace:OurGalaxyX"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    NavigationPage.HasNavigationBar="False"
    mc:Ignorable="d">
    <AbsoluteLayout
        x:Name="AbsoluteLayout"
        Padding="0"
        HorizontalOptions="FillAndExpand"
        VerticalOptions="FillAndExpand">

        <StackLayout
            AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
            AbsoluteLayout.LayoutFlags="All"
            BackgroundColor="Black"
            Orientation="Vertical"
            Spacing="0"
            HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand">

            <local:GalaxyView
                x:Name="GalaxyViewPanel"
                BackgroundColor="#222222"
                VerticalOptions="FillAndExpand" />

            <local:SkyView
                x:Name="SkyViewPanel"
                BackgroundColor="#222222"
                IsVisible="false"
                VerticalOptions="FillAndExpand" />

            <ContentView BackgroundColor="#111111" HeightRequest="1" />

            <Grid Padding="5,10,5,10" BackgroundColor="Black">

                <Grid.Resources>
                    <!--  Implicit style  -->
                    <Style TargetType="local:TintedImageExt">
                        <Setter Property="HeightRequest" Value="28" />
                        <Setter Property="WidthRequest" Value="28" />
                        <Setter Property="BackgroundColor" Value="Transparent" />
                        <Setter Property="Aspect" Value="AspectFill" />
                        <Setter Property="Margin" Value="14, 0, 14, 0" />
                    </Style>
                </Grid.Resources>


                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>

                <Grid.RowDefinitions>
                    <RowDefinition Height="28" />
                </Grid.RowDefinitions>

                <local:TintedImageExt
                    x:Name="SearchBtn"
                    Grid.Column="0"
                    Source="Images/search_btn_icon.png" />
                <local:TintedImageExt
                    x:Name="InfoBtn"
                    Grid.Column="1"
                    Source="Images/info_btn_icon.png" />
                <local:TintedImageExt
                    x:Name="ViewsBtn"
                    Grid.Column="2"
                    Source="Images/views_btn_icon.png" />

                <ContentView Grid.Column="3" />


                <tintedimage:TintedImage
                    x:Name="ZoomOutImage"
                    Grid.Column="4"
                    Margin="0,0,10,0"
                    Source="Images/flyout_btn_icon.png" />

                <local:OTButton
                    x:Name="ZoomOutBtn"
                    Grid.Column="4"
                    Margin="0,0,10,0"/>

                <control:SegmentedControl
                    x:Name="SegmentedControl"
                    Grid.Column="5"
                    DisabledColor="Gray"
                    FontSize="12"
                    SelectedSegment="0"
                    SelectedTextColor="Black"
                    TextColor="Black">
                    <control:SegmentedControl.Children>
                        <control:SegmentedControlOption Text="Galaxy" />
                        <control:SegmentedControlOption Text="Sky" />
                    </control:SegmentedControl.Children>
                </control:SegmentedControl>

                <tintedimage:TintedImage
                    x:Name="ZoomInImage"
                    Grid.Column="6"
                    Margin="10,0,0,0"
                    Source="Images/flyin_btn_icon.png" />

                <local:OTButton
                    x:Name="ZoomInBtn"
                    Grid.Column="6"
                    Margin="10,0,0,0"/>

                <ContentView Grid.Column="7" />

                <local:TintedImageExt
                    x:Name="NightVisionBtn"
                    Grid.Column="8"
                    Source="Images/nightvision_btn_icon.png" />
                <local:TintedImageExt
                    x:Name="MenuBtn"
                    Grid.Column="9"
                    Source="Images/menu_btn_icon.png" />
                <local:TintedImageExt
                    x:Name="HelpBtn"
                    Grid.Column="10"
                    Source="Images/help_btn_icon.png" />
            </Grid>

        </StackLayout>
    </AbsoluteLayout>

</local:OTContentPage>