Implementation of a Apache Flex like ability to use percentage width and percentage height on all layoutable controls.

[JTtheGeek]

I don't know how to create pull request, or how to even properly convey why this was incredibly important for me to be able to achieve. I really wish I could pull this off without having to modify the Avalonia source code, but since I wanted all controls to be able to do it I did have to make changes to the layoutable class to support PercentHeight and PercentWidth properties and a change to the Measure method to use those. Ideally I would like to also be able to use a percent since in the height and width properties so like and intercept the xaml transformation if it see thats, and instead set the percentwidth property correctly and set the width to NaN. If someone could help me figure out how to do that part that would be awesome. Hopefully this helps someone as much as it's going to help my team.

https://stackoverflow.com/questions/75331469/in-avalonia-or-xaml-in-general-how-would-i-implement-the-ability-to-use-percent/75331470#75331470

~ JT

[ahopper]

You could just create a custom panel to do this with AttachedProperties for PercentHeight etc rather like Canvas does for position.

[timunie]

I see different options here:

1. create your own panel (check the source of other panels for reference) and use is, just like @ahopper suggested
2. Use a grid to lay out your controls. If you use GridSize * you will get percentage like layout. For example ColumnDefinitons="25*, 25*, 50* will be 25% first and second column and 50 % last column
3. You can also write a converter which takes the Bounds of your root and return a given percentage.

I hope it helps you a bit further.

[JTtheGeek]

While I could have just created a custom panel, I wanted to be able to use percentage based layout on all controls hense the modification to layoutable. It makes layout far faster and more intuitive than grid for me and my team as we have been using this system for 15 years. I can't think of a way though of adding the logic and properties into layout able as a 3rd party library without come really crazy IL injection and high jacking. I don't see any place were a plug in or IOC injection can modify layoutable or swap to a different layout able base since avalonia is using inheritance rather than decency injection for this.

[timunie]

Just to clarify, if you have your custom Panel, you can place as many controls in to as you like. And there you can use Attached properties.

Example:

<PercentagePanel>
    <Button PercentagePanel.Width="25" 
            PercentagePanel.Height="10"
            PercentagePanel.X="25"
            PercentagePanel.Y="30" />
    <CheckBox PercentagePanel.Width="50" 
              PercentagePanel.Height="10"
              PercentagePanel.X="50"
              PercentagePanel.Y="30" />
</PercentagePanel>

Or as an alternative, take your time to learn how Avalonia works most of the time. You can also request some training for you and your team, if that may help.

[JTtheGeek]

Again, I understand that, the goal is to avoid this verbosity and allow all controls to support it, and thus all flex developers to easily migrate over to avalonia. With the code I provided that looks like the following:

<VGroup>
    <Button Width="25%" Height="10%"/>
    <CheckBox Width="50%" Height="10%"/>
</VGroup>

or with explicit layout

<Panel>
    <Button Width="25%" Height="10%" X="20" Y="30"/>
    <CheckBox Width="50%" Height="10%" X="50" Y="100"/>
</Panel>

I find that syntax far easier to mentally parse, takes way less space, and is 100% compatible with Apache Flex. It's fine I'm already writing a library to use IL injection to pull it off. I realize those coming from WPF/XAML aren't familiar with this syntax, but as someone whos done both WPF/XAML and MXML for 15-20 years now on insanely large projects I can't tell you how much easier it is to build, modify, and maintain layouts like this.

[timunie]

Ah now I think I see the benefits. Don't know if it's possible to add, but would indeed be a great syntax sugar. Maybe the XAML-parser can handle it, similar to the different color definitions we already have. @maxkatz6 may know more about it.

Sorry for the confusion.

[JTtheGeek]

ahhh thank you, yes the color definitions is doing the exact same type of xaml replacement. I'll look there to see what I can do, for some reason debugging the xaml ast transformations hasn't been working for me even with the project xaml compile flag turned on. I am using rider though not sure if that's the issue.

[ahopper]

There is an issue that % sizes can't work in some layouts eg. StackPanel makes itself as large as the children need so what would the % relate to.

[maxkatz6]

That's why percentage sizing would make sense only in a special panel. And we already have Grid.