Aracılığıyla paylaş

XAML Denetimleri

  • Makale

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

içinde Xamarin.Forms tanımlanan tüm görünümlere 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ü

API / Kılavuzu		 
<BoxView Color="Accent"
         WidthRequest="150"
         HeightRequest="150"
         HorizontalOptions="Center">

Elips

Üç nokta veya daire görüntüler.

Üç noktanın ekran görüntüsü

API / Kılavuzu		 
<Üç Nokta Dolgu="Kırmızı"
         WidthRequest="150"
         HeightRequest="50"
         HorizontalOptions="Center" />

Görsel

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

Resim ekran görüntüsü

API / Kılavuzu		 
<Görüntü Kaynağı="https://aka.ms/campus.jpg"
       Aspect="AspectFit"
       HorizontalOptions="Center" />

Etiket

Bir veya daha fazla metin satırı görüntüler.

Etiketin ekran görüntüsü

API / Kılavuzu		 
<Label Text="Hello, Xamarin.Forms!"
       FontSize="Large"
       FontAttributes="Italic"
       HorizontalTextAlignment="Center" />

Satır

Bir satır görüntüleme.

Çizginin ekran görüntüsü

API / Kılavuzu		 
<Satır X1="40"
      Y1="0"
      X2="0"
      Y2="120"
      Stroke="Red"
      HorizontalOptions="Center" />

Harita

Bir harita görüntüler.

Haritanın ekran görüntüsü

API / Kılavuzu		 
<maps:Map ItemsSource="{Binding Locations}" />

Yol

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

Yol ekran görüntüsü

API / Kılavuzu		 
<Yol Vuruşu="Siyah"
      Aspect="Tekdüzen"
      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" />

Poligon

Çokgen görüntüleme.

Çokgen ekran görüntüsü

API / Kılavuzu		 
<Poligon Noktaları="0 48, 0 144, 96 150, 100 0, 192 0, 192 96,
                 50 96, 48 192, 150 200 144 48"
         Fill="Mavi"
         Stroke="Red"
         StrokeThickness="3"
         HorizontalOptions="Center" />

Çoklu çizgi

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

Çok Çizgili Ekran Görüntüsü

API / Kılavuzu		 
<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" />

Dikdörtgen

Dikdörtgen veya kare görüntüler.

Dikdörtgenin ekran görüntüsü

API / Kılavuzu		 
<Dikdörtgen Dolgu="Kırmızı"
           WidthRequest="150"
           HeightRequest="50"
           HorizontalOptions="Center" />

WebView

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

WebView ekran görüntüsü

API / Kılavuzu		 
<WebView Kaynağı="https://learn.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üğmenin ekran görüntüsü

API / Kılavuzu		 
<Düğme Metni="Beni Tıkla!"
        Font="Büyük"
        BorderWidth="1"
        HorizontalOptions="Center"
        VerticalOptions="CenterAndExpand"
        Clicked="OnButtonClicked" />

ImageButton

Dikdörtgen bir nesnede görüntü görüntüler.

ImageButton ekran görüntüsü

API / Kılavuzu		 
<ImageButton Source="XamarinLogo.png"
             HorizontalOptions="Center"
             VerticalOptions="CenterAndExpand"
             Clicked="OnImageButtonClicked" />

RadioButton

Bir kümeden bir seçeneğin seçilmesine izin verir.

RadioButton ekran görüntüsü

Kılavuzu		 
<RadioButton Text="Pineapple"
             CheckedChanged="OnRadioButtonCheckedChanged" />

RefreshView

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

RefreshView ekran görüntüsü

Kılavuzu		 
<RefreshView IsRefreshing="{Binding IsRefreshing}"
             Command="{Binding RefreshCommand}" >
    <-- Kaydırılabilir denetim buraya gider-->
</RefreshView>

Arama Çubuğu

Arama yapmak için kullandığı kullanıcı girişini kabul eder.

Arama Çubuğu'nun ekran görüntüsü

Kılavuzu		 
<SearchBar Placeholder="Arama terimini girin"
           SearchButtonPressed="OnSearchBarButtonPressed" />

SwipeView

Çekme hareketiyle ortaya çıkarılan bağlam menüsü öğeleri sağlar.

SwipeView ekran görüntüsü

Kılavuzu		 
<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems>
            <SwipeItem Text="Delete"
                       IconImageSource="delete.png"
                       BackgroundColor="LightPink"
                       Invoked="OnDeleteInvoked" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <!--Içerik-->
</SwipeView>

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

Görünüm Örnek

CheckBox

