次の方法で共有

XAML コントロール

  • [アーティクル]

ビューとは、他のグラフィカル プログラミング環境では "コントロール" や "ウィジェット" として一般的に知られている、ラベル、ボタン、スライダーなどのユーザー インターフェイス オブジェクトのことです。 Xamarin.Forms でサポートされているビューは、すべて View クラスから派生します。

Xamarin.Forms で定義されているすべてのビューは、XAML ファイルから参照できます。

表示用のビュー

表示 例

BoxView

特定の色の四角形を表示します。

BoxView のスクリーンショット

API / ガイド		 
<BoxView Color="Accent"
         WidthRequest="150"
         HeightRequest="150"
         HorizontalOptions="Center">

楕円

楕円または円を表示します。

Ellipse のスクリーンショット

API / ガイド		 
<Ellipse Fill="Red"
         WidthRequest="150"
         HeightRequest="50"
         HorizontalOptions="Center" />

Image

ビットマップを表示します。

Image のスクリーンショット

API / ガイド		 
<Image Source="https://aka.ms/campus.jpg"
       Aspect="AspectFit"
       HorizontalOptions="Center" />

Label

1 つ以上のテキスト行を表示します。

Label のスクリーンショット

API / ガイド		 
<Label Text="Hello, Xamarin.Forms!"
       FontSize="Large"
       FontAttributes="Italic"
       HorizontalTextAlignment="Center" />

ライン

線を表示します。

Line のスクリーンショット

API / ガイド		 
<Line X1="40"
      Y1="0"
      X2="0"
      Y2="120"
      Stroke="Red"
      HorizontalOptions="Center" />

マップ

マップを表示します。

Map のスクリーンショット

API / ガイド		 
<maps:Map ItemsSource="{Binding Locations}" />

Path

曲線や複雑な図形を表示します。

Path のスクリーンショット

API / ガイド		 
<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Center"
      HeightRequest="100"
      WidthRequest="100"
      Data="M13.9,16.2
            L32,16.2 32,31.9 13.9,30.1Z
            M0,16.2
            L11.9,16.2 11.9,29.9 0,28.6Z
            M11.9,2
            L11.9,14.2 0,14.2 0,3.3Z
            M32,0
            L32,14.2 13.9,14.2 13.9,1.8Z" />

Polygon

多角形を表示します。

Polygon のスクリーンショット

API / ガイド		 
<Polygon Points="0 48, 0 144, 96 150, 100 0, 192 0, 192 96,
                 50 96, 48 192, 150 200 144 48"
         Fill="Blue"
         Stroke="Red"
         StrokeThickness="3"
         HorizontalOptions="Center" />

ポリライン

接続された一連の直線を表示します。

Polyline のスクリーンショット

API / ガイド		 
<Polyline Points="0,0 10,30, 15,0 18,60 23,30 35,30 40,0
                  43,60 48,30 100,30"
          Stroke="Red"
          HorizontalOptions="Center" />

四角形

四角形または正方形を表示します。

Rectangle のスクリーンショット

API / ガイド		 
<Rectangle Fill="Red"
           WidthRequest="150"
           HeightRequest="50"
           HorizontalOptions="Center" />

WebView

Web ページまたは HTML コンテンツを表示します。

WebView のスクリーンショット

API / ガイド		 
<WebView Source="https://learn.microsoft.com/xamarin/"
         VerticalOptions="FillAndExpand" />

コマンドを開始するビュー

表示 例

Button

四角形のオブジェクトにテキストを表示します。

Button のスクリーンショット

API / ガイド		 
<Button Text="Click Me!"
        Font="Large"
        BorderWidth="1"
        HorizontalOptions="Center"
        VerticalOptions="CenterAndExpand"
        Clicked="OnButtonClicked" />

ImageButton

四角形のオブジェクトに画像を表示します。

ImageButton のスクリーンショット

API / ガイド		 
<ImageButton Source="XamarinLogo.png"
             HorizontalOptions="Center"
             VerticalOptions="CenterAndExpand"
             Clicked="OnImageButtonClicked" />

RadioButton

セットから 1 つのオプションを選択できるようにします。

RadioButton のスクリーンショット

ガイド		 
<RadioButton Text="Pineapple"
             CheckedChanged="OnRadioButtonCheckedChanged" />

RefreshView

スクロール可能なコンテンツにプルして更新機能を提供します。

RefreshView のスクリーンショット

ガイド		 
<RefreshView IsRefreshing="{Binding IsRefreshing}"
             Command="{Binding RefreshCommand}" > 
    <!-- ここにスクロール可能なコンテンツが入ります -->
</RefreshView>

SearchBar

検索の実行に使用されるユーザー入力を受け入れます。

SearchBar のスクリーンショット

ガイド		 
<SearchBar Placeholder="Enter search term"
           SearchButtonPressed="OnSearchBarButtonPressed" />

SwipeView

スワイプ ジェスチャで表示されるコンテキスト メニュー項目を提供します。

