2016-11-16 18 views
0

xamarinを初めて使用しており、xamlを使用したビューと画像の基本的な位置付けを理解しようとしています。不要なクロップ画像をxamarin形式で画像化する

これは私のXAMLです:

<ContentPage.Content> 
     <StackLayout Spacing="10" 
        x:Name="layout" 
        VerticalOptions="FillAndExpand"> 
      <Button Text="StackLayout" 
       VerticalOptions="Start" 
       HorizontalOptions="FillAndExpand" 
       Clicked="OnButtonClicked"/> 
      <BoxView x:Name="myBoxView" 
       Color="Yellow" 
       VerticalOptions="FillAndExpand" 
       HorizontalOptions="FillAndExpand" /> 
      <Image x:Name="myImageView" 
        Source="circles2.jpg" 
        Aspect="AspectFit" 
        VerticalOptions="Center" 
        HorizontalOptions="FillAndExpand"/> 
      <Image x:Name="streamedImageView" 
        Source="squares.bmp" 
        Aspect="AspectFit" 
        VerticalOptions="Center" 
        HorizontalOptions="FillAndExpand"/> 
     </StackLayout> 
    </ContentPage.Content> 

プログラムのロード、どのような表示されますが次のとおりです。

  1. 画面の約3分の1は、黄色

  2. 「circles2.jpgです"画像は非常に小さい(アイコンよりも小さい)。それは黄色のボックスを吹くように見えます。

  3. "squares.bmp"ピクチャは残りのスペース全体を占有します。

i「がtriangles.bmp」に「circles2.jpg」を変更すると、それは水平可能すべての可能なスペースを占有し、「squares.bmp」は水平方向にも可能な限り多くのスペースを占有画面が残っていないので、画面の下には刈り込みが行われます。

私がこれまで行ってきたすべての研究から、私は見解の切り抜きは起こらないと思った。彼らはすべてスクリーンに収まるように彼らの道を見つけるべきだと思った。

私は間違っていますか? .bmpピクチャを画面境界内にとどめる方法

ありがとうございました。

答えて

0

あなたが画像制御属性を理解する必要があります。

参考:https://developer.xamarin.com/guides/xamarin-forms/working-with/images/

  1. 塗りつぶし - 完全かつ正確に表示領域を埋めるために画像を伸ばし。これにより、画像が歪むことがあります。

  2. アスペクトフィル - アスペクトを維持しながら表示領域を塗りつぶすように画像をクリップします(つまり、歪みなし)。

  3. AspectFit - 画像全体が表示領域に収まるように画像をレターボックス化します(画像の幅が広いか大きいかに応じて上/下または横に空白が追加されます)。

Uはcircles2.jpgためAspectFitを使用し、十分な長さあなたのcircles2.jpgを入れてます=「FillAndExpand」イメージコントロールHorizo​​ntalOptionsを使用しています。 次の画像が青色が画像コントロールであることを示しているので、赤色はあなたのcircle2.jpg です。あなたのcircles2.jpgが十分に大きければ、イメージコントロールは注意をそらすでしょう。 .BMP pictuesは、画面の境界内にとどまるようにする方法

enter image description here

you.RelativeLayoutには適していませんStackLayoutは良いはずです:

https://developer.xamarin.com/guides/xamarin-forms/user-interface/layouts/relative-layout/

関連する問題