Control Elements via Controller

Araziel · 20 Feb 2025, 16:03

Hi, I have created a HUD for my game.
It consists of a top bar and a side menu that includes various buttons, such as a purchase menu, etc.
In my Blueprints, I have set the focus on the HUD, enabled HUD controls, and I can interact with everything using the mouse.

However, I am puzzled about how to navigate through it using a controller or keyboard.
I have already looked at the samples, but I just can't figure it out.

Hope you can help me. Do I need to edit the XAML or can I handle it via Blueprints?

<UserControl 
    x:Class="Test.Ingame.HUD.HUD"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    mc:Ignorable="d"
    Width="{Binding NGUI_HUD_Width, FallbackValue=1920}" 
    Height="{Binding NGUI_HUD_Height, FallbackValue=1080}"
    Focusable="True">

    <Grid>

        <!-- 
          ─────────────────────────────────────────────────────────────────
            2A) TOPBAR
          ─────────────────────────────────────────────────────────────────
        -->            ...
        <!-- 
          ─────────────────────────────────────────────────────────────────
            2B) SIDEMENU
          ─────────────────────────────────────────────────────────────────
        -->
        <Border x:Name="SideMenu"
                Background="#DD6233CC"
                Width="{Binding NGUI_HUD_SideMenuWidth, FallbackValue=300}"
                Height="{Binding NGUI_HUD_SideMenuHeight, FallbackValue=1020}"
                HorizontalAlignment="Right"
                Visibility="{Binding NGUI_HUD_SideMenuVisibility, FallbackValue=Visible}"
                Margin="0,60,0,0">

            <StackPanel Orientation="Vertical" 
                        Width="300">
                <TextBlock Text="Menü"
                           FontSize="24"
                           Foreground="White"
                           HorizontalAlignment="Center"/>
                <StackPanel x:Name="BuyButtons" 
                            Visibility="{Binding NGUI_HUD_BuyButtonsVisibility, FallbackValue=Visible}">
                    <Button Content="Buy x"
                            Width="250" Height="40"
                            Margin="10"
                            Command="{Binding NGUI_HUD_ShowEmployeeCommand}"/>
                    <Button Content="Buy y"
                            Width="250" Height="40"
                            Margin="10"/>
                </StackPanel>


                <ScrollViewer Visibility="{Binding NGUI_HUD_EmployeeListVisibility, FallbackValue=Collapsed}" 
                              Height="400">
                    <ListBox x:Name="EmployeeListView"
                             Width="280"
                             ItemsSource="{Binding EmployeeList}"
                             AlternationCount="2"
                             ItemContainerStyle="{StaticResource EmployeeListBoxItemStyle}"
                             Opacity="1">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Vertical" Margin="5">
                                    <TextBlock Text="{Binding Name}" Foreground="Black" HorizontalAlignment="Center"/>
                                    <Button Content="More Infos"
                                            Width="120"
                                            Command="{Binding DataContext.NGUI_HUD_ShowEmployeePopupCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
                                            CommandParameter="{Binding}"/>
                                </StackPanel>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                </ScrollViewer>

                <!-- Back & Close -->
                <StackPanel x:Name="MenuControlButtons" Visibility="Visible">
                    <Button Content="Back"
                            Visibility="{Binding NGUI_HUD_BackToMenuButton, FallbackValue=Collapsed}"
                            Width="250" Height="40"
                            Margin="10"
                            Command="{Binding NGUI_HUD_BackToMenuCommand}"/>
                    <Button Content="Back"
                            Width="250" Height="40"
                            Margin="10"
                            Command="{Binding NGUI_HUD_SideMenuCloseCommand}"/>
                </StackPanel>
            </StackPanel>
        </Border>

        <Button Content="☰"
                x:Name="OpenSideMenuButton"
                Width="50" Height="50"
                HorizontalAlignment="Right"
                VerticalAlignment="Top"
                Margin="0,5,30,0"
                Command="{Binding NGUI_HUD_SideMenuOpenCommand}"/>
    </Grid>
</UserControl>

25 Feb 2025, 18:44

Hi, have you set up a mapping context like it's explained in the Unreal tutorial: https://www.noesisengine.com/docs/Gui.C ... ml#gamepad?

Control Elements via Controller

Control Elements via Controller

Re: Control Elements via Controller

Who is online