Apply Panel-Orientation of DRM-Output

[BinaryCraX]

Is your feature request related to a problem? Please describe.

When using DRM-Output, currently Avalonia doesn't seem to respect the panel_orientation property of DRM/KMS which indicates how the panel is mounted inside the casing. Because of this the UI is rendered 270° rotated in my case. (side-note: touch-input aligns with the rendered output)

Describe the solution you'd like

• Avalonia should read the panel_orientation property from DRM/KMS.
• There should be an additional option "Orientation" in DrmOutputOptions to override the panel-orientation read from DRM.
• Avalonia should then respect this panel-orientation on layout and render.

Describe alternatives you've considered

• I tried to apply a render-transform to the root-view of the application. The UI then was rendered in the correct orientation, but the layout was wrong.
• I tried to apply layout-transform by using LayoutTransformControl as the MainView with RotateTransform(270). This worked for the most part (layout ok, rendering ok, touch-input ok), but it doesn't render the drop-downs of ComboBoxes correctly (rotation not applied. See Picture[1]).

Additional context

• This may be a breaking-change because on systems where the panel_orientation property is set it will then get used suddenly. This may be avoided by requiring the new option "Orientation" to be set to "KMS"/"Auto" before reading and applying the property from DRM, but this would negate the positive effekt of having the presumably correct orientation by default.
• I am not sure if Input should be also rotated by this property or if it needs an extra option.
• Seems to be related to #10344.
• Picture[1] of the ComboBox when LayoutTransform got applied on the MainView:

[kekekeks]

As a temporary workaround, you can listen for OnAttachedToVisualTree event and apply the transform to the TopLevel. That would make menus to be rotated too.

[BinaryCraX]

Thank you very much for the suggestion. As you suggested (if I have understood it correctly), I tried adding following to my MainView:

protected override void OnAttachedToVisualTree(VisualTreeAttachmentEventArgs e)
{
    base.OnAttachedToVisualTree(e);
    var root = (EmbeddableControlRoot)e.Root;
    root.RenderTransform = new RotateTransform(270);
}

Unfortunately this only affects rendering and therefore the layout is wrong.

For a layout-transform I would need to add a LayoutTransformControl in between the MainView and the TopLevel (which is what I did in the screenshot above), but in this case the Combobox-Dropdown isn't rotated.

If I try to apply both (rotate using LayoutTransformControl and additionally apply RenderTransform to the TopLevel), layout is correct but rendering is wrong because rotation get's applied 2 times to the MainView (270° by the LayoutTransformControl and additional 270° by the RenderTransform).

Perhaps I have misunderstood something?

[kekekeks]

You can change the default template for EmbeddableControlRoot.

[BinaryCraX]

Tried the new suggestion. Added new Resource-Dictionary "EmbeddableControlRootTemplate.axaml" with changed Template:

<ResourceDictionary xmlns="https://github.com/avaloniaui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <ControlTheme x:Key="{x:Type EmbeddableControlRoot}" TargetType="EmbeddableControlRoot">
    <Setter Property="Foreground" Value="{DynamicResource SystemControlForegroundBaseHighBrush}"/>
    <Setter Property="Background" Value="{DynamicResource SystemRegionBrush}"/>
    <Setter Property="TopLevel.SystemBarColor" Value="{DynamicResource SystemControlBackgroundAltHighBrush}"/>
    <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}"/>
    <Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
    <Setter Property="Template">
      <ControlTemplate>
        <LayoutTransformControl>
          <LayoutTransformControl.LayoutTransform>
            <RotateTransform Angle="270" />
          </LayoutTransformControl.LayoutTransform>

          <Panel>
            <Border Name="PART_TransparencyFallback" IsHitTestVisible="False" />
            <Border Background="{TemplateBinding Background}">
              <VisualLayerManager>
                  <ContentPresenter Name="PART_ContentPresenter"
                                    ContentTemplate="{TemplateBinding ContentTemplate}"
                                    Content="{TemplateBinding Content}"
                                    Margin="{TemplateBinding Padding}"/>
              </VisualLayerManager>
            </Border>
          </Panel>

        </LayoutTransformControl>
      </ControlTemplate>
    </Setter>
  </ControlTheme>

</ResourceDictionary>

And changed App.axaml to include it:

  <Application.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <ResourceInclude Source='/EmbeddableControlRootTemplate.axaml'/>
      </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
  </Application.Resources>

It seems to be the right track, but still not completly correct: Orientation of drop-down of ComboBox is now correct. However position of the drop-down is wrong. It seems to confuse X and Y axis.

With 270° RotateTransform, the further the ComboBox is moved to the right, the further up the drop-down list is positioned. (Click to see pictures)

left:  middle:  right: 

[BinaryCraX]

Scroll-Gesture-Recognition is also not working properly (X/Y flipped) with the latest workaround-approach (LayoutTransformControl directly inside of EmbeddableControlRoot).

I tried to find the right place inside the code of Avalonia to be fix the problem at the root. But there are many moving parts and the complexity is high. Can you point me in a direction so that I can try to fix it?

[BuriKizilkaya]

As a temporary workaround, you can listen for OnAttachedToVisualTree event and apply the transform to the TopLevel. That would make menus to be rotated too.

I need also a solution for this issue.

[kyuranger]

Scroll-Gesture-Recognition

I met the same problem in Scroll-Gesture-Recognition. BTW, have you solved this problem or found any other new solution?

[BuriKizilkaya]

I disabled scroll gestures for now.

[kyuranger]

I disabled scroll gestures for now.

But if you do this, won't the scrollviewer be able to slide up and down? In other words, won't the scrollviewer be unusable?

[BuriKizilkaya]

I have a custom scrollbar which is clickable.