CODEWITHSUNDEEP
windowswindows-phone-8.1
Yuchen
Yuchen

Reputation: 33036

Why isn't the TextBox inside ContentDialog automatically scroll above keyboard

I notice that if the TextBox is in a Page, then everything working perfectly. Whenever the TextBox is focused, it will scroll to the right position above the keyboard so that the user will be able to see the text as he is typing along. Thing is a little bit different for ContentDialog for whatever reason. TextBox is easily covered by the keyboard. Is there any obvious setting that I am missing?

I create a default ContentDialog and copied the code to a page. And get the following screenshots. Everything else is the same except that the upper level XAML elements is <ContentDialog> for the left column, <Page> for the right column.

Left Image - ContentDialog before keyboard pop up
Right Image - Page before keyboard pop up

Left Image - ContentDialog after keyboard pop up
Right Image - Page after keyboard pop up

Here is the related code: 

<StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
    <TextBox Name="email" Header="Email address"/>
    <PasswordBox Name="password" Header="Password"/>
    <CheckBox Name="showPassword" Content="Show password"/>

    <!-- Content body -->
    <TextBlock Name="body" Style="{StaticResource MessageDialogContentStyle}" TextWrapping="Wrap">
        <TextBlock.Text>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </TextBlock.Text>
    </TextBlock>
</StackPanel>

Why isn't the TextBox inside ContentDialog scrolled above the keyboard as it is like the in the Page?

Upvotes: 2

Views: 759

Answers (1)

Romasz
Romasz

Reputation: 29792

Once I've faced similar problem with the TextBox and have found answer here. Basically, once the keyboard is shown, the focused element is not moved up, you can correct this behaviour by making additional transform:

// add this code somewhere to your constructor of your page or content dialog - where the problematic TextBox is located
Windows.UI.ViewManagement.InputPane.GetForCurrentView().Showing += (s, args) =>
{
    const double extraHeightBuffer = 20.0;

    UIElement focused = FocusManager.GetFocusedElement() as UIElement;
    if (null != focused)
    {
        GeneralTransform gt = focused.TransformToVisual(this);
        Point focusedPoint = gt.TransformPoint(new Point(0, focused.RenderSize.Height - 1));
        double bottomOfFocused = focusedPoint.Y + extraHeightBuffer;
        if (bottomOfFocused > args.OccludedRect.Top)
        {
            var trans = new TranslateTransform();
            trans.Y = -(bottomOfFocused - args.OccludedRect.Top);
            this.RenderTransform = trans;
        }
        args.EnsuredFocusedElementInView = true;
    }
};

Windows.UI.ViewManagement.InputPane.GetForCurrentView().Hiding += (s, args) =>
{
    var trans = new TranslateTransform();
    trans.Y = 0;
    this.RenderTransform = trans;
    args.EnsuredFocusedElementInView = false;
};

Upvotes: 1

Related Questions