SwipeView のスクリーンショット

ガイド		 
<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems>
            <SwipeItem Text="Delete"
                       IconImageSource="delete.png"
                       BackgroundColor="LightPink"
                       Invoked="OnDeleteInvoked" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <!-- コンテンツ -->
</SwipeView>

値を設定するためのビュー

表示 例

CheckBox

boolean 値の選択を許可します。

CheckBox のスクリーンショット

ガイド		 
<CheckBox IsChecked="true"
          HorizontalOptions="Center"
          VerticalOptions="CenterAndExpand" />

Slider

連続する範囲からの double 値の選択を許可します。

Slider のスクリーンショット

API / ガイド		 
<Slider Minimum="0"
        Maximum="100"
        VerticalOptions="CenterAndExpand" />

ステッパ

増分範囲からの double 値の選択を許可します。Stepper のスクリーンショット

API / ガイド		 
<Stepper Minimum="0"
         Maximum="10"
         Increment="0.1"
         HorizontalOptions="Center"
         VerticalOptions="CenterAndExpand" />

Switch

boolean 値の選択を許可します。

Switch のスクリーンショット

API / ガイド		 
<Switch IsToggled="false"
        HorizontalOptions="Center"
        VerticalOptions="CenterAndExpand" />

DatePicker

日付の選択を許可します。

DatePicker のスクリーンショット

API / ガイド		 
<DatePicker Format="D"
            VerticalOptions="CenterAndExpand" />

TimePicker

時間の選択を許可します。

TimePicker のスクリーンショット

API / ガイド		 
<TimePicker Format="T"
            VerticalOptions="CenterAndExpand" />

テキストを編集するためのビュー

表示 例

入力

1 行のテキストの入力と編集を許可します。

Entry のスクリーンショット

API / ガイド		 <
<Entry Keyboard="Email"
       Placeholder="Enter email address"
       VerticalOptions="CenterAndExpand" />

[エディター]

複数行のテキストの入力と編集を許可します。

Editor のスクリーンショット

API / ガイド		 
<Editor VerticalOptions="FillAndExpand" />

アクティビティを示すためのビュー

表示 例

ActivityIndicator

アプリケーションが時間のかかるアクティビティを、進行状況を示さずに実行していることを示すアニメーションを表示します。

ActivityIndicator のスクリーンショット

API / ガイド		 
<ActivityIndicator IsRunning="True"
                   VerticalOptions="CenterAndExpand" />

ProgressBar

アプリケーションで時間のかかるアクティビティが進行中でることを示すアニメーションを表示します。

ProgressBar のスクリーンショット

API / ガイド		 
<ProgressBar Progress=".5"
             VerticalOptions="CenterAndExpand" />

コレクションを表示するビュー

表示 例

CarouselView

データ項目のスクロール可能な一覧を表示します。

CarouselView のスクリーンショット

ガイド		 
<CarouselView ItemsSource="{Binding Monkeys}">
              ItemTemplate="{StaticResource MonkeyTemplate}" />

CollectionView

さまざまなレイアウト仕様を使用して選択可能なデータ項目のスクロール可能な一覧を表示します。

CollectionView のスクリーンショット

ガイド		 
<CollectionView ItemsSource="{Binding Monkeys}">
                ItemTemplate="{StaticResource MonkeyTemplate}"
                ItemsLayout="VerticalGrid, 2" />

IndicatorView

CarouselView 内の項目の数を表すインジケーターを表示します。

IndicatorView のスクリーンショット

ガイド		 
<IndicatorView x:Name="indicatorView"
               IndicatorColor="LightGray"
               SelectedIndicatorColor="DarkGray" />

ListView

データ項目のスクロール可能な一覧を表示します。

ListView のスクリーンショット

API / ガイド		 
<ListView ItemsSource="{Binding Monkeys}">
          ItemTemplate="{StaticResource MonkeyTemplate}" />

Picker

テキスト文字列の一覧から選択項目を表示します。

Picker のスクリーンショット

API / ガイド		 <
<Picker Title="Select a monkey"
        TitleColor="Red">
  <Picker.ItemsSource>
    <x:Array Type="{x:Type x:String}">
      <x:String>Baboon</x:String>
      <x:String>Capuchin Monkey</x:String>
      <x:String>Blue Monkey</x:String>
      <x:String>Squirrel Monkey</x:String>
      <x:String>Golden Lion Tamarin</x:String>
      <x:String>Howler Monkey</x:String>
      <x:String>Japanese Macaque</x:String>
    </x:Array>
  </Picker.ItemsSource>
</Picker>

TableView

対話型の行の一覧を表示します。

TableView のスクリーンショット

API / ガイド		 
<TableView Intent="Settings">
    <TableRoot>
        <TableSection Title="Ring">
            <SwitchCell Text="New Voice Mail" />
            <SwitchCell Text="New Mail" On="true" />
        </TableSection>
    </TableRoot>
</TableView>