XAML Denetimleri

  • Makale
  • Okumak için 4 dakika

Örnek indir Örneği indirin

Görünümler, diğer grafik programlama ortamlarında Denetim veya pencere öğeleri olarak bilinen Etiketler, düğmeler ve kaydırıcılar gibi kullanıcı arabirimi nesneleridir. Tüm tarafından desteklenen görünümler Xamarin.FormsView sınıfından türetilir.

İçinde tanımlanan tüm görünümlere Xamarin.Forms xaml dosyalarından başvurulabilir.

Sunuma yönelik görünümler

Görünüm Örnek

BoxView

Belirli bir rengin dikdörtgenini görüntüler.

Boxview ekran görüntüsü

APIKılavuzu		 

<BoxView Color = "vurgu"
         WidthRequest = "150"
         HeightRequest = "150"
         HorizontalOptions = "Center">

Elips

Elips veya daire görüntüler.

Elips elips ekran görüntüsü

APIKılavuzu		 

<Elips dolgusu = "kırmızı"
         WidthRequest = "150"
         HeightRequest = "50"
         HorizontalOptions = "Center"/>

Görüntü

Bit eşlem görüntüler.

Görüntü resminin ekran görüntüsü

APIKılavuzu		 
<Görüntü kaynağı = " https://aka.ms/campus.jpg" ;
       Görünüş = "AspectFit"
       HorizontalOptions = "Center"/>

Etiketle

Metnin bir veya daha fazla satırını görüntüler.

Etiket etiketinin ekran görüntüsü

APIKılavuzu		 

<Etiket metni = "Merhaba, Xamarin.Forms !"
       FontSize = "büyük"
       FontAttributes = "Italik"
       HorizontalTextAlignment = "Center"/>

Çizgi

Bir çizgi görüntüler.

Çizgi çizgisinin ekran görüntüsü

APIKılavuzu		 

<Satır x1 = "40"
      Y1 = "0"
      X2 = "0"
      Y2 = "120"
      Vuruş = "kırmızı"
      HorizontalOptions = "Center"/>

Harita

Bir harita görüntüler.

Harita eşlemesinin ekran görüntüsü

APIKılavuzu		 

<Haritalar: Map ItemSource = "{bağlama konumları}"/>

Yol

Eğrileri ve karmaşık şekilleri görüntüleme.

Yol yolunun ekran görüntüsü

APIKılavuzu		 

<Yol konturu = "siyah"
      Görünüş = "Uniform"
      HorizontalOptions = "Center"
      HeightRequest = "100"
      WidthRequest = "100"
      Data = "d 13.9, 16.2
            L32, 16.2 32, 31.9 13.9, 30.1 Z
            M0, 16.2
            L 11.9, 16.2 11.9, 29.9 0, 28.6 Z
            D 11.9, 2
            L 11.9, 14.2 0, 14.2 0, 3.3 Z
            M32, 0
            L32, 14.2 13.9, 14.2 13.9, 1.8 Z "/>

Poligon

Bir çokgen görüntüleyin.

Çokgen ekran görüntüsü

APIKılavuzu		 

<Çokgen noktaları = "0 48, 0 144, 96 150, 100 0, 192 0, 192 96,
                 50 96, 48 192, 150 200 144 48 "
         Fill = "mavi"
         Vuruş = "kırmızı"
         Strokekalınlığı = "3"
         HorizontalOptions = "Center"/>

Çoklu çizgi

Bir dizi bağlantılı düz çizgi görüntüler.

Çoklu çizgi ekran görüntüsü

APIKılavuzu		 

<Çoklu çizgi noktaları = "0, 0 10, 30, 15, 0 18, 60 23, 30 35, 30 40, 0
                  43, 60 48, 30 100, 30 "
          Vuruş = "kırmızı"
          HorizontalOptions = "Center"/>

Dikdörtgen

Bir dikdörtgen veya kare görüntüler.

Dikdörtgen dikdörtgeninin ekran görüntüsü

APIKılavuzu		 

<Dikdörtgen dolgusu = "kırmızı"
           WidthRequest = "150"
           HeightRequest = "50"
           HorizontalOptions = "Center"/>

