How do i remove the background color when keyboard is shown?

How-to Discussions
1

Hi,

I have the following code:

<App Theme="Basic" Background="#eeeeeeff">
<DockPanel>

    <StatusBarBackground/>
    <iOS.StatusBarConfig Style="Light"/>
    <BottomBarBackground IncludesKeyboard="false"/>

    <Page ux:Name="PageOne" Background="#ffff00">
        <Panel>
            <Grid RowData="1*,60">
                <ClientPanel>
                    <Panel Background="#ffff00" Height="50" Dock="Top">
                        <Text Value="HELLO"/>
                    </Panel>

                    <StackPanel Background="#ff00ff">
                        <TextEdit Height="25" TextAlignment="Center">
                            <Rectangle Layer="Background" CornerRadius="10">
                                <Stroke Width="1" Brush="#000000"/>
                            </Rectangle>
                        </TextEdit>
                    </StackPanel>
                </ClientPanel>

                <Grid ColumnData="1*,1*">
                    <Panel Background="#000000">
                        <Rectangle ux:Binding="Appearance">
                            <Stroke Width="1">
                                  <SolidColor Color="#ffffff" />
                               </Stroke>
                           </Rectangle>

                        <Text Value="ONE" FontSize="14" Alignment="Center" Font="RobotoMedium" TextColor="#ffffff"/>

                    </Panel>
                    <Panel Background="#000000">
                        <Rectangle ux:Binding="Appearance">
                            <Stroke Width="1">
                                  <SolidColor Color="#ffffff" />
                               </Stroke>
                           </Rectangle>
                        <Text Value="TWO" FontSize="14" Alignment="Center" Font="RobotoMedium" TextColor="#ffffff"/>
                    </Panel>
                </Grid>
            </Grid>
        </Panel>
    </Page>
</DockPanel>
</App>

I don’t know how to “remove” the yellow color that appears just above the keyboard:

file

file

2

Edit: the color comes from the:

<Page ux:Name="PageOne" Background="#ffff00">

as i changed that color and it’s the one that is shown above the keyboard

3

To have their intended effect StatusBarBackground and BottomBarBackground should be docked to Top and Bottom respectively. You can read more about their behaviour here

I suspect the weird behaviour you’re getting now is because the BottomBarBackground takes up space somewhere else. :slight_smile:

If you can explain what visual result you want to achieve when the keyboard is on-screen we can probably find out if there’s anything else that needs to change as well. :slight_smile:

4

I simply want the background to not change at all when the keyboard is visible. I want the keyboard to “float”

5

Then try to dock the bottombarbackground as I described and see if that helps. :slight_smile:

6

I already tried the docking before submiting the question :slight_smile: here u have the results:

    <StatusBarBackground Dock="Top"/>
    <iOS.StatusBarConfig Style="Light"/>
    <BottomBarBackground IncludesKeyboard="false" Dock="Bottom"/>

    <Page ux:Name="PageOne" Background="#00ff00">

Result:

file

I would like the statusBarBackground color to change depending on the page color.

Am i missing something ?

7

Ok, the problem is that you’re using a ClientPanel in the inner layout. The ClientPanel automatically responds to the presence of the keyboard since it itself contains BottomBarBackground, so the problems you’re seeing are unrelated to the StatusBarBackground and BottomBarBackground components in your markup.

To make it work:

  • First make sure that the statusbarbackground and bottombarbackground are docked, as mentioned earlier.
  • Replace the ClientPanel with a DockPanel

I would like the statusBarBackground color to change depending on the page color.

You can set the Background property of StatusBarBackground to different values, or you can make a panel the height of StatusBarBackground and fill that panel with anything you want. :slight_smile:

8

Thnx very much!