Can't get Menu to rotate with the rest of the UI

[AndreSteenbergen]

I tried adding a rotation to my app as I am using a screen in portrait mode on raspberry, but I can't get the screen to rotate. Therefore I rotated my app. Wich works fine for 90%. I can;t get the menu to rotate as well.

To Reproduce Add a menu to your application for example:

<Menu Grid.Column="1" Height="32" Padding="0" Margin="0">
                            <Menu.Styles>
                                <Style Selector="MenuItem.deviceList MenuItem">
                                    <Setter Property="Header" Value="{Binding Name}"/>
                                    <Setter Property="Command" Value="{Binding Path=DataContext.SetWebCam, RelativeSource={RelativeSource AncestorType=Panel}}" />
                                    <Setter Property="CommandParameter" Value="{Binding }" />
                                </Style>
                            </Menu.Styles>

                            <MenuItem Height="32" Width="45">
                                <MenuItem.Header>
                                    <Path 
                                        Margin="4"
                                        HorizontalAlignment="Center"
                                        Stretch="Uniform"
                                        Stroke="Black"
                                        StrokeThickness="0.5"
                                        Fill="White" Data="M0,8 A1.778,-1.778 0 0 0 3.556,8 A1.778,-1.778 0 0 0 0,8  M0,1.778 A1.778,-1.778 0 0 0 3.556,1.778 A1.778,-1.778 0 0 0 0,1.778  M0,14.22 A1.778,-1.778 0 0 0 3.556,14.22 A1.778,-1.778 0 0 0 0,14.22" />
                                </MenuItem.Header>

                                <MenuItem Header="{Binding UseSilhouette, Converter={StaticResource BooleanToUseSilhouetteConvertor}}"
                                          Command="{Binding ToggleSilhouette}">
                                    <MenuItem.Icon>

                                        <Path
                                            Stroke="Black"
                                            StrokeThickness="0.5"
                                            Stretch="Uniform"
                                            Fill="{Binding UseSilhouette, Converter={StaticResource BooleanToActiveColorConverter}}"
                                            Data="M4,4 A4,4 0 0 1 12,4 L12,5.6 A4,4 0 0 1 4,5.6 L4,4 z M0,13.34 A15.92,15.92 0 0 1 8,11.2 C10.91,11.2 13.65,11.98 16,13.34 L16,16 L0,16 L0,13.34 z" />

                                    </MenuItem.Icon>
                                </MenuItem>

                                <MenuItem Header="{Binding UseHardwareButtons, Converter={StaticResource BooleanToUseHardwareConvertor}}"
                                          Command="{Binding ToggleHardwareButtons}">
                                    <MenuItem.Icon>

                                        <Path
                                            Stroke="Black"
                                            StrokeThickness="0.5"
                                            Stretch="Uniform"
                                            Fill="{Binding UseHardwareButtons, Converter={StaticResource BooleanToActiveColorConverter}}"
                                            Data="M13.88,0 L13.88,2.117 L12.83,2.117 L12.83,3.88 C12.6,4.22 12.41,4.666 12.29,5.181 L11.44,4.032 C11.31,3.882 11.09,3.863 10.94,3.988 L10.4,4.442 C10.25,4.567 10.23,4.789 10.36,4.939 L12.14,7.192 C12.2,8.143 12.46,8.974 12.83,9.525 L12.83,11.29 L13.88,11.29 L13.88,13.4 L16,13.4 L16,0 L13.88,0 z M2.644,6.824 C2.1,8.011 1.914,10.03 -2.099E-008,12.36 C0.5865,13.29 1.313,14.11 2.149,14.81 C2.406,14.34 3.384,12.99 6.568,12.02 C6.568,12.02 9.382,9.559 10.8,6.544 C10.8,6.544 10.49,4.733 9.233,5.854 C7.978,6.976 6.376,9.261 5.434,8.307 C3.475,6.324 11.53,5.335 10.19,2.549 C10.19,2.549 3.234,5.537 2.644,6.824 z M3.147,5.967 L5.087,4.786 C5.087,4.786 4.559,4.552 3.884,4.758 C3.209,4.964 3.147,5.967 3.147,5.967 z M6.416,6.593 C8.02,7.516 8.723,6.195 8.723,6.195 L7.954,5.692 L6.416,6.593 z" />

                                    </MenuItem.Icon>
                                </MenuItem>

                                    <Separator />
                                <MenuItem Header="Rotate 90 CCW"
                                          Command="{Binding ToggleRotation}">
                                    <MenuItem.CommandParameter><x:Int32>-1</x:Int32></MenuItem.CommandParameter>
                                    <MenuItem.Icon>
                                        <Path 
                                            Stroke="Black"
                                            StrokeThickness="0.5"
                                            Stretch="Uniform"
                                            Fill="{Binding RotateImage, ConverterParameter=-1, Converter={StaticResource EqualsToActiveColorConverter}}" Data="M1.524,0.7619 L3.81,0.7619 A1.524,1.524 0 0 1 5.333,2.286 L5.333,14.48 A1.524,1.524 0 0 1 3.81,16 L1.524,16 A1.524,1.524 0 0 1 0,14.48 L0,2.286 A1.524,1.524 0 0 1 1.524,0.7619  M13.71,10.67 A1.524,1.524 0 0 1 15.24,12.19 L15.24,14.48 A1.524,1.524 0 0 1 13.71,16 L6.857,16 L6.857,10.67 L13.71,10.67  M9.143,2.286 A6.095,6.095 0 0 1 15.24,8.381 L15.19,9.143 L13.65,9.143 L13.71,8.381 A4.571,4.571 0 0 0 9.143,3.81 L9.143,6.095 L6.095,3.048 L9.143,0 L9.143,2.286 z" />
                                    </MenuItem.Icon>
                                </MenuItem>
                                <MenuItem Header="Rotate 90 CW"
                                          Command="{Binding ToggleRotation}">
                                    <MenuItem.CommandParameter><x:Int32>1</x:Int32></MenuItem.CommandParameter>
                                    <MenuItem.Icon>
                                        <Path 
                                            Stroke="Black"
                                            StrokeThickness="0.5"
                                            Stretch="Uniform"
                                            Fill="{Binding RotateImage, ConverterParameter=1, Converter={StaticResource EqualsToActiveColorConverter}}" Data="M6.095,2.286 L6.095,0 L9.143,3.048 L6.095,6.095 L6.095,3.81 A4.571,4.571 0 0 0 1.524,8.381 L1.585,9.143 L0.04571,9.143 L0,8.381 A6.095,6.095 0 0 1 6.095,2.286  M11.43,0.7619 L13.71,0.7619 A1.524,1.524 0 0 1 15.24,2.286 L15.24,14.48 A1.524,1.524 0 0 1 13.71,16 L11.43,16 A1.524,1.524 0 0 1 9.905,14.48 L9.905,2.286 A1.524,1.524 0 0 1 11.43,0.7619  M1.524,10.67 L8.381,10.67 L8.381,16 L1.524,16 A1.524,1.524 0 0 1 0,14.48 L0,12.19 A1.524,1.524 0 0 1 1.524,10.67 z" />
                                    </MenuItem.Icon>
                                </MenuItem>
                                <Separator />
                                <MenuItem Classes="deviceList"
                                          Header="Choose webcam"
                                          Items="{Binding DeviceList}" />
                            </MenuItem>
                        </Menu>

