Ovládací prvky XAML

  • Článek
  • 4 min ke čtení

Ukázka stažení Stažení ukázky

Zobrazení jsou objekty uživatelského rozhraní, jako jsou popisky, tlačítka a posuvníky, které se běžně označují jako ovládací prvky nebo widgety v jiných grafických programovacích prostředích. Zobrazení podporovaná Xamarin.Forms všemi odvozenými od View třídy.

Všechna zobrazení, která jsou definována v, Xamarin.Forms mohou být odkazována ze souborů XAML.

Zobrazení pro prezentaci

Zobrazení Příklad

BoxView

Zobrazí obdélník konkrétní barvy.

Snímek obrazovky BoxView

Rozhraní APIPrůvodce		 

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

Elipsa

Zobrazí elipsu nebo kruh.

Snímek obrazovky elipsy

Rozhraní APIPrůvodce		 

<Elipsa vyplnit = "Red"
         WidthRequest = "150"
         HeightRequest = "50"
         HorizontalOptions = "Center"/>

Image

Zobrazuje rastrový obrázek.

Snímek obrazovky s obrázku

Rozhraní APIPrůvodce		 
<Zdroj image = " https://aka.ms/campus.jpg" ;
       Aspekt = "AspectFit"
       HorizontalOptions = "Center"/>

Popisek

Zobrazí jeden nebo více řádků textu.

Snímek obrazovky popisku

Rozhraní APIPrůvodce		 

<Text popisku = "Hello, Xamarin.Forms !"
       FontSize = "velký"
       FontAttributes = "kurzíva"
       HorizontalTextAlignment = "Center"/>

Čára

Zobrazit čáru

Snímek obrazovky řádku

Rozhraní APIPrůvodce		 

<Čára x1 = "40"
      Y1 = "0"
      X2 = "0"
      Y2 = "120"
      Vytáhnout = "Red"
      HorizontalOptions = "Center"/>

Mapa

Zobrazí mapu.

Snímek obrazovky mapy

Rozhraní APIPrůvodce		 

<mapy: map ItemsSource = "{umístění vazeb}"/>

Cesta

Zobrazení křivek a složitých tvarů

Snímek obrazovky

Rozhraní APIPrůvodce		 

<Cesta – tah = "černá"
      Aspekt = "Uniform"
      HorizontalOptions = "Center"
      HeightRequest = "100"
      WidthRequest = "100"
      Data = "M 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
            11.9 m, 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 "/>

Mnohoúhelník

Zobrazit mnohoúhelník

Snímek obrazovky

Rozhraní APIPrůvodce		 

<Mnohoúhelníkové body = "0 48, 0 144, 96 150, 100 0, 192 0, 192 96,
                 50 96, 48 192, 150 200 144 48 "
         Fill = "Blue"
         Vytáhnout = "Red"
         StrokeThickness = "3"
         HorizontalOptions = "Center"/>

Lomené čáry

Zobrazí řadu propojených přímých čar.

Snímek obrazovky lomené čáry lomené čáry

Rozhraní APIPrůvodce		 

<Body lomené čáry = "0, 0 10, 30, 15, 0 18, 60 23, 30 35, 30 40, 0
                  43, 60 48, 30 100, 30 "
          Vytáhnout = "Red"
          HorizontalOptions = "Center"/>

Obdélník

Zobrazení obdélníku nebo čtverce

Snímek obrazovkyobdélníkového

Rozhraní APIPrůvodce		 

<Obdélník Fill = "Red"
           WidthRequest = "150"
           HeightRequest = "50"
           HorizontalOptions = "Center"/>

WebView

Zobrazí webové stránky nebo obsah HTML.

Snímek obrazovky s webovým zobrazením WebView

ROZHRANÍ APIPrůvodce		 

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

Zobrazení, která spouštějí příkazy

Zobrazení Příklad

Tlačítko

Zobrazí text v obdélníkovém objektu.

Snímek obrazovky s tlačítkem

ROZHRANÍ APIPrůvodce		 

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

ImageButton

Zobrazí obrázek v obdélníkovém objektu.

Snímek obrazovky s objektem ImageButton

ROZHRANÍ APIPrůvodce		 

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

RadioButton

Umožňuje výběr jedné možnosti ze sady.

Snímek obrazovky s RadioButton

Průvodce		 

<RadioButton Text="Apple"
             CheckedChanged="OnButtonCheckedChanged" />

RefreshView

Poskytuje funkci aktualizace tažením pro posouvání obsahu.

Snímek obrazovky s objektem RefreshView

Průvodce		 

<RefreshView IsRefreshing="{Binding IsRefreshing}"
             Command="{Binding RefreshCommand}" >
    <!-- ovládací prvek Posouvatelný přejde sem -->
</RefreshView>

SearchBar

Přijímá uživatelský vstup, který používá k vyhledávání.

Snímek obrazovky s panelem hledání

Průvodce		 

<SearchBar Placeholder="Zadání hledaného termínu"
           SearchButtonPressed="OnSearchBarButtonPressed" />

SwipeView

Poskytuje položky místní nabídky, které jsou odhaleny gestem potažení.

Snímek obrazovky s objektem SwipeView

Průvodce		 

