Combo box PopupAnimations

net8floz · 28 Dec 2025, 22:01

Can anyone help diagnose why my combo boxes popup animations seem to be relative to the whole window rather than themselves.

In a "scroll" setting the popup content starts in the very bottom left of my window and then zoom all the way across the screen to where the dropdown button actually is.

Expected behavior is that it starts in the very bottom left of the dropdown button.

In a "slide" setting the popup starts all the way at the top of my window and then flies down to below where the dropdown button actually is. This is problematic when it is in an opposite orientation as the mouse will click the button content half the time .

I am in a c++ d3d integration and i have tried deleting all my themeing from the project and have tried both the themes from the 3.2.10 sdk and from the 4.0 beta ( stolen from the unreal beta ). I cannot get a repro in the xaml player and it looks fine in Studio.

this is actually pretty problematic as when they are in "None" animation mode in a upside down orientation the items render on top of the dropdown button IMMEDIATELY and selects what ever options is there and the closes the combo box.

additionally i cannot use my mouse wheel to scroll them some of the time

30 Dec 2025, 12:05

I cannot get a repro in the xaml player and it looks fine in Studio.

Since this appears to be an integration issue, I recommend capturing a RenderDoc snapshot of both your integration and XamlPlayer, then comparing the GPU state to identify any differences.

net8floz · 30 Dec 2025, 19:07

Okay thank you I will take a look at render doc. Isnt it strange tho that when the combo box drop down is flying over the button I can click on it though? Doesn that point to it not being a GPU issue?

Edit:
Fixed: the lack of clipping the issue was my back buffer did not have a depth target. Was able to spot it in Render Doc thanks for the tip
Fixed: scrolling was related to not handling WM_MOUSEHWHEEL, additionally I was not using ScreenToClient on the x/y lparams

The "top" oriented clipping into my button and stealing clicks seems like it may be related to the LayoutScaler, the more scale i have the more the popup is on top of my dropdown button and steals the click ( this part is still an issue ) .

31 Dec 2025, 10:03

The "top" oriented clipping into my button and stealing clicks seems like it may be related to the LayoutScaler, the more scale i have the more the popup is on top of my dropdown button and steals the click ( this part is still an issue ) .

Could you please paste a XAML reproducing the issue?

net8floz · 31 Dec 2025, 17:27

Thank you for the support jsantos as usual :)

It doesnt repro initially, i tried just making a new project in studio but couldnt get it to rerpo, but inside my pages grid it repros very consistently so I stripped down what I could of my page, so I apologize there is a lot of clutter here.