WebView

Web sayfalarını veya HTML içeriğini görüntüler.

WebView WebView ekran görüntüsü

APIKılavuzu		 

<WebView kaynağı = " https://docs.microsoft.com/xamarin/" ;
         VerticalOptions = "FillAndExpand"/>

Komutları başlatan görünümler

Görünüm Örnek

Düğme

Metni dikdörtgen bir nesnede görüntüler.

Düğme düğmesinin ekran görüntüsü

APIKılavuzu		 

<Düğme metni = "bana tıklayın!"
        Yazı tipi = "büyük"
        BorderWidth = "1"
        HorizontalOptions = "Center"
        VerticalOptions = "CenterAndExpand"
        Tıklandı = "OnButtonClicked"/>

ImageButton

Dikdörtgen nesnedeki bir görüntüyü görüntüler.

ImageButton 'ın ekran görüntüsü

APIKılavuzu		 

<ImageButton kaynağı = "XamarinLogo.png"
             HorizontalOptions = "Center"
             VerticalOptions = "CenterAndExpand"
             Tıklandı = "Onımagebuttonclicked"/>

RadioButton

Bir kümeden bir seçenek seçimine izin verir.

RadioButton RadioButton 'ın ekran görüntüsü

Kılavuz		 

<RadioButton Text = "Pineapple"
             CheckedChanged = "OnRadioButtonCheckedChanged"/>

RefreshView

Kaydırılabilir içerik için çekme yenileme işlevi sağlar.

Refreshview ekran görüntüsü

Kılavuz		 

<RefreshView ısyenilemeye = "{Binding ısyenilerken}"
             Command = "{Binding RefreshCommand}" >
    <!--Kaydırılabilir denetim buraya gider-->
</RefreshView>

Arama Çubuğu

Arama gerçekleştirmek için kullandığı kullanıcı girişini kabul eder.

Bir Searchbar ekran görüntüsü

Kılavuz		 

<SearchBar PlaceHolder = "arama terimini girin"
           Searchbuttonbasıldı = "Onsearchbarbuttonbasılmış"/>

SwipeView

, Bir çekme hareketi tarafından ortaya çıkarılan bağlam menüsü öğeleri sağlar.

Bir yüzpeview 'ın ekran görüntüsü

Kılavuz		 

<SwipeView>
    <Yüzpeview. Leftıtems>
        <Yüzpeıtems>
            <Yüzpeitem metni = "Sil"
                       Iimagesource = "delete.png"
                       BackgroundColor = "açık pembe"
                       Çağrılan = "Ondeleteçağırılır"/>
        </Yüzpeıtems>
    </Yüzpeview.exe>
    <İçerik!---->
</Yüzpeview>

Değerleri ayarlamaya yönelik görünümler

Görünüm Örnek

CheckBox

Bir değer seçimine izin verir boolean .

CheckBox ekran görüntüsü

Kılavuz		 

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

Kaydırıcı

Sürekli bir aralıktan değer seçimine izin verir double .

Kaydırıcı ekran görüntüsü

APIKılavuzu		 

<Kaydırıcı en az = "0"
        Maksimum = "100"
        VerticalOptions = "CenterAndExpand"/>

Stepper

Artımlı bir aralıktan değer seçimine izin verir double .

Bir Stepper Stepper ekran görüntüsü

APIKılavuzu		 

<Stepper en az = "0"
         Maksimum = "10"
         Artış = "0,1"
         HorizontalOptions = "Center"
         VerticalOptions = "CenterAndExpand"/>

Anahtar

Bir değer seçimine izin verir boolean .

Anahtar anahtarının ekran görüntüsü

APIKılavuzu		 

<Switch değiştirildi = "false"
        HorizontalOptions = "Center"
        VerticalOptions = "CenterAndExpand"/>

DatePicker

Bir tarih seçimine izin verir.

DatePicker ekran görüntüsü

APIKılavuzu		 

<DatePicker biçimi = "D"
            VerticalOptions = "CenterAndExpand"/>

TimePicker

Bir zaman seçimine izin verir.

Timepicker ekran görüntüsü

