Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Apply Panel-Orientation of DRM-Output #14241

Open
BinaryCraX opened this issue Jan 17, 2024 · 10 comments
Open

Apply Panel-Orientation of DRM-Output #14241

BinaryCraX opened this issue Jan 17, 2024 · 10 comments

Comments

@BinaryCraX
Copy link

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 Can't get Menu to rotate with the rest of the UI #10344.
  • Picture[1] of the ComboBox when LayoutTransform got applied on the MainView:
    grafik
@kekekeks
Copy link
Member

kekekeks commented Jan 21, 2024

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
Copy link
Author

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
Copy link
Member

You can change the default template for EmbeddableControlRoot.

@BinaryCraX
Copy link
Author

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:
grafik
middle:
grafik
right:
grafik

@BinaryCraX
Copy link
Author

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
Copy link

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
Copy link

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
Copy link

I disabled scroll gestures for now.

@kyuranger
Copy link

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
Copy link

I have a custom scrollbar which is clickable.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants