Windows phone 8 和带键盘的标题

Question

所以我有一个非常大的问题：

在我的页面上（它与 Microsoft 的“消息应用程序”大致相同），当我单击输入框并弹出键盘时，我的标题向上移动并且不再可见。

我搜索了一些，发现的大多数解决方案都不起作用（针对他们的 wp7...）。 （就像一个博客，其中一个人创建了很多依赖属性，然后更改了 Phoneframe 的边距。它工作了一点，但是在键盘动画期间标题消失了。这还不够，它真的不完美。）

微软在标准的“消息”应用程序中管理它（字体大小更改的小错误），所以它必须是可能的。

怎么可能意识到这一点？

Answer 1

我试过这个解决方案，效果很好：

1. 尝试监听 TextBox.GotFocus 和 TextBox.LostFocus 事件，以检测应用程序中的 TextBox 何时获得和失去焦点。

2. 将您的全部内容放在ScrollViewer 中，如下所示：

XAML 代码：

<ScrollViewer x:Name="LayoutRoot" Margin="0,0,0,0">
    <Grid  Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>


        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
            <TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1">
            <TextBox HorizontalAlignment="Left" Height="254" Margin="10,183,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="456" GotFocus="TextBox_GotFocus" LostFocus="TextBox_LostFocus"/>
        </Grid>
    </Grid>
</ScrollViewer>

1. 在 ScrollViewer 中添加内容将提供即使在键盘未打开时也能滚动的体验，而这并不理想。 为此，您需要在键盘打开之前和键盘关闭之后禁用滚动。

2. 在 TextBox_GotFocus 事件中播放 ScrollViewer 的上边距：

在构造函数中：

public MainPage()
{
            InitializeComponent();
            LayoutRoot.VerticalScrollBarVisibility = ScrollBarVisibility.Disabled;
}

事件：

private void TextBox_GotFocus(object sender, RoutedEventArgs e)
{
     LayoutRoot.Margin = new Thickness(0, 330, 0, 0);
     LayoutRoot.VerticalScrollBarVisibility = ScrollBarVisibility.Visible;
}

添加 TextBox_LostFocus 事件处理程序还可以在键盘关闭时使页面返回到其原始视图：

private void TextBox_LostFocus(object sender, RoutedEventArgs e)
{
      LayoutRoot.Margin = new Thickness(0, 0, 0, 0);
      LayoutRoot.VerticalScrollBarVisibility = ScrollBarVisibility.Disabled;
}

这有助于您在打开键盘时让页面回到原来的位置。 希望这会有所帮助。

Answer 2

您可以将 UI 设置为列表框，以便您可以滚动列表框并检查向上的标题。

Answer 3

渲染 SIP 键盘时，PhoneApplicationFrame.TranslateTransform.Y 设置为特定值（横向为 -259，纵向为 -339）。要更新布局，我们只需将上边距设置为指定值 (-s)，然后 Silverlight 布局系统将解决此问题。

这里是 XAML 部分：

<Grid x:Name="LayoutRoot" >
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text="WINDOWS PHONE" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock Text="developer's ?" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>
        <Grid Grid.Row="1" Margin="12,0,12,0"></Grid>
        <TextBox Grid.Row="2" LostFocus="TextBoxLostFocus"/>
    </Grid>

C#部分

    private const double LandscapeShift = -259d;
    private const double LandscapeShiftWithBar = -328d;
    private const double Epsilon = 0.00000001d;
    private const double PortraitShift = -339d;
    private const double PortraitShiftWithBar = -408d;

    public static readonly DependencyProperty TranslateYProperty = DependencyProperty.Register("TranslateY", typeof(double), typeof(MainPage), new PropertyMetadata(0d, OnRenderXPropertyChanged));

    public MainPage()
    {
        InitializeComponent();
        Loaded += MainPageLoaded;
    }

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

    private static void OnRenderXPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        ((MainPage)d).UpdateTopMargin((double)e.NewValue);
    }

    private void MainPageLoaded(object sender, RoutedEventArgs e)
    {
        BindToKeyboardFocus();
    }

    private void BindToKeyboardFocus()
    {
        PhoneApplicationFrame frame = Application.Current.RootVisual as PhoneApplicationFrame;
        if (frame != null)
        {
            var group = frame.RenderTransform as TransformGroup;
            if (group != null)
            {
                var translate = group.Children[0] as TranslateTransform;
                var translateYBinding = new Binding("Y");
                translateYBinding.Source = translate;
                SetBinding(TranslateYProperty, translateYBinding);     
            }
        }
    }     
    private void UpdateTopMargin(double translateY)
    {    
      if(IsClose(translateY, LandscapeShift) || IsClose(translateY,PortraitShift) || IsClose(translateY, LandscapeShiftWithBar) || IsClose(translateY, PortraitShiftWithBar))
      {
        LayoutRoot.Margin = new Thickness(0, -translateY, 0, 0);  
      }
    }

    private bool IsClose(double a, double b)
    {
        return Math.Abs(a - b) < Epsilon;
    }

    private void TextBoxLostFocus(object sender, RoutedEventArgs e)
    {
        LayoutRoot.Margin = new Thickness();
    }

您可以尝试以下链接。我认为这会有所帮助。

http://sorokoletov.com/2011/08/windows-phone-70-handling-text-entry-screens/