TouchInputOverlay.xaml

<UserControl
    x:Class="UnoDoom.Game.TouchInputOverlay"
    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:toolkit="using:Uno.UI.Toolkit"
    IsHitTestVisible="True"
    Opacity="0.85"
    mc:Ignorable="d">

    <Grid
        x:Name="RootGrid"
        toolkit:VisibleBoundsPadding.PaddingMask="All"
        Background="Transparent">
        <!--  Left side: Movement joystick  -->
        <Canvas
            x:Name="MovementArea"
            Width="200"
            Height="200"
            Margin="20,0,0,20"
            HorizontalAlignment="Left"
            VerticalAlignment="Bottom">
            <!--  Joystick base  -->
            <Ellipse
                x:Name="JoystickBase"
                Canvas.Left="25"
                Canvas.Top="25"
                Width="150"
                Height="150"
                Fill="#40808080"
                Stroke="#80FFFFFF"
                StrokeThickness="2" />
            <!--  Joystick knob  -->
            <Ellipse
                x:Name="JoystickKnob"
                Canvas.Left="70"
                Canvas.Top="70"
                Width="60"
                Height="60"
                Fill="#80FFFFFF"
                Stroke="White"
                StrokeThickness="2" />
        </Canvas>

        <!--  Right side: Look/Turn joystick  -->
        <Canvas
            x:Name="LookArea"
            Width="200"
            Height="200"
            Margin="0,0,120,20"
            HorizontalAlignment="Right"
            VerticalAlignment="Bottom">
            <!--  Look joystick base  -->
            <Ellipse
                x:Name="LookJoystickBase"
                Canvas.Left="25"
                Canvas.Top="25"
                Width="150"
                Height="150"
                Fill="#40808080"
                Stroke="#80FFFFFF"
                StrokeThickness="2" />
            <!--  Look joystick knob  -->
            <Ellipse
                x:Name="LookJoystickKnob"
                Canvas.Left="70"
                Canvas.Top="70"
                Width="60"
                Height="60"
                Fill="#80FFFFFF"
                Stroke="White"
                StrokeThickness="2" />
        </Canvas>

        <!--  Right side: Action buttons  -->
        <StackPanel
            Margin="0,0,20,20"
            HorizontalAlignment="Right"
            VerticalAlignment="Bottom"
            Spacing="10">

            <StackPanel Orientation="Horizontal" Spacing="20">
                <Grid
                    x:Name="RunButton"
                    Width="60"
                    Height="50"
                    Background="#60808080"
                    BorderBrush="White"
                    BorderThickness="1"
                    CornerRadius="8">
                    <FontIcon
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Foreground="White"
                        Glyph="&#xEB9D;" />
                </Grid>
                <Grid
                    x:Name="MapButton"
                    Width="60"
                    Height="50"
                    Background="#60808080"
                    BorderBrush="White"
                    BorderThickness="1"
                    CornerRadius="8">
                    <SymbolIcon
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Foreground="White"
                        Symbol="Map" />
                </Grid>
            </StackPanel>

            <!--  Fire button  -->
            <Grid
                x:Name="FireButton"
                Width="80"
                Height="80"
                Background="#80FF0000"
                BorderBrush="White"
                BorderThickness="2"
                CornerRadius="40">
                <SymbolIcon
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Foreground="White"
                    Symbol="Target" />
            </Grid>
            <!--  Use button  -->
            <Grid
                x:Name="UseButton"
                Width="80"
                Height="80"
                Background="#8000FF00"
                BorderBrush="White"
                BorderThickness="2"
                CornerRadius="40">
                <SymbolIcon
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Foreground="White"
                    Symbol="OpenPane" />
            </Grid>
        </StackPanel>

        <!--  Top left: Menu/Escape button  -->
        <Grid
            x:Name="MenuButton"
            Width="50"
            Height="50"
            Margin="20,20,0,0"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Background="#60808080"
            BorderBrush="White"
            BorderThickness="1"
            CornerRadius="8">
            <FontIcon
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Foreground="White"
                Glyph="&#xE700;" />
        </Grid>

        <!--  Top left: Hide overlay button (next to menu)  -->
        <Grid
            x:Name="HideButton"
            Width="50"
            Height="50"
            Margin="80,20,0,0"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Background="#60808080"
            BorderBrush="White"
            BorderThickness="1"
            CornerRadius="8">
            <FontIcon
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Foreground="White"
                Glyph="&#xED1A;" />
        </Grid>

        <!--  Top right: Weapon selection  -->
        <StackPanel
            Margin="0,20,20,0"
            HorizontalAlignment="Right"
            VerticalAlignment="Top"
            Orientation="Horizontal"
            Spacing="5">
            <Grid
                x:Name="WeaponPrevButton"
                Width="50"
                Height="40"
                Background="#60808080"
                BorderBrush="White"
                BorderThickness="1"
                CornerRadius="8">
                <FontIcon
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Foreground="White"
                    Glyph="&#xE76B;" />
            </Grid>
            <Grid
                x:Name="WeaponNextButton"
                Width="50"
                Height="40"
                Background="#60808080"
                BorderBrush="White"
                BorderThickness="1"
                CornerRadius="8">
                <FontIcon
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Foreground="White"
                    Glyph="&#xE76C;" />
            </Grid>
        </StackPanel>
    </Grid>
</UserControl>