Windows Phone 8 中的可滚动表单控件

Question

如何制作类似于 Windows Phone 8.1 中的电话联系人输入面板的可滚动表单？
ScrollViewer 中 StackPanel 的当前方法限制了 SIP 启动时的滚动，我必须点击返回按钮才能选择其他 TextBox。
这不是一个想法 UX 情况，我尝试了一些网络选项。

1. 将 StackPanel 的高度增加到超出其必要大小约 350 像素 - 不起作用，因为它会不均匀地置换表格并且 没有恢复正常
2. 按照另一个在线网站的建议创建 ListBox 也没有改变任何东西
3. 增加最后一个控件的下边距也无济于事

Answer 1

检查下面对我来说效果很好的代码。

Chat.xaml.cs

using System;
using System.ComponentModel;
using System.Windows.Controls;
using System.Windows.Input;
using System.Linq;
using System.Windows;
using System.Windows.Data;
using System.Windows.Media;
using Microsoft.Phone.Controls;
using PhoneApplicationPage = Microsoft.Phone.Controls.PhoneApplicationPage;

namespace LIV.View
{
// ReSharper disable once RedundantExtendsListEntry
    public partial class Chat : PhoneApplicationPage
    {
        private bool _flag;
        public Chat()
        {
            InitializeComponent();
        }        

        #region Static Chat Header WorkAround

        public double OldHeight;
        private TranslateTransform _translateTransform;

        #region TranslateY dependency property
        public static readonly DependencyProperty TranslateYProperty = DependencyProperty.Register(
            "TranslateYProperty", typeof(double), typeof(Chat), new PropertyMetadata(default(double), PropertyChangedCallback));

        private static void PropertyChangedCallback(DependencyObject o, DependencyPropertyChangedEventArgs e)
        {
            var chat = o as Chat;
            if (chat != null)
            {
                chat.UpdateTopMargin((double)e.NewValue);
            }
        }

        public double TranslateY
        {
            get { return (double)GetValue(TranslateYProperty); }
            set { SetValue(TranslateYProperty, value); }
        }
        #endregion

        private void ChatPage_OnLoaded(object sender, RoutedEventArgs e)
        {
            var transform = ((Application.Current).RootVisual).RenderTransform as TransformGroup;
            if (transform != null)
            {
                _translateTransform = transform.Children.OfType<TranslateTransform>().FirstOrDefault();
                if (_translateTransform != null)
                {
                    var binding = new Binding("Y")
                    {
                        Source = _translateTransform
                    };
                    BindingOperations.SetBinding(this, TranslateYProperty, binding);
                }
            }
        }

        private void UpdateTopMargin(double translateY)
        {
            LayoutRoot.Margin = new Thickness(0, -translateY, 0, 0);
        }

        #endregion

    }
}

---

Chat.xaml

<phone:PhoneApplicationPage x:Class="LIV.View.Chat"
                            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                            xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
                            xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

                            FontFamily="{StaticResource PhoneFontFamilyNormal}"
                            FontSize="{StaticResource PhoneFontSizeNormal}"
                            Foreground="Black"
                            Loaded="ChatPage_OnLoaded"
                            Orientation="Portrait"
                            SupportedOrientations="Portrait"
                            shell:SystemTray.BackgroundColor="#FF5CBFBB"
                            shell:SystemTray.ForegroundColor="White"
                            shell:SystemTray.IsVisible="True"
                            mc:Ignorable="d">

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid Background="#FF5CBFBB">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <StackPanel>
                <TextBlock Foreground="White" Text="{Binding ChatUser.Name}" />
                <TextBlock Foreground="White" Text="{Binding ChatTime}" />
            </StackPanel>
            <Button Grid.Column="1"
                    BorderThickness="0"
                    Command="{Binding TerminateCommand}"
                    Foreground="White">
                End Chat
            </Button>
        </Grid>
        <Grid x:Name="ContentPanel" Grid.Row="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <ListBox x:Name="MessageListBox"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"
                    ItemsSource="{Binding Messages}"
                    ScrollViewer.VerticalScrollBarVisibility="Visible"
                    Style="{StaticResource BottomListBoxStyle}">

            </ListBox>
            <StackPanel x:Name="MessageTextPanel"
                        Grid.Row="1"
                        Background="#FF5CBFBB">
                <Grid Margin="0,0,0,-10">
                    <TextBlock FontSize="15" Text="{Binding UserStatus}" />
                </Grid>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <TextBox></TextBox>
                </Grid>
            </StackPanel>
        </Grid>
        </Grid>
    </Grid>
</phone:PhoneApplicationPage>

检查：ScrollViewer not scroll up while Keyboard is active
正常时

当 SIP 打开时

Answer 2

当显示 SIP 时，仅扩展StackPanel 的底部边距如何？ IIRC 没有直接的 API 可以对此进行测试，但您可以使用 TextBoxes 的焦点状态来检查它何时出现或消失。