Sdílet prostřednictvím

Ovládací prvky XAML

  • Článek

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 jsou odvozena od View třídy.

Na všechna zobrazení definovaná v Xamarin.Forms souborech XAML lze odkazovat.

Zobrazení pro prezentaci

Zobrazení Příklad

BoxView

Zobrazí obdélník určité barvy.

Snímek obrazovky s objektem BoxView

Příručka k rozhraní API / 
<BoxView Color="Zvýraznění"
         WidthRequest="150"
         HeightRequest="150"
         HorizontalOptions="Center">

Elipsa

Zobrazí tři tečky nebo kruh.

Snímek obrazovky s elipsou

Příručka k rozhraní API / 
<Elipsa Fill="Červená"
         WidthRequest="150"
         HeightRequest="50"
         HorizontalOptions="Center" />

Image

Zobrazí rastrový obrázek.

Snímek obrazovky s obrázkem

Příručka k rozhraní API / 
<Zdroj obrázku="https://aka.ms/campus.jpg"
       Aspect="AspectFit"
       HorizontalOptions="Center" />

Popisek

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

Snímek obrazovky s popiskem

Příručka k rozhraní API / 
<Text popisku="Hello, Xamarin.Forms!"
       FontSize="Large"
       FontAttributes="Kurzíva"
       HorizontalTextAlignment="Center" />

Line

Zobrazí čáru.

Snímek obrazovky s řádkem

Příručka k rozhraní API / 
<Řádek X1="40"
      Y1="0"
      X2="0"
      Y2="120"
      Stroke="Červená"
      HorizontalOptions="Center" />

Mapovat

Zobrazí mapu.

Snímek obrazovky s mapou

Příručka k rozhraní API / 
<maps:Map ItemsSource="{Binding Locations}" />

Cesta

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

Snímek obrazovky s cestou

Příručka k rozhraní API / 
<Path Stroke="Černá"
      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" />

Mnohoúhelník

Zobrazení mnohoúhelníku

Snímek obrazovky s mnohoúhelníkem

Příručka k rozhraní API / 
<Polygon Points="0 48, 0 144, 96 150, 100 0, 192 0, 192 96,
                 50 96, 48 192, 150 200 144 48"
         Fill="Modrá"
         Stroke="Červená"
         StrokeThickness="3"
         HorizontalOptions="Center" />

Lomené čáry

Zobrazí řadu propojených rovných čar.

Snímek obrazovky s křivkou

Příručka k rozhraní API / 
<Polyline Points="0,0 10,30, 15,0 18,60 23,30 35,30 40,0
                  43,60 48,30 100,30"
          Stroke="Červená"
          HorizontalOptions="Center" />

Obdélník

Zobrazení obdélníku nebo čtverce

Snímek obrazovky s obdélníkem

Příručka k rozhraní API / 
<Obdélníková výplň="Červená"
           WidthRequest="150"
           HeightRequest="50"
           HorizontalOptions="Center" />

WebView

Zobrazí webové stránky nebo obsah HTML.

Snímek obrazovky webového zobrazení

Příručka k rozhraní API / 
<WebView Source="https://learn.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

Příručka k rozhraní API / 
<Text tlačítka="Click Me!" (Kliknout na mě)
        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

Příručka k rozhraní API / 
<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 přepínačem RadioButton

Příručka		 
<RadioButton Text="Ananas"
             CheckedChanged="OnRadioButtonCheckedChanged" />

RefreshView

Poskytuje funkci aktualizace pro posouvání obsahu.

Snímek obrazovky s objektem RefreshView

Příručka		 
<RefreshView IsRefreshing="{Binding IsRefreshing}"
             Command="{Binding RefreshCommand}" >
    <-- sem přejde posuvný ovládací prvek ...>
</RefreshView>

SearchBar

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

Snímek obrazovky s vyhledávacím panelem

Příručka		 
<SearchBar Placeholder="Enter search term"
           SearchButtonPressed="OnSearchBarButtonPressed" />

SwipeView

Poskytuje položky místní nabídky, které jsou odhaleny gestem potáhnutí prstem.

Snímek obrazovky s potažením prstem

Příručka		 
<SwipeView>
    <SwipeView.LeftItems>
        <Potažení prstem>
            <SwipeItem Text="Odstranit"
                       IconImageSource="delete.png"
                       BackgroundColor="LightPink"
                       Invoked="OnDeleteInvoked" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <!--Obsah-->
