2017-12-29 12 views
6

私はXamarinフォームに新たなんだフォーム、およびその内の別のグリッドといくつかのテキスト、ボタンや画像Xamarinはさまざまなデバイスサイズ間のスケーリングを処理しますか?取り扱いので、私はグリッドに簡単なXAMLページを作成する場合は、お願いしたいと思い

私のイメージは、SVGあるので、スケールする必要がありますが、ページの残りの部分はしていません。それは、7インチや9インチのタブレットなどのより大きなデバイスでは問題なく表示されますが、小型の携帯電話では非常に貧弱です。

私はこれがすべてのデバイスで同じに見えるようしなければならない何か他のものはありますか? これは現時点ではアンドロイドにしか書かれていません。私はこれを行う最良の方法だと信じられないコードビハインドで手作業でサイズを変更する必要があります。

おかげ

<?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="CCGT.SimpleLoginPage" 
      xmlns:artina="clr-namespace:UXDivers.Artina.Shared;assembly=UXDivers.Artina.Shared" 
      xmlns:local="clr-namespace:CCGT;assembly=CCGT" Title="{ artina:Translate PageTitleSimpleLogin }" BackgroundColor="{DynamicResource BasePageColor}" 
      xmlns:controls="clr-namespace:TwinTechsForms.NControl;assembly=TwinTechsForms.NControl.SvgImageView"> 

    <ContentPage.Content> 
     <RelativeLayout HorizontalOptions="CenterAndExpand"> 
      <Grid x:Name="outerGrid" HorizontalOptions="CenterAndExpand" VerticalOptions="FillAndExpand" Padding="0,0,0,0" BackgroundColor="Teal"> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="300" /> 
        <RowDefinition Height="*" /> 
        <RowDefinition Height="200" /> 
       </Grid.RowDefinitions> 
       <!-- inner grid 1--> 
       <Grid x:Name="innerGrid" Grid.Row="0" BackgroundColor="White" HorizontalOptions="CenterAndExpand" VerticalOptions="FillAndExpand" Padding="0,0,0,0"> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="1200" /> 
        </Grid.RowDefinitions> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="1000" /> 
       </Grid.ColumnDefinitions> 
        <controls:SvgImageView x:Name="logo" BackgroundColor="White" 
          SvgAssembly="{Binding SvgAssembly}" 
          SvgPath="CCGT.images.brandSketchArtboard.svg" 
          WidthRequest="320" 
          HeightRequest="320" HorizontalOptions="CenterAndExpand" 
          Grid.Row="0" /> 
       </Grid> 

      <!-- inner grid 2 - triangle and controls --> 
       <Grid x:Name="innerGrid2" Grid.Row="1" BackgroundColor="Teal" Padding="0,-10,0,0"> 
        <Grid x:Name="controlsGrid" Grid.Row="0" Grid.Column="0" > 
         <Grid.RowDefinitions> 
          <RowDefinition Height="Auto" /> 
         </Grid.RowDefinitions> 

         <controls:SvgImageView 
          SvgAssembly="{Binding SvgAssembly}" 
          SvgPath="CCGT.images.base2.svg" 
          WidthRequest="1400" 
          HeightRequest="250" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" 
          Grid.Row="0" /> 
        </Grid> 
       </Grid> 
       <!--inner grid 3 - button --> 
       <Grid x:Name="buttonsGrid" Grid.Row="2" BackgroundColor="Teal" Padding="0,-8,0,20" HorizontalOptions="FillAndExpand"> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="Auto" /> 
         <RowDefinition Height="Auto" /> 
         <RowDefinition Height="Auto" /> 
         <RowDefinition Height="Auto" /> 
        </Grid.RowDefinitions> 
        <Entry Grid.Row="0" HeightRequest="40" Placeholder="{ artina:Translate StringEmail }" TextColor="WhiteSmoke" BackgroundColor="Teal" PlaceholderColor="White" AutomationId="LoginPage-EmailEntry" HorizontalOptions="{ artina:OnOrientationLayoutOptions 
           PortraitPhone=Fill, 
           LandscapePhone=Center, 
           PortraitTablet=Fill, 
           LandscapeTablet=CenterAndExpand }" WidthRequest="{ artina:OnOrientationDouble 
           LandscapePhone=200, 
           LandscapeTablet=750 }" /> 
        <Label Text="Verify by using your email address" HorizontalOptions="Center" VerticalOptions="Center" TextColor="WhiteSmoke" Grid.Row="1"/> 

        <artina:Button Grid.Row="2" BackgroundColor="White" TextColor="Teal" VerticalOptions="End" Text="{ artina:Translate StringLogin }" WidthRequest="{ artina:OnOrientationDouble 
           LandscapePhone=200, 
           LandscapeTablet=750 }" HorizontalOptions="{ artina:OnOrientationLayoutOptions 
           PortraitPhone=Fill, 
           LandscapePhone=Center, 
           PortraitTablet=Fill, 
           LandscapeTablet=Center }" AutomationId="LoginPage-SubmitButton" 
            HeightRequest="40"/> 
        <Label Grid.Row="3" Text="{ artina:Translate Trademark }" FontSize="13" HorizontalOptions="Center" VerticalOptions="End" TextColor="WhiteSmoke" AutomationId="LoginPage-Trademark"/> 
       </Grid> 
      </Grid> 
     </RelativeLayout> 
    </ContentPage.Content> 
</ContentPage> 

I

+0

。 –

+0

あなたはAndroidまたはiOS用にのみ開発されていますか? –

答えて

4

スターパーセンテージを使用してデバイス間で拡大縮小を行うことができます。例えば

あなたが途中で10%の上部と下部と80%を取るしたい場合は、この

<RowDefinition Height="*" /> 
<RowDefinition Height="8*" /> 
<RowDefinition Height="*" /> 

を行うことができますあなたは列定義で左右同じことを行うことができます。

私はまた、相対的なレイアウトラッパーを削除します。 It is not recommended。我々は、自動適応を達成するために ` `や ` `使用することができますXamarin.Androidで

関連する問題