But I am pretty sure I have 0 custom theming here so it should 100% repro inside studio

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:noesis="clr-namespace:NoesisGUIExtensions"
  d:DataContext="InGamePauseScreenVM Data 01"
  Background="#00000000"
  mc:Ignorable="d" xmlns:system="clr-namespace:System;assembly=mscorlib" d:DesignWidth="1280" d:DesignHeight="720" xmlns:b="http://schemas.microsoft.com/xaml/behaviors">
  <Page.Resources>
    <ResourceDictionary>
     
    </ResourceDictionary>
  </Page.Resources>
  <Page.Visibility>
    <Binding Path="show_screen">
      <Binding.Converter>
        <BooleanToVisibilityConverter />
      </Binding.Converter>
    </Binding>
  </Page.Visibility>

  <noesis:LayoutScaler ReferenceResolution="640,360" ScaleFactor="1.207">
    <Grid>
      <Border Background="#FF000000" BorderBrush="#FF000000" BorderThickness="1" Opacity="0.946"/>
      <Border BorderBrush="#FF000000" BorderThickness="1" Opacity="0.057">
        <Border.Background>
          <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
            <GradientStop Offset="0" Color="#FF14ACD3"/>
            <GradientStop Offset="1" Color="#FF00D9FF"/>
            <GradientStop Offset="0.8741006" Color="#FF16C539"/>
          </LinearGradientBrush>
        </Border.Background>
      </Border>
      <StackPanel Margin="25,25,25,25" HorizontalAlignment="Left" VerticalAlignment="Top"/>
      <Grid x:Name="Settings" HorizontalAlignment="Right" Width="304" Margin="0,28,31,0" VerticalAlignment="Top">
        <Grid.RowDefinitions>
          <RowDefinition Height="Auto"/>
          <RowDefinition Height="Auto"/>
          <RowDefinition Height="Auto"/>
          <RowDefinition Height="Auto"/>
          <RowDefinition Height="Auto"/>
          <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="5*"/>
          <ColumnDefinition Width="20"/>
          <ColumnDefinition Width="5*"/>
        </Grid.ColumnDefinitions>
        <StackPanel x:Name="GameUpscaleText" VerticalAlignment="Top" Margin="0,0,0,10"/>
        <Grid x:Name="GameUpscaleCell" Grid.Column="2" Height="12" VerticalAlignment="Top" Margin="0,0,0,10">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="8*"/>
          </Grid.ColumnDefinitions>
          <TextBlock TextWrapping="Wrap" Text="{Binding Path=display_settings.game_upscale, StringFormat=F2}" Style="{DynamicResource DefaultText}" TextAlignment="Center" VerticalAlignment="Center" FontSize="5"/>
          <Slider x:Name="GameUpscaleSlider" Value="{Binding Path=display_settings.game_upscale, Mode=TwoWay}" Template="{DynamicResource SettingsSlider}" Grid.Column="1" IsSnapToTickEnabled="True" SmallChange="0.25" TickFrequency="0.25" Minimum="0.25" Maximum="2" LargeChange="0.25">
            <b:Interaction.Triggers>
              <b:EventTrigger EventName="LostMouseCapture">
                <b:InvokeCommandAction Command="{Binding Path=display_settings.game_upscale_changed}" CommandParameter="1"/>
              </b:EventTrigger>
            </b:Interaction.Triggers>
          </Slider>
        </Grid>
        <StackPanel x:Name="UIScaleText" Grid.Row="1" VerticalAlignment="Top" Margin="0,0,0,10"/>
        <Grid x:Name="UIScaleCell" Grid.Column="2" Height="12" VerticalAlignment="Top" Grid.Row="1" Margin="0,0,0,10">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="8*"/>
          </Grid.ColumnDefinitions>
          <TextBlock TextWrapping="Wrap" Text="{Binding Path=display_settings.ui_scale, StringFormat=F1}" Style="{DynamicResource DefaultText}" TextAlignment="Center" VerticalAlignment="Center" FontSize="5"/>
          <Slider x:Name="UIScaleSlider" Value="{Binding Path=display_settings.ui_scale, Mode=TwoWay}" Template="{DynamicResource SettingsSlider}" IsSnapToTickEnabled="True" Minimum="0.8" Maximum="1.2" LargeChange="0.1" Grid.ColumnSpan="2" Margin="25,0,4,0" TickFrequency="0.1">
            <b:Interaction.Triggers>
              <b:EventTrigger EventName="LostMouseCapture">
                <b:InvokeCommandAction Command="{Binding Path=display_settings.ui_scale_changed}" CommandParameter="1"/>
              </b:EventTrigger>
            </b:Interaction.Triggers>
          </Slider>
        </Grid>
        <StackPanel x:Name="FullScreenToggleText" Grid.Row="2" VerticalAlignment="Top" Margin="0,0,0,10"/>
        <ToggleButton x:Name="FullScreenToggle" Grid.Column="2" Grid.Row="2" HorizontalAlignment="Left" VerticalAlignment="Top" IsChecked="{Binding Path=display_settings.is_fullscreen, Mode=TwoWay}" Content="X" Command="{Binding Path=display_settings.is_fullscreen_changed}" CommandParameter="{Binding Path=display_settings.is_fullscreen}" Margin="0,0,0,10"/>
        <StackPanel x:Name="FullScreenRestText" Grid.Row="3" VerticalAlignment="Top" Margin="0,0,0,10"/>
        <ComboBox x:Name="FullScreenResComboBox" Grid.Row="3" Grid.Column="2" MaxDropDownHeight="200" VerticalAlignment="Top" IsSynchronizedWithCurrentItem="False" SelectedIndex="{Binding Path=display_settings.selected_resolution_index, Mode=TwoWay}" ScrollViewer.CanContentScroll="True" Margin="0,0,0,10">
          <b:Interaction.Triggers>
            <b:EventTrigger EventName="LostMouseCapture">
              <b:InvokeCommandAction Command="{Binding Path=display_settings.resolution_index_changed}" CommandParameter="1"/>
            </b:EventTrigger>
          </b:Interaction.Triggers>
          <ComboBoxItem Content="ComboBoxItem" Width="80"/>
          <ComboBoxItem Content="ComboBoxItem" Width="80"/>
          <ComboBoxItem Content="ComboBoxItem" Width="80"/>
          <ComboBoxItem Content="ComboBoxItem" Width="80"/>
          <ComboBoxItem Content="ComboBoxItem" Width="80"/>
          <ComboBoxItem Content="ComboBoxItem" Width="80"/>
          <ComboBoxItem Content="ComboBoxItem" Width="80"/>
          <ComboBoxItem Content="ComboBoxItem" Width="80"/>
          <ComboBoxItem Content="ComboBoxItem" Width="80"/>
        </ComboBox>
        <StackPanel x:Name="FullScreenText001" Grid.Row="4" Margin="0,0,0,10"/>
        <ComboBox x:Name="FullScreenResComboBox001" Grid.Row="4" Grid.Column="2" MaxDropDownHeight="200" VerticalAlignment="Top" ScrollViewer.CanContentScroll="False" IsSynchronizedWithCurrentItem="False" SelectedIndex="{Binding Path=display_settings.selected_refresh_rate_index}" Margin="0,0,0,10">
          <b:Interaction.Triggers>
            <b:EventTrigger EventName="LostMouseCapture">
              <b:InvokeCommandAction Command="{Binding Path=display_settings.refresh_rate_index_changed}" CommandParameter="1"/>
            </b:EventTrigger>
          </b:Interaction.Triggers>
          <ComboBoxItem Content="ComboBoxItem" Width="80"/>
          <ComboBoxItem Content="ComboBoxItem" Width="80"/>
          <ComboBoxItem Content="ComboBoxItem" Width="80"/>
          <ComboBoxItem Content="ComboBoxItem" Width="80"/>
          <ComboBoxItem Content="ComboBoxItem" Width="80"/>
          <ComboBoxItem Content="ComboBoxItem" Width="80"/>
          <ComboBoxItem Content="ComboBoxItem" Width="80"/>
          <ComboBoxItem Content="ComboBoxItem" Width="80"/>
        </ComboBox>
        <StackPanel x:Name="VerticalSyncText" Grid.Row="5" VerticalAlignment="Top" Grid.RowSpan="2" Margin="0,0,0,10"/>
        <ToggleButton Grid.Column="2" Grid.Row="5" HorizontalAlignment="Left" VerticalAlignment="Top" IsChecked="{Binding Path=display_settings.vsync_enabled, Mode=TwoWay}" Content="X" Command="{Binding Path=display_settings.vsync_enabled_changed}" CommandParameter="{Binding Path=display_settings.vsync_enabled}" Margin="0,0,0,10"/>
      </Grid>
    </Grid>
  </noesis:LayoutScaler>
</Page>

here is what i am seeing in studio. (it's a gif )

09 Jan 2026, 12:03

I was able to repro this issue with our standalone Studio tool after increasing the Scale Factor of the LayoutScaler.

It might be a problem with the Popup layer system, how it calculates the available space when there are scale transforms applied to the UI. Could you please report this in our bugtracker?

net8floz · 09 Jan 2026, 17:29

will do thank you sfernandez

12 Jan 2026, 12:45

Thanks for the ticket (#4684) !

Combo box PopupAnimations

Combo box PopupAnimations

Re: Combo box PopupAnimations

Re: Combo box PopupAnimations

Re: Combo box PopupAnimations

Re: Combo box PopupAnimations

Re: Combo box PopupAnimations

Re: Combo box PopupAnimations

Re: Combo box PopupAnimations

Who is online