CODEWITHSUNDEEP
c#windowsxamluwpwin-universal-app
SaeedZeroOne
SaeedZeroOne

Reputation: 29

Make keyboard go over UI not shift the whole UI in UWP

I'm building an app in Universal Windows Platform and I have put a TextBox at the bottom of screen but I don't want it to shift the whole UI upwards, and I don't want to reorder everything to be fit above the keyboard.

I just wanna do something like Cortana that the keyboard can be above all layers.

What the app looks like itself:

What the app looks like after opening keyboard:

What Cortana looks like (which I want my app to be like this):

<Page
x:Class="Pi.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Pi"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" Loaded="Page_Loaded">
<Page.Resources>
    <FontFamily x:Key="Dekar">/Assets/Fonts/Dekar.otf#Dekar</FontFamily>
    <FontFamily x:Key="Consolas">/Assets/Fonts/SFThin.otf#SF UI Display</FontFamily>
</Page.Resources>

<Grid Background="Black">
    <Rectangle Margin="0">
        <Rectangle.Fill>
            <ImageBrush ImageSource="Assets/MainBG2.jpg" Stretch="UniformToFill" Opacity="0.35"/>
        </Rectangle.Fill>
    </Rectangle>
    <TextBlock x:Name="TitleText" Height="21" Margin="10,18,10,0" TextWrapping="Wrap" Text="ADMIN ACCESS" VerticalAlignment="Top" Foreground="#FF00AEFF" FontSize="20" FontFamily="{StaticResource Dekar}" TextAlignment="Center" DoubleTapped="TitleText_DoubleTapped"/>
    <TextBox x:Name="CommandBox" Margin="0,0,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Bottom" FontFamily="{StaticResource Consolas}" Foreground="#FF8D8D8D" Background="#BF111E23" BorderThickness="0,1,0,0" FontSize="17" Height="50" PlaceholderText="Type here..." Padding="10,12,0,0" RequestedTheme="Dark" BorderBrush="#FF00AEFF" KeyUp="KeyPressed"/>
    <ScrollViewer Margin="10,65,10,60" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
        <TextBlock x:Name="ResultText" TextWrapping="Wrap" Text="What are your commands?" VerticalAlignment="Top" Foreground="#FFDEDEDE" FontSize="19" FontFamily="{StaticResource Consolas}" TextAlignment="Left"/>
</Grid>

Upvotes: 1

Views: 336

Answers (1)

Rob Caplan - MSFT
Rob Caplan - MSFT

Reputation: 21919

By default the InputPane slides the page so that the focused element isn't covered by the keyboard. Your page has the focused TextBox at the bottom, so that has to slide up so the user can see what she types.

You can override this behavior by handling the InputPane.Showing event and setting the EnsuredFocusedElementInView property to let the InputPane know that you handled this and it doesn't need to slide.

You can move the TextBox to just above the InputPane's OccludedRect but leave the rest of the Page alone, then move the TextBox back in InoutPane.Hiding.

See

Upvotes: 1

Related Questions