<SwipeView>
    <SwipeView.LeftItems>
        <Položky potažením prstu>
            <SwipeItem Text="Odstranit"
                       IconImageSource="delete.png"
                       BackgroundColor="LightPink"
                       Invoked="OnDeleteInvoked" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <!-- obsah -->
</SwipeView>

Zobrazení pro nastavení hodnot

Zobrazení Příklad

CheckBox

Umožňuje výběr boolean hodnoty.

Snímek obrazovky se zaškrtávacím polem

Průvodce		 

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

Posuvník

Umožňuje výběr hodnoty double ze souvislého rozsahu.

Snímek obrazovky s posuvníkem

ROZHRANÍ APIPrůvodce		 

<Slider Minimum="0"
        Maximum="100"
        VerticalOptions="CenterAndExpand" />

Krokovač

Umožňuje výběr hodnoty double z přírůstkového rozsahu.

Snímek obrazovky stepperu

ROZHRANÍ APIPrůvodce		 

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

Přepínač

Umožňuje výběr boolean hodnoty.

Snímek obrazovky přepínače

ROZHRANÍ APIPrůvodce		 

<Switch IsToggled="false"
        HorizontalOptions="Center"
        VerticalOptions="CenterAndExpand" />

DatePicker

Umožňuje výběr data.

Snímek obrazovky s DatePickerem

ROZHRANÍ APIPrůvodce		 

<DatePicker Format="D"
            VerticalOptions="CenterAndExpand" />

TimePicker

Umožňuje výběr času.

Snímek obrazovky TimePicker

Rozhraní APIPrůvodce		 

<TimePicker Format = "T"
            VerticalOptions = "CenterAndExpand"/>

Zobrazení pro úpravu textu

Zobrazení Příklad

Entry

Umožňuje zadat a upravit jeden řádek textu.

Snímek obrazovky záznamu

Rozhraní APIPrůvodce		 

<Vstup klávesnice = "E-mail"
       Zástupný symbol = "zadání e-mailové adresy"
       VerticalOptions = "CenterAndExpand"/>

Editor

Umožňuje zadat a upravit více řádků textu.

Snímek obrazovkys editoru

Rozhraní APIPrůvodce		 

<Editor VerticalOptions = "FillAndExpand"/>

Zobrazení pro indikování aktivity

Zobrazení Příklad

ActivityIndicator

Zobrazí animaci, která ukazuje, že se aplikace zapojí s zdlouhavou aktivitou, aniž by to mělo žádné náznaky postupu.

Snímek obrazovky ActivityIndicator

Rozhraní APIPrůvodce		 

<ActivityIndicator-Running = "true"
                   VerticalOptions = "CenterAndExpand"/>

ProgressBar

Zobrazí animaci, která ukazuje, že aplikace pokračuje prostřednictvím zdlouhavé aktivity.

Snímek obrazovky ProgressBar

Rozhraní APIPrůvodce		 

<Průběh procesu ProgressBar = ". 5"
             VerticalOptions = "CenterAndExpand"/>

Zobrazení kolekcí

Zobrazení Příklad

CarouselView

Zobrazí seznam datových položek, které je rolovací.

Snímek obrazovky CarouselView

Průvodce		 

<CarouselView ItemsSource = "{vazby Opices}">
              ItemTemplate = "{StaticResource MonkeyTemplate}"/>

CollectionView

Zobrazí posuvný seznam volitelných datových položek s použitím různých specifikací rozložení.

Snímek obrazovky CollectionView

Průvodce		 

<CollectionView ItemsSource = "{vazby Opices}">
                ItemTemplate = "{StaticResource MonkeyTemplate}"
                ItemsLayout = "VerticalGrid, 2"/>

IndicatorView

Zobrazí indikátory, které reprezentují počet položek v CarouselView .

Snímek obrazovky IndicatorView

Průvodce		 

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

ListView

Zobrazí posuvný seznam volitelných datových položek.

Snímek obrazovky s ListView

Rozhraní APIPrůvodce		 

<ListView ItemsSource = "{vazby Opices}">
          ItemTemplate = "{StaticResource MonkeyTemplate}"/>

Výběr

Zobrazí položku vybrat ze seznamu textových řetězců.

Snímek obrazovkys výběrem ovládacího

Rozhraní APIPrůvodce		 

<Název výběru = "výběr opice"
        TitleColor = "Red">
  <Výběr. ItemsSource>
    <x:Array Type = "{x:Type x:String}">
      <x:String > Baboon < /X: řetězec>
      <x:String > Capuchin opice < /X: řetězec>
      <x:String > Modrá opice < /X: řetězec>
      <x:String > Squirrel opice < /X: řetězec>
      <x:String > zlatá Lion Tamarin < /X: String>
      <x:String > Howler opice < /X: řetězec>
      <x:String > Japanese Macaque < /X: řetězec>
    </x: Array>
  </Picker.ItemsSource>
</Picker>

TableView

Zobrazí seznam interaktivních řádků.

Snímek obrazovky Tableview

Rozhraní APIPrůvodce		 

<TableView záměr = "Nastavení">
    <TableRoot>
        <Oddíl tabulky title = "Ring">
            <SwitchCell text = "nová hlasová pošta"/>
            <SwitchCell text = "nový E-mail" na = "true"/>
        </TableSection>
    </TableRoot>
</TableView>