Windows Phone 8 中的可滚动表单控件 [英] Scrollable form control in Windows Phone 8

问题描述

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

How do I make a scrollable form similar to that of the Phone Contact input panel in Windows Phone 8.1?
The current method of StackPanel inside a ScrollViewer restricts scrolling when the SIP launches and I have to hit back button to choose other TextBoxes.
This is not an idea UX situation and I've tried a few options of the web.

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

推荐答案

检查以下对我来说效果很好的代码.

check the below code which has worked fine for me.

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

    }
}

<小时>

聊天.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 在键盘处于活动状态时不向上滚动
正常时

check: ScrollViewer not scroll up while Keyboard is active
When normal

当 SIP 打开时

When SIP open

这篇关于Windows Phone 8 中的可滚动表单控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！