APIKılavuzu		 

<TimePicker biçimi = "T"
            VerticalOptions = "CenterAndExpand"/>

Metin düzenlemeye yönelik görünümler

Görünüm Örnek

Giriş

Tek satırlık bir metnin girilmesi ve düzenlenmesine izin verir.

Giriş girişinin ekran görüntüsü

APIKılavuzu		 

<Giriş klavyesi = "e-posta"
       PlaceHolder = "e-posta adresini girin"
       VerticalOptions = "CenterAndExpand"/>

Düzenleyici

Birden çok satırlık metnin girilip düzenlenmesine izin verir.

Bir düzenleyici etiketinin ekran görüntüsü

APIKılavuzu		 

<Düzenleyici VerticalOptions = "FillAndExpand"/>

Etkinliği belirtmeye yönelik görünümler

Görünüm Örnek

ActivityIndicator

Uygulamanın, hiçbir ilerleme göstergesi vermeden, uzun bir etkinlikte bağlı olduğunu göstermek için bir animasyon görüntüler.

Bir ActivityIndicator ekran görüntüsü

APIKılavuzu		 

<ActivityIndicator IsRunning = "true"
                   VerticalOptions = "CenterAndExpand"/>

ProgressBar

Uygulamanın uzun bir etkinlikten ilerlediğini gösteren bir animasyon görüntüler.

ProgressBar ProgressBar 'ın ekran görüntüsü

APIKılavuzu		 

<ProgressBar Ilerleme durumu = ". 5"
             VerticalOptions = "CenterAndExpand"/>

Koleksiyonları görüntüleyen görünümler

Görünüm Örnek

CarouselView

Veri öğelerinin kaydırılabilir bir listesini görüntüler.

Carouselview ekran görüntüsü

Kılavuz		 

<CarouselView ItemSource = "{Binding Monkeys}">
              ItemTemplate = "{StaticResource MonkeyTemplate}"/>

CollectionView

Farklı düzen belirtimleri kullanılarak seçilebilir veri öğelerinin kaydırılabilir bir listesini görüntüler.

CollectionView ekran görüntüsü

Kılavuz		 

<CollectionView ItemSource = "{Binding Monkeys}">
                ItemTemplate = "{StaticResource MonkeyTemplate}"
                Itemlayout = "VerticalGrid, 2"/>

IndicatorView

İçindeki öğelerin sayısını temsil eden göstergeleri görüntüler CarouselView .

Indicatorview ekran görüntüsü

Kılavuz		 

<Indicatorview x:Name = "ındicatorview"
               Indicatorcolor = "açık gri"
               Selectedındicatorcolor = "koyu gri"/>

ListView

Seçilebilir veri öğelerinin kaydırılabilir listesini görüntüler.

ListView ListView ekran görüntüsü

APIKılavuzu		 

<ListView ItemSource = "{Binding Monkeys}">
          ItemTemplate = "{StaticResource MonkeyTemplate}"/>

Seçici

Metin dizeleri listesinden bir select öğesi görüntüler.

Bir seçici ekran görüntüsü

APIKılavuzu		 

<Seçici başlığı = "bir maymun seçin"
        TitleColor = "Red">
  <Seçici. ItemSource>
    <x:Array türü = "{x:Type x:String}">
      <x:String > Baboon < /X: dize>
      <x:String > capuşin maymun < /X: dize>
      <x:String > mavi maymun < /X: dize>
      <x:String > SQUIRREL maymun < /X: dize>
      <x:String > altın Lion Tamarin < /X: dize>
      <x:String > Howler maymun < /X: dize>
      <x:String > Japonca Macaque < /X: dize>
    </x: Array>
  </Picker.exe kaynak>
</Picker>

TableView

Etkileşimli satırların bir listesini görüntüler.

Tableview ekran görüntüsü

APIKılavuzu		 

<tableview hedefi = "Ayarlar">
    <TableRoot>
        <TableSection başlığı = "halka">
            <SwitchCell metni = "yeni sesli posta"/>
            <SwitchCell metin = "yeni posta" on = "true"/>
        </TableSection>
    </TableRoot>
</TableView>