2016-03-15 131 views
3

非常好的早晨,我試圖實現單擊UserName StackPanel時的功能,以便鍵盤不會隱藏信息。但是,這不是最好的選擇,我在iOS和Android上工作。你可以幫幫我嗎。Xamarin - 動畫StackLayout

<?xml version="1.0" encoding="UTF-8"?> 
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
      x:Class="BackGround.BackGroundImageDemo" BackgroundImage="Avion.jpg"> 
    <ContentPage.Content > 
    <StackLayout VerticalOptions="Center" Padding="5, 50, 120, 0" BackgroundColor="White" HorizontalOptions="Center"> 
     <Entry Placeholder="UserName" PlaceholderColor="Gray" TextColor="Navy" /> 
     <Entry Placeholder="Password" IsPassword="true" PlaceholderColor="Gray" TextColor="Navy"/> 
    </StackLayout> 

    </ContentPage.Content> 
</ContentPage> 

追逐應用程序有類似的東西。

Chase UserName normal - Chase in mode up stacklayout

回答

-1

對於我已經從你的問題的理解,你想辦法確保,當鍵盤彈出的,它不包括在該條目和/或其他相關信息屏幕,對吧?

這樣做的方法是讓您的內容在ScrollView之內,這樣用戶就可以根據需要進行滾動。此外,Android和iOS都會自動滾動屏幕直至條目可見。

我改變了你的例子是這樣的:

<?xml version="1.0" encoding="UTF-8"?> 
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
      x:Class="BackGround.BackGroundImageDemo" BackgroundImage="Avion.jpg"> 
    <ScrollView> 
     <StackLayout VerticalOptions="Center" Padding="5, 50, 120, 0" BackgroundColor="White" HorizontalOptions="Center"> 
      <Entry Placeholder="UserName" PlaceholderColor="Gray" TextColor="Navy" /> 
      <Entry Placeholder="Password" IsPassword="true" PlaceholderColor="Gray" TextColor="Navy"/> 
     </StackLayout> 
    </ScrollView> 
</ContentPage> 
+0

你的代碼如何在動畫項目Xamarin.Forms這是不正常。查看[Github上的BikeShare360應用程序](https://github.com/Microsoft/BikeSharing360_MobileApps)。 – adamhill

+0

C'omon,請對我在答覆中寫下的內容稍加註意。我沒有說這是一種動畫製作的方式,我展示了一個如何解決特定問題的例子 - 事實上,這是用戶問的問題。雖然標題說了一件事,但他的問題是另一個問題,正如他所描述的那樣。 –

-1

這不是正常情況下你是如何動畫在Xamarin.Forms項目。檢查出BikeShare360 app on Github

這是一個漂亮的應用程序,並使用第三方動畫庫和自定義Storyboard XAML來提供良好的用戶體驗。

例如,淡出控件中的任意元素。

定義你想要做什麼:

<animations:StoryBoard 
       x:Key="ProfileImageAnimation"  
       Target="{x:Reference ProfileImage}"> 
       <animations:FadeInAnimation 
        Direction="Up" 
        Duration="500" /> 
</animations:StoryBoard> 

什麼情況下你要觸發動畫:

<ContentPage.Triggers> 
     <EventTrigger Event="Appearing"> 
      <triggers:BeginAnimation 
       Animation="{StaticResource ProfileImageAnimation}" /> 
     </EventTrigger> 
</ContentPage.Triggers> 

元素你要的效果:

<ctrl:UserProfileImageControl 
         WidthRequest="105" 
         HeightRequest="105" 
         BorderColor="{StaticResource ProfileGrayColorHexString}" 
         ProfileImage="{Binding Profile.PhotoUrl}" 
         UpdatePhotoCommand="{Binding UpdatePhotoCommand}" 
         HorizontalOptions="CenterAndExpand" 
VerticalOptions="CenterAndExpand" /> 

所有的資源都可用,並且開始並不難。

祝你好運!

+0

用戶的問題不在於如何設置動畫(儘管是標題),而是關於鍵盤打開時隱藏的內容。 –

0

這可以使用scrollview來實現。這是簡單的代碼片段。

<ContentPage.Content> 
    <ScrollView x:Name="scr"> 

    Your Stack Layout having entry and click button 
    Add TapGestureRecognizer to entry control in this case it is username or password whichever you want. 
    How to add TapGestureRecognizer. You can look at here. 

    </ScrollView> 
</ContentPage.Content> 

然後在後面

field.GestureRecognizers.Add(new TapGestureRecognizer 
{ 
    Command = new Command(async() => 
    { 
      await ScollTest(); 
    }), 
    NumberOfTapsRequired = 1, 
}); 

private async void ScollTest() 
{ 
    // Then adjust your scroll this way. 
    await scr.ScrollToAsync(100, 1000, true); 
} 
相關問題