add a rotation to the entire UI (-90) for example:

    <LayoutTransformControl>
        <LayoutTransformControl.LayoutTransform>
            <RotateTransform Angle="-90" />
        </LayoutTransformControl.LayoutTransform>
    <views:MainView />
    </LayoutTransformControl>

Expected behavior I expect all controls including the menu to rotate 90 degrees.

Screenshots

I would like the menu to rotate as well.

Desktop:

• OS: Arch Linux with dotnet core 7
• Version 11.0 preview4

[maxkatz6]

Popup.UpdateHostSizing respects only scale transform and not rotate:

https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls/Primitives/Popup.cs#L578

[AndreSteenbergen]

Do basically not a bug, but a missing feature. I don't think this is top priority with 1k+ open issues. Could it be possible to sponsor a feature request? Don't know what it would cost...

[timunie]

@AndreSteenbergen I see some options here, yes.

1. You can get paid support if needed and useful for you and your team: https://www.avaloniaui.net/support
2. You can reach out to the team per E-Mail
3. PRs are also very welcome. So you can always clone the source and try to fix / implement it on your own. If you were successful, feel free to file a PR.

Happy coding

Tim

[kekekeks]

Try using xrandr --output {YOUR OUTPUT} --rotate {left, right or inverted }

[AndreSteenbergen]

I'll try option 3, as I am programming in my spare time trying to update an old windows app into a cross platform app

[AndreSteenbergen]

xrandr will try al well. Didn't think of that.

[AndreSteenbergen]

xrandr doesn't do anything in DRM mode. So I am stuck waiting for a fix or making a fix

[grokys]

Does using overlay popups fix the issue?

[BuriKizilkaya]

Are you still waiting for the issue?

[AndreSteenbergen]

Yes still looking for a solution

Op za 18 nov. 2023 00:25 schreef Burak Kizilkaya @.***>:

Are you still waiting for the issue?

— Reply to this email directly, view it on GitHub https://github.com/AvaloniaUI/Avalonia/issues/10344#issuecomment-1817244685, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB2SG5QEYKEGXCPVNZNYHPDYE7W6BAVCNFSM6AAAAAAU4EW2WWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMJXGI2DINRYGU . You are receiving this because you were mentioned.Message ID: @.***>

[BuriKizilkaya]

On the StarLinuxDrm Function we can pass the drmoptions class. In this class it exists a Pixel Property. I don't know for what this can be. Maybe for the definition of the width and height.