2017-02-15 43 views
1

我在xamarin.forms中遇到了一個問題。我使用GridView進行登錄頁面設計,因此可以根據設備的高度和寬度進行更改。我不想滾動那個頁面所以我沒有放任何ScrollView。在網格佈局當鍵盤在xamarin.forms中打開時如何滾動頁面?

的XAML設計規範: -

<?xml version="1.0" encoding="utf-8" ?> 
<custom:KeyboardResizingAwareContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
      x:Class="HRMS.Login.LoginPage" 
      BackgroundImage="login_bg.png" 
        xmlns:local="clr-namespace:HRMS;assembly=HRMS" 
        Title="{x:Static local:AppResources.TitleLogin}" 
      xmlns:custom="clr-namespace:HRMS.Login;assembly=HRMS"> 
    <ContentPage.Padding> 
    <OnIdiom x:TypeArguments="Thickness" Phone="60,40,60,40" Tablet="120,100,120,100" /> 
    </ContentPage.Padding> 
    <custom:KeyboardResizingAwareContentPage.Resources> 
    <ResourceDictionary> 
     <Style x:Key="SubTitleStyle" TargetType="Label"> 
     <Setter Property="FontSize" Value="Small" /> 
     <Setter Property="FontAttributes" Value="Bold" /> 
     <Setter Property="TextColor" Value="White" /> 
     </Style> 
    </ResourceDictionary> 
    </custom:KeyboardResizingAwareContentPage.Resources> 
    <custom:KeyboardResizingAwareContentPage.Content> 
    <AbsoluteLayout x:Name="AbsMain"> 
     <Grid VerticalOptions="Center" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="35*"/> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="6*"/> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="6*"/> 
      <RowDefinition Height="Auto"/> 
     </Grid.RowDefinitions> 
     <Image x:Name="ImgLogo" Source="login_logo.png" HorizontalOptions="Center" Grid.Row="0"/> 
     <StackLayout Grid.Row="1"> 
      <StackLayout.HeightRequest> 
      <OnIdiom x:TypeArguments="x:Double" Tablet="55" Phone="35" /> 
      </StackLayout.HeightRequest> 
     </StackLayout> 
     <Frame OutlineColor="#DCDCDC" 
      HorizontalOptions="FillAndExpand" VerticalOptions="Center" 
      HasShadow="false" Padding="1" 
      Grid.Row="2" 
      BackgroundColor="White" 
      Margin="5,0,5,0"> 
      <Frame.HeightRequest> 
      <OnIdiom x:TypeArguments="x:Double" Tablet="55" Phone="35" /> 
      </Frame.HeightRequest> 
      <Frame.Content> 
      <Grid> 
       <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="1*"/> 
       <ColumnDefinition Width="9*"/> 
       </Grid.ColumnDefinitions> 
       <Image x:Name="ImgLoginName" Grid.Column="0" Source="ico_login_name.png" 
        HorizontalOptions="StartAndExpand" VerticalOptions="Center" Margin="5,0,0,0"/> 
       <StackLayout Grid.Column="1" VerticalOptions="Center"> 
       <Entry x:Name="TxtUsername" TextColor="#f15a23" 
         Margin="5,0,0,0" 
         PlaceholderColor="#8c8c8c" 
         BackgroundColor="White" 
         Placeholder="{x:Static local:AppResources.PHEmployeeCode}" /> 
       </StackLayout> 
      </Grid> 
      </Frame.Content> 
     </Frame> 
     <Frame OutlineColor="#DCDCDC" 
      HorizontalOptions="FillAndExpand" VerticalOptions="Center" 
      HasShadow="false" Padding="1" 
      Grid.Row="3" 
      BackgroundColor="White" 
      Margin="5,0,5,0"> 
      <Frame.HeightRequest> 
      <OnIdiom x:TypeArguments="x:Double" Tablet="55" Phone="35" /> 
      </Frame.HeightRequest> 
      <Frame.Content> 
      <Grid> 
       <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="1*"/> 
       <ColumnDefinition Width="9*"/> 
       </Grid.ColumnDefinitions> 
       <Image x:Name="ImgLoginPassword" Grid.Column="0" Source="ico_login_password.png" 
        HorizontalOptions="StartAndExpand" VerticalOptions="Center" Margin="5,0,0,0"/> 
       <StackLayout Grid.Column="1" VerticalOptions="Center"> 
       <Entry x:Name="TxtPassword" IsPassword="True" TextColor="#f15a23" 
        PlaceholderColor="#8c8c8c" 
        Margin="5,0,0,0" 
        BackgroundColor="White" 
        Placeholder="{x:Static local:AppResources.PHPassword}" /> 
       </StackLayout> 
      </Grid> 
      </Frame.Content> 
     </Frame> 
     <Label x:Name="LblForgotPassword" Grid.Row="4" Margin="5,0,5,0" 
        Text="Forgot Password?" TextColor="Black" HorizontalTextAlignment="End"/> 
     <Button x:Name="BtnLogin" Text="{x:Static local:AppResources.BLogin}" Clicked="LoginButton_Clicked" 
        Grid.Row="5" BackgroundColor="#f15a23" TextColor="White" 
        HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> 
      <Button.HeightRequest> 
      <OnIdiom x:TypeArguments="x:Double" Tablet="55" Phone="45" /> 
      </Button.HeightRequest> 
     </Button> 
     <Image x:Name="ImgOr" Grid.Row="6" HorizontalOptions="FillAndExpand" 
       Source="or.png" /> 
     <Button x:Name="BtnUpdateDevicewithlogin" Text="{x:Static local:AppResources.BUpdateDevice}" 
       Clicked="UpdateDeviceWithLoginButton_Clicked" Grid.Row="7" 
       BackgroundColor="#f15a23" TextColor="White" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> 
      <Button.HeightRequest> 
      <OnIdiom x:TypeArguments="x:Double" Tablet="55" Phone="45" /> 
      </Button.HeightRequest> 
     </Button> 
     </Grid> 
     <ActivityIndicator x:Name="actIndicator2" Color="#f15a23" Opacity="2" 
       HeightRequest="50" WidthRequest="50" VerticalOptions="Center" HorizontalOptions="Center" 
       AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" /> 

    </AbsoluteLayout> 

    </custom:KeyboardResizingAwareContentPage.Content> 