Bir boolean değerin seçilmesine izin verir.

Onay Kutusunun ekran görüntüsü

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

Kaydırıcı

Sürekli aralıktan bir double değerin seçilmesine izin verir.

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

API / Kılavuzu		 
<Kaydırıcı Minimum="0"
        Maximum="100"
        VerticalOptions="CenterAndExpand" />

Stepper

Artımlı aralıktan bir double değerin seçilmesine izin verir.Stepper'ın ekran görüntüsü

API / Kılavuzu		 
<Stepper Minimum="0"
         Maximum="10"
         Increment="0,1"
         HorizontalOptions="Center"
         VerticalOptions="CenterAndExpand" />

Switch

Bir boolean değerin seçilmesine izin verir.

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

API / Kılavuzu		 
<Switch IsToggled="false"
        HorizontalOptions="Center"
        VerticalOptions="CenterAndExpand" />

DatePicker

Tarih seçimine izin verir.

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

API / Kılavuzu		 
<DatePicker Format="D"
            VerticalOptions="CenterAndExpand" />

TimePicker

Zaman seçimine izin verir.

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

API / Kılavuzu		 
<TimePicker Format="T"
            VerticalOptions="CenterAndExpand" />

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

Görünüm Örnek

Giriş

Tek bir metin satırının girilmesine ve düzenlenmesine izin verir.

Girdinin ekran görüntüsü

API / Kılavuzu		 <
<Entry Keyboard="Email"
       Placeholder="E-posta adresini girin"
       VerticalOptions="CenterAndExpand" />

Düzenleyici

Birden çok metin satırı girilmesine ve düzenlenmesine izin verir.

Düzenleyicinin ekran görüntüsü

API / Kılavuzu		 
<Editor VerticalOptions="FillAndExpand" />

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

Görünüm Örnek

ActivityIndicator

Uygulamanın ilerleme durumunu belirtmeden uzun bir etkinlikle meşgul olduğunu göstermek için bir animasyon görüntüler.

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

API / Kılavuzu		 
<ActivityIndicator IsRunning="True"
                   VerticalOptions="CenterAndExpand" />

ProgressBar

Uygulamanın uzun bir etkinlikte ilerlediğini göstermek için bir animasyon görüntüler.

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

API / Kılavuzu		 
<ProgressBar Progress=".5"
             VerticalOptions="CenterAndExpand" />

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

Görünüm Örnek

CarouselView

Kaydırılabilir veri öğelerinin listesini görüntüler.

CarouselView ekran görüntüsü

Kılavuzu		 
<CarouselView ItemsSource="{Binding Monkeys}">
              ItemTemplate="{StaticResource MonkeyTemplate}" />

CollectionView

Farklı düzen belirtimlerini kullanarak seçilebilir veri öğelerinin kaydırılabilir listesini görüntüler.

CollectionView ekran görüntüsü

Kılavuzu		 
<CollectionView ItemsSource="{Binding Monkeys}">
                ItemTemplate="{StaticResource MonkeyTemplate}"
                ItemsLayout="VerticalGrid, 2" />

IndicatorView

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

IndicatorView ekran görüntüsü

Kılavuzu		 
<IndicatorView x:Name="indicatorView"
               IndicatorColor="LightGray"
               SelectedIndicatorColor="DarkGray" />

ListView

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

ListView ekran görüntüsü

API / Kılavuzu		 
<ListView ItemsSource="{Binding Monkeys}">
          ItemTemplate="{StaticResource MonkeyTemplate}" />

Picker

Metin dizeleri listesinden bir seçim öğesi görüntüler.

Seçicinin ekran görüntüsü

API / Kılavuzu		 <
<Picker Title="Bir maymun seçin"
        TitleColor="Red">
  <Picker.ItemsSource>
    <x:Array Type="{x:Type x:String}">
      <x:Dize>Baboon</x:String>
      <x:String>Capuchin Monkey</x:String>
      <x:String>Blue Monkey</x:String>
      <x:String>Sincap Maymunu</x:String>
      <x:String>Golden Lion Tamarin</x:String>
      <x:String>Howler Monkey</x:String>
      <x:String>Japonca Macaque</x:String>
    </x:Dizi>
  </Picker.ItemsSource>
</Picker>

TableView

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

TableView ekran görüntüsü

API / Kılavuzu		 
<TableView Intent="Ayarlar">
    <TableRoot>
        <TableSection Title="Ring">
            <SwitchCell Text="Yeni Sesli Mesaj" />
            <SwitchCell Text="New Mail" On="true" />
        </TableSection>
    </TableRoot>
</TableView>