2017-12-29 128 views
6

में विभिन्न डिवाइस आकारों के लिए स्केलिंग हैंडलिंग मैं Xamarin रूपों के लिए नया हूं इसलिए पूछना चाहूंगा, अगर मैं एक ग्रिड के साथ एक साधारण एक्सएएमएल पेज बनाता हूं, और उसमें एक और ग्रिड और कुछ टेक्स्ट, एक बटन और एक छवि , Xamarin विभिन्न डिवाइस आकारों के बीच स्केलिंग संभालता है?ज़ैमरिन फॉर्म

मेरी छवि 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> 

मैं

+0

Xamarin.Android में हम ऑटो अनुकूली प्राप्त करने के लिए '<पंक्ति परिभाषा ऊंचाई =" ऑटो "/>' या '<पंक्ति परिभाषा ऊंचाई =" 3 * "/>' का उपयोग कर सकते हैं। –

+0

आपने केवल एंड्रॉइड या आईओएस के लिए भी विकसित किया है? –

उत्तर

4

आप डिवाइस पर स्केलिंग प्रदान करने के लिए स्टार प्रतिशत का उपयोग कर सकते हैं।

उदाहरण के लिए, यदि आप बीच में 10% ऊपर और नीचे और 80% ऊपर ले जाना चाहते थे तो आप इस

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

आप एक ही बात छोड़ दिया और सही स्तंभ परिभाषा के साथ क्या कर सकते हैं कर सकते हैं।

मैं रिश्तेदार लेआउट रैपर भी हटा दूंगा। It is not recommended

संबंधित मुद्दे