Xamarinでフォームをデザインするには？

Question

デザインワンページがありますが、要件のようには見えません。私はXamarinには新しく、添付画像のようにデザインする方法はわかりません。

マイコードです

<Grid Margin="5"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="80"/> 
       <ColumnDefinition Width="*"/> 
      </Grid.ColumnDefinitions> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="40"/> 
       <RowDefinition Height="40"/> 
       <RowDefinition Height="40"/> 
       <RowDefinition Height="40"/> 
       <RowDefinition Height="*"/> 
       <RowDefinition Height="40"/> 
      </Grid.RowDefinitions> 
      <Label Text="From" Font="20" Grid.Row="0" Grid.Column="0"></Label> 
      <Entry x:Name="txtFrom" HorizontalOptions="FillAndExpand" Grid.Row="0" Grid.Column="1" ></Entry> 
      <Label Text="To" Font="20" Grid.Row="1" Grid.Column="0"></Label> 
      <Entry x:Name="txtTo" Grid.Row="1" Grid.Column="1" HorizontalOptions="FillAndExpand"></Entry> 
      <Label Text="Subject" Font="20" Grid.Column="0" Grid.Row="2"></Label> 
      <Entry x:Name="txtSubject" HorizontalOptions="FillAndExpand" Grid.Column="1" Grid.Row="2"></Entry> 
      <Label Text="Body" Font="20" Grid.Column="0" Grid.Row="3"></Label> 
      <Editor x:Name="txtBody" HeightRequest="100" Grid.Row="4" Grid.ColumnSpan="2"></Editor> 
      <Button x:Name="btnSend" Text="Send" BackgroundColor="Orange" Grid.Row="5" Grid.ColumnSpan="2"></Button> 

     </Grid> 

私のUIは、別の添付画像のように見えます。

Answer 1

私はあなたのデザインやあなたが複製することを望んでいる一方との間に見る3つの大きな違いがあります。

1. は何がタイプされていない場合、「名前」は表示されますように、彼らは彼らのEntry秒でPlaceholder秒を使用Entryのテキストとして。
2. ボディEditorは、利用可能なページの残りの部分全体を占有します。
3. ボディのEditorは、この例では黒い枠線で囲まれています。ここで

は、問題のそれぞれを修正するためのいくつかの助けである：

問題1：代わりに、各入力のためにあなたのEntry隣Labelを使用するプレースホルダ

を使用すると、あなたの代わりに使用することができますEntryのPlaceholder。 Entryは、Entryが空の場合は常にPlaceholderの値を表示します。

あなたが名前Entryを変更することができますたとえば：あなたはLabelの

Here's documentation for Entry and the Placeholderを必要としないため、この実装では

<Entry x:Name="txtFrom" HorizontalOptions="FillAndExpand" Placeholder="Name" ></Entry> 

、あなたもGridの列を必要としません

問題2：ページにあなたのEditorを埋め込む

Editorがページ上の残りの部屋を占めるようにするには、FillAndExpandレイアウトオプションプロパティを使用する必要があります。私は個人的にこのようなStackLayoutでそれをすべてGridのうち、あなたのエディタを取って、そして周囲の推薦：

<StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand"> 
    <Grid> 
     <!--Your Grid without the Editor--> 
    </Grid> 
    <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand"> 
     <Editor VerticalOptions="FillAndExpand"/> 
    </StackLayout> 
    <!--Put your button here--> 
</StackLayout> 

Here's documentation for Xamarin's LayoutOptions

Here's a good SO Post about LayoutOptions

問題3：あなたのEditorの周囲に境界線を追加します

実際にXamarin.Formsに枠線を追加する方法はありません。this threadによるとStackLayoutを別のBackgroundColorを別のStackLayoutの内側に入れ、Paddingを加えることができます。私はここに実装しました：

<StackLayout Orientation="Vertical" BackgroundColor="Black" Padding="4" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"> 
    <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="White" Padding="4"> 
     <!--Put your editor here--> 
    </StackLayout> 
</StackLayout> 

Answer 2

xamarin.formのデザインフォームに.Xamlファイルを使用します。

はXamarin公式のチュートリアルに https://developer.xamarin.com/