</custom:KeyboardResizingAwareContentPage> 

enter image description here

enter image description here

我使用 「KeyboardResizingAwareContentPage」 頁面,而不是 「ContentPage」,因爲在iOS系統頁面不是當鍵盤打開設置。密碼字段隱藏在鍵盤後面,因此用戶無法看到輸入的內容。這就是爲什麼我使用渲染來處理IO中的內容頁面。

如上圖所示,當我關注用戶名或密碼輸入字段時,兩個按鈕隱藏在鍵盤後面。客戶的要求是當時頁面應該滾動。我怎麼解決這個問題?通過渲染可以嗎?我在這兩個平臺都面臨着這個問題。 (iOS和Android)

+0

選中此:http://stackoverflow.com/questions/31172518/how-do-i-keep-the-keyboard-from-covering-my-ui-instead-of-resizing-it – Zroq

+0

將您的網格內ContentPage中的ScrollView –

+0

您是否得到了解決方案? –

回答

1

即使您不打算滾動頁面,也可以使用ScrollView作爲頁面的根,並將網格放入其中。

這應該解決它。

+0

它不工作。 (我正在使用Grid,因爲我的頁面設計應該根據設備高度來設置,頁面不會以任何代價滾動,但現在客戶端要求是在鍵盤打開時滾動頁面)。我給「*」和自動格式的每一行賦予高度。如果我把我的網格放在滾動視圖中,我的網格會弄糊塗它應該佔用多少高度。所以我的設計不合適。 –

相關問題