InputPane düzgün çalışmıyor

Question

Şu anda bir Evrensel Uygulama geliştiriyorum, ama burada bir sorun var. Kullanıcı Telefon Numarası için TextBox ile bir Çerçeve var.

Bu yüzden, boşluğa sığabilmesi için LayoutRoot (GRID) yüksekliğini değiştirmek istiyorum.
Bu amaçla InputPane.GetForCurrentView().Showing ve InputPane.GetForCurrentView().Hiding kullanıyorum. İşte kodum.

public UserRegistrationAuthorization_PhoneNumber() 
    { 
     this.InitializeComponent(); 
     LayoutRootInitialHeight = LayoutRoot.ActualHeight; 
     InputPane.GetForCurrentView().Showing += UserRegistrationAuthorization_PhoneNumber_Showing; 
     InputPane.GetForCurrentView().Hiding += UserRegistrationAuthorization_PhoneNumber_Hiding; 
    } 

private void UserRegistrationAuthorization_PhoneNumber_Showing(InputPane sender, InputPaneVisibilityEventArgs args) 
    { 
     LayoutRoot.Height = LayoutRoot.ActualHeight - args.OccludedRect.Height; 
     LayoutRoot.VerticalAlignment = VerticalAlignment.Top; 
     args.EnsuredFocusedElementInView = true; 
    } 

private void UserRegistrationAuthorization_PhoneNumber_Hiding(InputPane sender, InputPaneVisibilityEventArgs args) 
    { 
     // TODO: Get rid of that shit 
     LayoutRoot.Height = LayoutRootInitialHeight; 
     args.EnsuredFocusedElementInView = false; 
    } 

Ben TextBox klavye gizler dışında tıklayın ve bundan sonra ekranda bir kara delik bırakır. 2

Ama en ilginç benim Lumia o fiziksel Geri Düğmesi bastığınızda, klavye normalde sakladığı ve benim LayoutRoot Çerçevesinin ilk yüksekliğini alır.

Hata mı, yoksa yanlış bir şey mi yapıyorum?

Answer 1

Bu, LayoutRootInitialHeight öğenizi yapıcıya kaydettiğinizde, LayoutRoot aslında yüklenmez ve ActualHeight == 0 olduğu için LayoutRoot.Height öğesini 0 olarak ayarlarsınız, dolayısıyla görünür olmaz. Bu yüzden LayoutRootInitialHeight öğenizi LayoutRoot'un Yüklü olay işleyicisine kaydetmeniz gerekir.

Ayrıca, LayoutRoot'un yüksekliğini hiç değiştirmemenizi öneririm. Tüm görsel ağacınızın sıfırdan oluşturulmasına neden olur ve genel olarak kötü bir uygulamadır. Bunun yerine, gerekli tüm öğelerin RenderTransformunu değiştirerek uygun konumlara geçmelerini sağlayın. RenderTransform, ekrandaki hareketleri ve animasyonları kullanmanın en doğru yoludur ve Next (İleri) düğmesiyle klavyeyle aynı şekilde hareket ederek güzel görsel efektler elde edebilirsiniz.

Kabaca kod aşağıdaki gibi görünebilir:

<Button Content="Next" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" HorizontalContentAlignment="Center"> 
    <Button.RenderTransform> 
     <CompositeTransform x:Name="NextButtonTransform" TranslateY="0"/> 
    </Button.RenderTransform> 
</Button> 

...

private void UserRegistrationAuthorization_PhoneNumber_Showing(InputPane sender, InputPaneVisibilityEventArgs args) 
{ 
    NextButtonTransform.TranslateY = -300; 
    EnsuredFocusedElementInView = true; 
} 

private void UserRegistrationAuthorization_PhoneNumber_Hiding(InputPane sender, InputPaneVisibilityEventArgs args) 
{ 
    NextButtonTransform.TranslateY = 0; 
    args.EnsuredFocusedElementInView = false; 
} 

Ve daha karmaşık yolu İleri düğmesi aynı hızda yukarı ve aşağı hareket yapar bazı film şeridi çalıştırmaktır klavye ile, her zaman üstünde görünür. InputPane.GetForCurrentView() 'den beri, klavye zaten tam olarak gösterildikten sonra gösteriliyor olmasına rağmen, tüm animasyonları TextBox.GotFocus ve TextBox.LostFocus olaylarına bağlamanız gerekir. Mobil kutuda, metin kutusu her zaman odaklandığında klavye her zaman gösterilir, bu nedenle güzel çalışır.