Home > front end >  CustomControl calculate own width and height - ArrangeOverride gets called with bounds.Height=0
CustomControl calculate own width and height - ArrangeOverride gets called with bounds.Height=0

Time:04-19

I'm trying to implement a "playing card" as ContentView which calculates its width and height by a ratio. The ContentView's Content is a Grid with some labels. When calculating the Size of the playing card control, I need to tell the child/grid what size it can occupy. In my first attempts using MeasureOverride and ArrangeOverride it looks like all my tries get ignored when setting a size. I simplified the whole code to set only the minimal size of the control but the size still gets ignored.

Noticeable ArrangeOverride(Rect bounds) gets called with the following parameter value bounds = { X=0, Y=0, Width=1013, Height=0 } . Why is the height 0? I even declared the minimum height in OnMeasure to 85 and there is plenty more space available. What I'm doing wrong here?

The custom control code behind:

    public partial class CardView : ContentView
    {
        private const double minWidth = 55;
        private const double minHeight = 85;
        public CardView()
        {
            InitializeComponent();
            BackgroundColor = Colors.BlueViolet;
        }
        protected override Size MeasureOverride(double widthConstraint, double heightConstraint)
        {
            //define minimum size of control
            var minSize = new Size(minWidth, minHeight);
            System.Diagnostics.Debug.WriteLine($"MeasureOverride width={minSize.Width},height={minSize.Height}");
            return minSize;
        }
        protected override Size ArrangeOverride(Rect bounds) //bounds = { X=0, Y=0, Width=1013, Height=0 } 
        {
            Rect rect = new Rect(0, 0, minWidth, minHeight);
            grid.WidthRequest = minWidth;
            grid.HeightRequest = minHeight;
            //grid.Arrange(rect); //results int Layout cycle detected.  Layout could not complete.
            System.Diagnostics.Debug.WriteLine($"ArrangeOverride width={minWidth},height={minWidth}");
            return new Size(minWidth, minHeight);
        }
        protected override void OnSizeAllocated(double width, double height)
        {
            base.OnSizeAllocated(width, height);
            System.Diagnostics.Debug.WriteLine($"OnSizeAllocated width={width},height={height}");
        }
    }

xaml code

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="CustomLayouts.CardView"
             BackgroundColor="Red">
  <ContentView.Content>
        <Grid x:Name="grid" BackgroundColor="DarkRed">
            <Label Text="1" />
        </Grid>
  </ContentView.Content>
</ContentView>

[Edit] The output is as the follows:

OnSizeAllocated width=-1,height=-1
MeasureOverride width=55,height=85
MeasureOverride width=55,height=85
OnSizeAllocated width=1013,height=0
ArrangeOverride width=55,height=55
MeasureOverride width=55,height=85

The grid and cardcontrols size is with=1013 and height=0.

I created a sample repo here: https://github.com/mfe-/CustomLayoutExamples . Any help highly appreciated.

CodePudding user response:

There is an open issue regarding measuring and layout for custom controls, which seems to cause the problems you are experiencing: https://github.com/dotnet/maui/issues/4019

  • Related