显示键盘的滚动页面 [英] Scrolling page with keyboard shown

问题描述

我有一个问题:我在滚动视图中有一个固定高度的页面:

I have an issue: I have a fixed height page in a scroll view:

这是页面

当我弹出键盘时:

现在键盘有 50% 的屏幕，我希望页面的可见部分滚动 - 如何制作.因为如果用户不会在页面上粘贴 - 键盘不会关闭，一些用户会尝试滚动直到他们到达发送按钮.

Now the keyboard has 50% of the screen, i want the visible part of the page to scroll - how to make it. Because if the user wont tape on the page - keyboard wont close, some user will try to scroll till they get to the Send button.

这是我的 xaml:

<ScrollViewer HorizontalAlignment="Stretch" Grid.Row="1" VerticalAlignment="Stretch" Margin="0,0">
            <Grid Margin="0" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="White">
                <Grid.RowDefinitions>
                    <RowDefinition Height="100"/>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="60"/>
                    <RowDefinition Height="80"/>
                    <RowDefinition Height="60"/>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="auto"/>
                </Grid.RowDefinitions>
                <Rectangle Grid.Row="0" Fill="#FFE3E2E2" Margin="0"></Rectangle>
                <TextBlock x:Name="Comment" HorizontalAlignment="Center" Margin="10" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Center" Foreground="Black" FontSize="22"/>
                <TextBlock Grid.Row="2" Margin="10" x:Name="FeedbackTitleLabel" HorizontalAlignment="Left" TextWrapping="NoWrap" Text="sgwrgggggg" VerticalAlignment="Center" Foreground="Black" FontSize="24"/>
                <TextBox x:Name="FeedbackTitle" HorizontalAlignment="Stretch" Margin="0,0,0,0" Grid.Row="3" TextWrapping="NoWrap" Text="" VerticalAlignment="Center" FontSize="24" BorderBrush="#BF7B7B7B" Background="#BFC9C9C9"/>
                <TextBlock Margin="10" x:Name="FeedbackContentLabel" HorizontalAlignment="Left" TextWrapping="NoWrap" Text="sgrsgsrgsegsg" VerticalAlignment="Center" Grid.Row="4" Foreground="Black" FontSize="24"/>
                <TextBox x:Name="FeedbackContent" HorizontalAlignment="Stretch" Margin="0" Grid.Row="5" TextWrapping="Wrap" Text="" VerticalAlignment="Stretch" FontSize="24" BorderBrush="#BF7B7B7B" Background="#BFC9C9C9"/>
                <StackPanel Grid.Row="6" Orientation="Horizontal">
                    <TextBlock Margin="10,0,10,0" x:Name="AdditionalItemsLabel" HorizontalAlignment="Left" TextWrapping="NoWrap" Text="sgsgsegsrg" VerticalAlignment="Center" Grid.Row="4" Foreground="Black" FontSize="24"/>
                    <local:Button2 Height="80" x:Name="Photo" HorizontalAlignment="Right" Margin="10" VerticalAlignment="Stretch" Width="177" Tap="Photo_Tap"/>
                </StackPanel>
                <local:Button3 x:Name="Send" HorizontalAlignment="Stretch" Margin="10" Height="80" Grid.Row="8" VerticalAlignment="Stretch" Tap="Send_Tap"/>
                <Grid Margin="10" Name="AttachmentGrid" Grid.Row="7" Visibility="Collapsed">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="60"/>
                        <RowDefinition Height="auto"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="60"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Margin="0,10,10,10" Grid.ColumnSpan="2" x:Name="AttachedFilesLabel" HorizontalAlignment="Left" TextWrapping="NoWrap" Text="sgrsgsrgsegsg" VerticalAlignment="Center" Grid.Row="0" Foreground="Black" FontSize="24"/>
                    <StackPanel Grid.Row="2" x:Name="ImageThumbs" Orientation="Horizontal">

                    </StackPanel>
                    <Rectangle VerticalAlignment="Center" Grid.Row="0" Grid.ColumnSpan="2" Grid.RowSpan="2" Height="40" Width="40" Grid.Column="1" Fill="#FFC2C2C2" Stroke="Black" RadiusX="5" RadiusY="5" Tap="DeleteAttach_Tap"/>
                    <Image Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False" Grid.Column="1" Height="30" Width="30" HorizontalAlignment="Center" VerticalAlignment="Center" Source="../*/delete.png"/>
                </Grid>
                <Grid Name="MessageGrid" Margin="10" Visibility="Collapsed" Grid.Row="1">
                    <Rectangle Fill="#00A7D1" Margin="0,0,0,0" Height="80" RadiusX="5" RadiusY="5"/>
                    <TextBlock x:Name="Message" HorizontalAlignment="Center" Margin="10" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Center" Foreground="White" FontSize="22"/>
                </Grid>
            </Grid>
        </ScrollViewer>

我希望它看起来像什么的示例，转到在 WP 中添加的联系人，添加名称:

Example of what i want it to look like, go to the contact adding in WP, add name:

突出显示的区域可以滚动，我希望它在我的应用程序中...

The hightlighted area can be scrolled, i want it in my app...

推荐答案

我遇到了同样的问题.但最后我解决了它，我只是使用了 Height 属性来做到这一点.请执行以下步骤

I had the same issue. but at last i solved it, i just used the Height property to do this. Please do the following steps

• 首先创建一个ScrollViewer
• Indide ScrollViewer 创建一个容器(例如:Grid/StackPanel/Border 等...)并将每个控件放入其中.
• 为ScrollViewer和Container设置固定高度(注意:Container的高度应该大于ScrollViewer的高度)

查看下面的代码

<ScrollViewer Height="500">
        <Grid Name="Container" Height="700">
            <TextBox/>
            <TextBox/>
            <TextBox/>
        </Grid>
</ScrollViewer>

现在您可以滚动容器网格甚至显示的键盘，甚至可以将焦点放在文本框上.

Now you can scroll the container Grid Even the KeyBoard shown or even focus on a TextBox.

这篇关于显示键盘的滚动页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！