</SwipeView>

Zobrazení pro nastavení hodnot

Zobrazení Příklad

Zaškrtávací políčko

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

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

Příručka		 
<CheckBox IsChecked="true"
          HorizontalOptions="Center"
          VerticalOptions="CenterAndExpand" />

Posuvník

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

Snímek obrazovky s posuvníkem

Příručka k rozhraní API / 
<Posuvník Minimum="0"
        Maximum="100"
        VerticalOptions="CenterAndExpand" />

Krokovač

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

Příručka k rozhraní API / 
<Stepper Minimum="0"
         Maximum="10"
         Přírůstek="0,1"
         HorizontalOptions="Center"
         VerticalOptions="CenterAndExpand" />

Přepínač

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

Snímek obrazovky s přepínačem

Příručka k rozhraní API / 
<Switch IsToggled="false"
        HorizontalOptions="Center"
        VerticalOptions="CenterAndExpand" />

Výběr data

Umožňuje výběr data.

Snímek obrazovky s DatePickerem

Příručka k rozhraní API / 
<DatePicker Format="D"
            VerticalOptions="CenterAndExpand" />

TimePicker

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

Snímek obrazovky s TimePickerem

Příručka k rozhraní API / 
<TimePicker Format="T"
            VerticalOptions="CenterAndExpand" />

Zobrazení pro úpravu textu

Zobrazení Příklad

Položka

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

Snímek obrazovky s položkou

Příručka k rozhraní API / 		<
<Entry Keyboard="Email"
       Placeholder="Zadejte e-mailovou adresu"
       VerticalOptions="CenterAndExpand" />

Editor

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

Snímek obrazovky s editorem

Příručka k rozhraní API / 
<Editor VerticalOptions="FillAndExpand" />

Zobrazení pro indikování aktivity

Zobrazení Příklad

ActivityIndicator

Zobrazí animaci, která ukazuje, že aplikace je zapojená do zdlouhavé aktivity, aniž by bylo nutné indikovat průběh.

Snímek obrazovky s objektem ActivityIndicator

Příručka k rozhraní API / 
<ActivityIndicator IsRunning="True"
                   VerticalOptions="CenterAndExpand" />

ProgressBar

Zobrazí animaci, která ukazuje, že aplikace prochází dlouhou aktivitou.

Snímek obrazovky s indikátorem průběhu

Příručka k rozhraní API / 
<ProgressBar Progress=".5"
             VerticalOptions="CenterAndExpand" />

Zobrazení kolekcí

Zobrazení Příklad

CarouselView

Zobrazí posouvatelný seznam datových položek.

Snímek obrazovky s objektem CarouselView

Příručka		 
<CarouselView ItemsSource="{Binding Monkeys}">
              ItemTemplate="{StaticResource MonkeyTemplate}" />

CollectionView

Zobrazí posouvatelný seznam položek s možností výběru s použitím různých specifikací rozložení.

Snímek obrazovky s objektem CollectionView

Příručka		 
<CollectionView ItemsSource="{Binding Monkeys}">
                ItemTemplate="{StaticResource MonkeyTemplate}"
                ItemsLayout="VerticalGrid, 2" />

IndicatorView

Zobrazí indikátory, které představují počet položek v sadě CarouselView.

Snímek obrazovky s zobrazením indikátoru

Příručka		 
<IndicatorView x:Name="indicatorView"
               IndicatorColor="LightGray"
               SelectedIndicatorColor="DarkGray" />

ListView

Zobrazí seznam posouvatelných datových položek, které lze vybrat.

Snímek obrazovky s objektem ListView

Příručka k rozhraní API / 
<ListView ItemsSource="{Binding Monkeys}">
          ItemTemplate="{StaticResource MonkeyTemplate}" />

Picker

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

Snímek obrazovky s výběrem

Příručka k rozhraní API / 		<
<Picker Title="Vybrat opici"
        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

Zobrazí seznam interaktivních řádků.

Snímek obrazovky s objektem TableView

Příručka k rozhraní API / 
<TableView Intent="Settings">
    <TableRoot>
        <TableSection Title="Ring">
            <SwitchCell Text="Nová hlasová pošta" />
            <SwitchCell Text="Nová pošta" On="true" />
        </TableSection>
    </TableRoot>
</TableView>